视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
JS组件中bootstrapmultiselect两大组件较量_javascript技巧
2020-11-27 21:49:22 责编:小采
文档
 两个这种组件,大体样式和功能基本相同,本文就来带领大家看看这两个组件的用法。

一、组件说明以及API
1、第一个组件——multiple-select。这个组件风格简单、文档全、功能强大。但是觉得它选中的效果不太好。关于它的效果展示,我们放在后面。

2、第二个组件——bootstrap-multiselect。这个组件风格和第一个非常相似,文档也挺全面。

二、Multiple-select组件
1、组件说明
这个组件需要的浏览器支持如下:

  • IE 7+
  • Chrome 8+
  • Firefox 10+
  • Safari 3+
  • Opera 10.6+
  • 还好,一般主流的浏览器都能够支持。

    2、效果预览
    (1)原始的MultiSelect

    (2)初始化的Multiple Select

    (3)设置选中和禁用

    (4)设置分组

    (5)设置未选中的初始值:请选择

    (6)初始化成单选

    (7)设置组件的筛选功能

    3、代码示例
    既然是bootstrap的组件,肯定需要bootstrap的支持。我们来看看需要引用的js

     @*Jquery*@
     
    
     @*bootstrap*@
     
     
    
     @*multiple-select*@
     
     
    
     @*页面js*@
     

    (1)原始的初始化

    
    
    
    
    
    
    

    (2)设置选中和禁用

    
    
    

    (3)设置分组和初始值

    
    
    

    (4)单选

    
    
    

    (5)筛选

    
    
    

    (6)如果你的multiple select不想要默认的初始值,可以在初始化的时候去设置他们的值。如下是源码里面的默认参数列表。

    三、Bootstrap-multiselect组件
    1、代码示例
    初始化的过程和上面的类似,首先引用文件。

    
    
     
     
    
     
     
    
     

    (1)最原始的初始化

    
    
    

    (2)设置选中和禁用

    
    
    

    (3)分组

    
    
    

    其他效果的代码就不一一展示了,代码很简单,看看文档基本没啥问题。

    下载本文
    显示全文
    专题