Bootstrap   发布时间:2022-04-18  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了JS组件中bootstrap multiselect两大组件较量大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

两个这种组件,大体样式和功能基本相同,本文就来带领大家看看这两个组件的用法

一、组件说明以及API

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

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

二、Multiple-SELEct组件

1、组件说明

这个组件需要的浏览器支持如下:

  • IE 7+

  • Chrome 8+

  • Firefox 10+

  • Safari 3+

  • Opera 10.6+

还好,一般主流的浏览器都能够支持

2、效果预览

(1)原始的MultiSELEct

JS组件中bootstrap multiselect两大组件较量

(2)初始化的Multiple SELEct

JS组件中bootstrap multiselect两大组件较量

JS组件中bootstrap multiselect两大组件较量

JS组件中bootstrap multiselect两大组件较量

(3)设置选中和禁用

JS组件中bootstrap multiselect两大组件较量

(4)设置分组

JS组件中bootstrap multiselect两大组件较量

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

JS组件中bootstrap multiselect两大组件较量

(6)初始化成单选

JS组件中bootstrap multiselect两大组件较量

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

JS组件中bootstrap multiselect两大组件较量

JS组件中bootstrap multiselect两大组件较量

3、代码示例

既然是bootstrap的组件,肯定需要bootstrap的支持。我们来看看需要引用的js


@bootstraP@
<script src="~/Content/bootstrap/js/bootstrap.min.js">

@@H_136_153@multiple-SELEct@
<script src="~/Content/multiSELEct_wenzhixin/multiple-SELEct-master/multiple-SELEct.js">

@页面js@
<script src="~/Scripts/Home/Index_wenzhixin.js">

大佬总结

以上是大佬教程为你收集整理的JS组件中bootstrap multiselect两大组件较量全部内容,希望文章能够帮你解决JS组件中bootstrap multiselect两大组件较量所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。