海洋工作室——网站建设专家：jQuery MultiSelect-优快云博客

jQuery MultiSelect是一款可配置的jQuery插件，用于将普通的多选表单控件转换为用户友好的下拉列表。该插件完全通过CSS进行样式设置，并且易于配置和实现。它具有键盘快捷方式以提高可访问性，并且可选地提供“全选”功能。

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)