jQuery插件之-selectList

浏览数：30 / 时间：2015年06月09日

基于jQuery的对select操作的插件有不少，jQuery插件selectList可以用于替换标准的HTML 多选 select 标签，它提供一个漂亮并且更加友好的界面，在IE和非IE内核浏览器上表现基本一致，除了IE6下重复项不能变成灰色的，当然功能表现都是一致的。当用户从下拉列表中选一个项目时，被选中的项目将在控件下方显示，而且还可以删除，被选中的项目不能重复选择。插件用于需要多项选择的地方还是不错的，当然如果select能够美化下会更好了，O(∩_∩)O哈哈~。选中项目的显示样式也是可以自定义的，而且还支持自定义显示效果。插件兼容Firefox 2+, Opera 9.5+, Google Chrome, Safari 3+, Internet Explorer 6+.

插件基本用法：

  
    1
    $(function 
() {

    2
     $(‘select‘).selectList();
  
    3
     });

效果截图：

基本用法

自定义样式用法：

  
    1
    <style type="text/css">
  
    2
     .selectlist-item {
  
    3
     background: black;
  
    4
     color: white;
  
    5
     border: solid 
1px #888;

    6
     }
  
    7
    </style>

效果截图：

自定义样式

自定义样式用的时候只需要编写 selectlist-item 类样式就可以了，JS调用方法和基本使用方式一样。

自定义列表项模板用法：

  
    1
    $(‘select‘).selectList({
  
    2
    template: ‘<li>%text%<br /><small>%value%</small></li>‘
  
    3
    });

效果截图：

自定义列表项模板

自定义动画用法：

  
    1
    $(‘select‘).selectList({
  
    2
     addAnimate: function 
(item, callback) {

    3
     $(item).slideDown(500, callback);
  
    4
     },
  
    5
     removeAnimate: function 
(item, callback) {

    6
     $(item).slideUp(500, callback);
  
    7
     }
  
    8
     });