基于jQuery的对select操作的插件有不少,jQuery插件selectList可以用于替换标准的HTML 多选 select 标签,它提供一个漂亮并且更加友好的界面,在IE和非IE内核浏览器上表现基本一致,除了IE6下重复项不能变成灰色的,当然功能表现都是一致的。当用户从下拉列表中选一个项目时,被选中的项目将在控件下方显示,而且还可以删除,被选中的项目不能重复选择。插件用于需要多项选择的地方还是不错的,当然如果select能够美化下会更好了,O(∩_∩)O哈哈~。选中项目的显示样式也是可以自定义的,而且还支持自定义显示效果。插件兼容Firefox 2+, Opera 9.5+, Google Chrome, Safari 3+, Internet Explorer 6+.
插件基本用法:
2 |
$( 'select' ).selectList(); |
效果截图:
基本用法
自定义样式用法:
1 |
<style type= "text/css" > |
5 |
border : solid 1px #888 ; |
效果截图:
自定义样式
自定义样式用的时候只需要编写 selectlist-item 类样式就可以了,JS调用方法和基本使用方式一样。
自定义列表项模板用法:
1 |
$( 'select' ).selectList({ |
2 |
template: '<li>%text%<br /><small>%value%</small></li>' |
效果截图:
自定义列表项模板
自定义动画用法:
1 |
$( 'select' ).selectList({ |
2 |
addAnimate: function (item, callback) { |
3 |
$(item).slideDown(500, callback); |
5 |
removeAnimate: function (item, callback) { |
6 |
$(item).slideUp(500, callback); |
效果截图:
自定义动画
官方主页:http://odyniec.net/projects/selectlist/
官方下载:http://odyniec.net/projects/selectlist/jquery.selectlist-0.3.2.zip
本地下载:jquery.selectlist-0.3.2