位置: 编程技术 - 正文
推荐整理分享JS组件中bootstrap multiselect两大组件较量(javascript 组件),希望有所帮助,仅作参考,欢迎阅读内容。
文章相关热门搜索词:bootstrap组件大全,js中使用组件,js bootstraptable,bootstrap js插件,bootstrap.js怎么用,bootstrap的组件,js bootstraptable,js bootstraptable,内容如对您有帮助,希望把文章链接给更多的朋友!
两个这种组件,大体样式和功能基本相同,本文就来带领大家看看这两个组件的用法。
一、组件说明以及API1、第一个组件——multiple-select。这个组件风格简单、文档全、功能强大。但是觉得它选中的效果不太好。关于它的效果展示,我们放在后面。
2、第二个组件——bootstrap-multiselect。这个组件风格和第一个非常相似,文档也挺全面。
二、Multiple-select组件1、组件说明这个组件需要的浏览器支持如下:
IE 7+ Chrome 8+ Firefox + Safari 3+ Opera .6+还好,一般主流的浏览器都能够支持。
2、效果预览 (1)原始的MultiSelect
(2)初始化的Multiple Select
(3)设置选中和禁用
(4)设置分组
(5)设置未选中的初始值:请选择
(6)初始化成单选
(7)设置组件的筛选功能
3、代码示例既然是bootstrap的组件,肯定需要bootstrap的支持。我们来看看需要引用的js
(1)原始的初始化
(2)设置选中和禁用
(3)设置分组和初始值
(4)单选
(5)筛选
(6)如果你的multiple select不想要默认的初始值,可以在初始化的时候去设置他们的值。如下是源码里面的默认参数列表。
三、Bootstrap-multiselect组件1、代码示例初始化的过程和上面的类似,首先引用文件。
(1)最原始的初始化
(2)设置选中和禁用
(3)分组
其他效果的代码就不一一展示了,代码很简单,看看文档基本没啥问题。
如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程Bootstrap实战教程
标签: javascript 组件
本文链接地址:https://www.jiuchutong.com/biancheng/382785.html 转载请保留说明!友情链接: 武汉网站建设