Login 
  Remiya.com  Home   Products   Freebies   Help   
  
Menu & Navigation
 Freebies
 - JQuery HtmlBox
 - JQuery Codify
 - JQuery Dropdown
 - JQuery Tablify

Latest News
New Version of JQuery Codify Released
- Posted: 21.03.11
New Website Design
- Posted: 01.02.11
View All
 
Content
  Location:» Freebies» JQuery Dropdown 

JQuery Dropdown

Overview

JQuery Dropdown is a cross-browser JQuery plugin allowing the creation of select boxes with images. It has advanced configuration options, which allow functions to be executed on selection change or click, as well as great methods interface, allowing dynamic change of selection, and getting the selected value as text.

Demo

Features

Easy Integration. Takes no exaustive coding to install. Copy an example from the guide bellow and paste.

Multiple Browser Support. The JQuery Dropdown plugin has been tested and is working fine in Mozilla Firefox, Internet Explorer 6.0, Opera, Safari and Netscape Navigator.

Small Size. With the size of 4kb JQuery Dropdown is a must have for every JQuery developer.

Highly Configurable. JQuery Dropdown can be easily configured to match your needs.

Installation

To use the JQuery Dropdown plugin, include the jQuery library and the Dropdown plugin inside the <head> tag of your HTML document.

    <script src="jquery.min.js" type="text/javascript">
    <script src="jquery.dropdown.js" type="text/javascript">

Second. Specify your dropdown in pure HTML.

<div id="languages">
    <ul>
        <li>
            <img src="us.gif"" border="0" align="absmiddle">
            <span>English</span>
        </li>
        <li>
            <img src="it.gif" align="absmiddle" border="0">
            <span>Italian</span>
        </li>
        <li>
            <img src="es.gif" align="absmiddle" border="0">
            <span>Spanish</span>
        </li>
    </ul>
</div>

Third. Call the dropdown plugin.

$(document).ready(function(){
    // Set the width to match the background image
    $("#languages").width(172).dropdown();
});

Advanced Options

You can further set up the JQuery Dropdown plugin with options, that suit your application best.

$(document).ready(function(){
    var lang = $("#languages").width(172).dropdown({
        width:172, height:28,
        // Customize dropdown image
        image:"dropdown.gif",
        // Customize mouse over color
        mouseovercolor:"silver",
        // Customize mouse out color
        mouseoutcolor:"white",
        // A custom function to be executed on value changed
        change:function(value){"Value changed to:"+alert(value)},
         // A custom function to be executed on dropdown option clicked
        click:function(value){"Value clicked:"alert(value)}
    });
});

Available Methods

Currently the JQuery Dropdown plugin supports two methods - value and select.

$(document).ready(function(){
    // Initiating the dropdown
    var lang = $("#languages").width(172).dropdown();

    // Specify which option is to be selected by index, 0 is selected by default
    lang.select(1);

    // Specify which option is to be selected by value,
    // if the value exists it will be selected
    lang.select("Italian");
    
    // Get the currently selected value
    alert(lang.value());
});

License

Dropdown version 1.2 (01.04.2009)
Copyright(c)2009 Remiya Solutions All Rights Reserved
Website: http://remiya.com

This script may be used for both free and commercial purposes only
if the following conditions are met:

 1. A link back to the author's website is provided on the website,
    where the script is being used.
	
 2. You are hereby licensed to make as many copies of this script
    as you need in order to distribute your own work (including
    for commercial use). You are specifically prohibited from
    charging, or requesting donations, for any such copies
    without prior written permission.
	
 3. You ARE NOT allowed to distribute for download the script via
    electronic means (Internet, e-mail, etc). This means that
    this software is to be available to download from the official
    website (http://remiya.com) ONLY.
 
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
DEALINGS IN THE SOFTWARE.

Download

I have read and fully understand the license agreement.
 
Ads
  
  Copyright © 2011 Remiya Solutions. All rights reserved