Dropdown - Image Select Box

Description

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.



Examples

  •    English
  •    Italian
  •    Spanish
  •    Smile
  •    Angry
  •    Kiss
  •    Confused
  •    Oops
  •    Cool


Features

Easy Integration. Takes no exaustive coding of your part. A single line of JavaScript is more than enough. Or even easier - copy an example from this website and paste.


Multiple Browser Support. The 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 Dropdown is a must have for every JQuery developer.

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



Getting started

To use the 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 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 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.