学步园

Here is the oraginal link, http://abeautifulsite.net/notebook.php?article=62

Overview

jQuery MultiSelect is a configurable plugin for jQuery. It is designed to turn ordinary multi-select form controls into user-friendly dropdown lists. Check out the demo to see an example.

This project was inspired by arco90’s MultiSelect tool, but was written entirely from scratch to make it easier to implement, more accessible, and to shorten the code length.

This project is in beta testing and may not be ready for production use yet! See the to do list for more information.

Features

• Produces valid XHTML
• Fully customizeable via CSS
• Easy to configure and implement
• Degrades gracefully
• Keyboard shortcuts to maximize accessibility
• Optional “Select All” for convenience

Compatibility

This plugin requires jQuery 1.2.6 or above and has been tested to work in the following browsers:

• Internet Explorer 6 & 7
• Firefox 2 & 3 (beta)
• Safari 3
• Chrome (beta)
• Opera 9

Demo

View a live demonstration of jQuery MultiSelect.

Download

Current version: Version 1.0.2 beta (10 May 2009)

This plugin is provided to you as-is, at absolutely no cost. If you would like to support its development, feel free to contribute any amount you prefer via PayPal. As always, you are welcome to contribute code for bug fixes and feature enhancements as well. Either way, thanks for supporting our efforts!

Usage

Creating

In it’s simplest form, you can create a MultiSelect form control using the following code:

$(document).ready( function() {
    $("#control_id").multiSelect();
});

where #control_id is the ID of the select element that exists on your page. You can use any valid jQuery selector as the ID, but make sure you only use select elements with the multiple="multiple" attribute to get the expected results.

Configuring

Parameters are passed as an object to the multiSelect() function. Valid options include:

Parameter	Description	Default Value
selectAll	whether or not to display the “Select All” option	true
selectAllText	text to display for selecting/unselecting all options simultaneously	Select All
noneSelected	text to display when there are no selected items in the list	'Select options'
oneOrMoreSelected	text to display when there are one or more selected items in the list (note: you can use % as a placeholder for the number of items selected). Use * to show a comma separated list of all selected items	'% selected'

To create a MultiSelect control with multiple parameters, your code will look something like this:

$(document).ready( function() {
    $("#control_id").multiSelect({
      selectAll: false,
      noneSelected: 'Check some boxes!',
      oneOrMoreSelected: '% options checked'
    });
});

Styling

The MultiSelect plugin relies 100% on CSS for styling. To give your users an aesthetically pleasing experience, you should either use the included stylesheet or create your own. Refer to jquery.multiSelect.css to make any changes in the styles.

Callback

If you specify a callback function, the MultiSelect control will execute it whenever a checkbox’s checked state is changed. Currently, the function passes the checkbox element that was clicked as a jQuery object. To specify a callback function, your code will look something like this:

$(document).ready( function() {
    $("#control_id").multiSelect(options, function() {
        alert('Something was checked!');
    });
});

where options is either null or a JavaScript object (see configuring for details).

To Do List

As jQuery MultiSelect is still in beta testing, there is an actively-updated to do list. To add something to the list or to contribute to the project in any way, please contact me using our contact form. You will receive appropriate credit for any and all contributions you make to this project, however you must agree that all code you submit will fall under the same license as the jQuery MultiSelect project.

What’s Left?

• Hide dropdown on a click that occurs outside of the dropdown/textbox
• Remove textbox selection when focusing on textbox
• “Select All” checkbox should be checked when all options get selected manually

Known IE6 Differences

• select layering bug (here is one possible solution that can be applied to your HTML/CSS)
• Max-height doesn’s work (unsupported CSS property)
• Clicking on labels won’t trigger the checkbox (normal browser behavior)

Licensing & Terms of Use

This plugin is dual-licensed under the GNU General Public License and the MIT License and is copyright 2008 A Beautiful Site, LLC.