JS组件中bootstrap multiselect两大组件较量
两个这种组件,大体样式和功能基本相同,本文就来带领大家看看这两个组件的用法。 一、组件说明以及API1、第一个组件——multiple-select。这个组件风格简单、文档全、功能强大。但是觉得它选中的效果不太好。关于它的效果展示,我们放在后面。2、第二个组件——bootstrap-multiselect。这个组件风格和第一个非常相似,文档也挺全面。 二、Multiple-select组件1、组件说明 这个组件需要的浏览器支持如下:
还好,一般主流的浏览器都能够支持。 2、效果预览 (1)原始的MultiSelect (2)初始化的Multiple Select (3)设置选中和禁用 (4)设置分组 (5)设置未选中的初始值:请选择 (6)初始化成单选 (7)设置组件的筛选功能 3、代码示例 既然是bootstrap的组件,肯定需要bootstrap的支持。我们来看看需要引用的js @bootstrap@ @multiple-select@ @页面js@ (1)原始的初始化 (2)设置选中和禁用 (3)设置分组和初始值 $(function () { (4)单选 (5)筛选 (6)如果你的multiple select不想要默认的初始值,可以在初始化的时候去设置他们的值。如下是源码里面的默认参数列表。 三、Bootstrap-multiselect组件1、代码示例 初始化的过程和上面的类似,首先引用文件。<script src="~/Content/bootstrap/js/bootstrap.min.js"> <script src="~/Content/multiselect_davidstutz/js/bootstrap-multiselect.js"> <script src="~/Scripts/Home/Index_davidstutz.js"> (1)最原始的初始化 $(function () { (2)设置选中和禁用 (3)分组 $(function () { 其他效果的代码就不一一展示了,代码很简单,看看文档基本没啥问题。 如果大家还想深入学习,可以点击进行学习,再为大家附两个精彩的专题: 以上就是两种多选组件的效果展示以及简单的代码示例。至于哪种更好全凭自己的感觉,使用起来都挺简单,功能基本类似,希望这篇文章对大家的学习有所帮助。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- bash中的多行模式匹配
- angularjs – $locationChangeStart,$routeChangeStart和$s
- less 经典范例 bootstrap 的 less 版本 常用 less 代码
- typescript – AngularFire 2 sendPasswordResetEmail
- angularjs – 如何在Angular JS中的routeProvider中传递par
- 事件 – 扩展面板中的Scala Swing反应
- Angular 4 HttpInterceptor:显示和隐藏加载器
- angularjs – ng-repeat:来自JSON数组对象的访问键和值
- bash – Shell:逻辑AND和OR而不是if-else
- AngularJS内幕详解之 Scope