断断续续,把流水统计模块做完了,今天正好上线了,主要供内部使用^^

回头一想,虽然只是一个小功能,但是涉及到的部门和技术还不少呢。

bootstrap选择框样式(前端-你要的炫酷下拉框Bootstrap-Select来了)(1)

界面这块,后面有时间还需要优化调整。

Bootstrap-Select

鉴于在已有的框架下使用的是JQuery和Bootstrap,又要用到绑定数据源的下拉框,那就非Bootstrap-Select莫属了。

Bootstrap-Select是一个可以Bootstrap效果的JQuery插件。

官方网站:http://silviomoreto.github.io/bootstrap-select/

Github地址:https://github.com/silviomoreto/bootstrap-select

bootstrap选择框样式(前端-你要的炫酷下拉框Bootstrap-Select来了)(2)

如何使用Bootstrap-Select

下载JS和CSS

bootstrap选择框样式(前端-你要的炫酷下拉框Bootstrap-Select来了)(3)

引用JS和CSS

在<head>标签中加上如图所示

bootstrap选择框样式(前端-你要的炫酷下拉框Bootstrap-Select来了)(4)

编写页面代码

有了前面的工作,我们就可以在页面里添加下拉框控件了,很简单

<select id="testSelect" class="selectpicker show-tick form-control" data-width="250px" data-live-search="true">

bootstrap选择框样式(前端-你要的炫酷下拉框Bootstrap-Select来了)(5)

下面展示的搜索的功能,直接输入,bootstrap-select会立即筛选会候选项

bootstrap选择框样式(前端-你要的炫酷下拉框Bootstrap-Select来了)(6)

添加监听事件

有时候我们使用下拉框不仅仅是需要展示,我们需要使用它的监听事件,比如change,当选中一个新的选项,我们希望展示的数据会跟随选项值更新,这时候我们需要利用到函数change,好比这样

$("#testSelect").change(function() {

怎么样,是不是很简单,又很好用,你学会了?

,