海洋工作室——网站建设专家:jQuery MultiSelect
2009-09-16 15:57
681 查看
Here is the oraginal link, http://abeautifulsite.net/notebook.php?article=62
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.
Fully customizeable via CSS
Easy to configure and implement
Degrades gracefully
Keyboard shortcuts to maximize accessibility
Optional “Select All” for convenience
Internet Explorer 6 & 7
Firefox 2 & 3 (beta)
Safari 3
Chrome (beta)
Opera 9
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!
$(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.
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'
});
});
$(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).
Remove textbox selection when focusing on textbox
“Select All” checkbox should be checked when all options get selected manually
Max-height doesn’s work (unsupported CSS property)
Clicking on labels won’t trigger the checkbox (normal browser behavior)
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 XHTMLFully 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' |
$(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/textboxRemove 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.相关文章推荐
- 海洋工作室——网站建设专家:jQuery-Ui Tabs and Asp.net MVC
- 海洋工作室——网站建设专家:jQuery Intellisense in VS 2008
- 海洋工作室——网站建设专家:How To: Create an ASP.NET AJAX Style Folder Explorer
- 海洋工作室——网站建设专家:对C# 中堆栈,堆,值类型,引用类型的理解
- 海洋工作室——网站建设专家:【原】基于文件驱动的网站开发,易于维护,且使用简单,所见即所得!
- 海洋工作室——网站建设专家:MVC 开发框架下载地址
- 海洋工作室——网站建设专家:网 页 设 计 制 作 规 范
- 海洋工作室——网站建设专家:强制关闭网页不征求浏览器确认框
- 海洋工作室——网站建设专家:MVC 部署 Windows 2003 Server
- 海洋工作室——网站建设专家:徐小平:不做人生规划,你离挨饿只有三天 —— 靠自己的劳动赢得生存就是成功【强烈推荐】
- 海洋工作室——网站建设专家:如何重数据库中取得次N大的记录?
- 海洋工作室——网站建设专家:为上海“90后公交售票妹妹”做宣传广告词
- 海洋工作室——网站建设专家:C#堆栈讲解
- 海洋工作室——网站建设专家:SVN服务器架设-Subversion快速入门教程
- 海洋工作室——网站建设专家:只有十句话,看了十分钟(完整版)[不应该只看十分钟!!!]
- 海洋工作室——网站建设专家:【原】强烈推荐两个WEB UI 常用的绿色工具——WEB UI 开发人员进【可下载】
- 海洋工作室——网站建设专家:送两个高级可信的IT方面的电子书下载地址给大家【关键是完全免费,无需额外Q币或积分什么的】
- 海洋工作室——网站建设专家:如何在IIS6.0中部署asp.net mvc程序
- 海洋工作室——网站建设专家:web模态窗口window.showModalDialog简介
- 海洋工作室——网站建设专家:C#位运算演示教程!【权限控制用到位运算非常棒的】