前端插件之Bootstrap Dual Listbox使用教程
對于很多非專業(yè)前端開發(fā)來說寫頁面是非常痛苦的,借助框架或插件往往能夠達到事半功倍的效果,本系列文章會介紹我在運維系統(tǒng)開發(fā)過程中用到的那些順手的前端插件,如果你是想寫XX管理系統(tǒng)的學生、或是需要獨自做Dashboard的后端工程師、亦或是像我這樣半吊子的開發(fā)加運維,那么這個系列的文章你一定不要錯過
Bootstrap Dual Listbox是一款基于Bootstrap的雙向select選擇框控件,作為對multiple select
的擴展,使用起來非常簡單,功能也更強大
項目Github地址:https://github.com/istvan-ujjmeszaros/bootstrap-duallistbox
基本使用
需要用到的JS和CSS文件位于項目代碼下的dist目錄中,需要將這個目錄中的對應(yīng)文件放入你的項目里,這一步不贅述
1.引入CSS/JS文件,由于bootstrap-duallistbox是基于bootstrap的,所以要先引入bootstrap相關(guān)的css和js
<!-- 加載bootstrap --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <link rel="stylesheet" > <!-- 加載bootstrap-dualllistbox --> <link rel="stylesheet" href="static/bootstrap-duallistbox/bootstrap-duallistbox.css" rel="external nofollow" > <script src="static/bootstrap-duallistbox/jquery.bootstrap-duallistbox.js"></script>
1.加載duallistbox插件
<select class="form-control" multiple="multiple" name="groups" size="10"> <option value="1">GroupA</option> <option selected value="2">GroupB</option> <option value="3">GroupC</option> <option value="4">GroupD</option> <option selected value="5">GroupE</option> <option value="6">GroupF</option> <option value="7">GroupG</option> </select> <script> var selectorx = $('select[name="groups"]').bootstrapDualListbox(); </script>
1.完成以上兩步可以看到頁面效果如下
非常簡單,到這里已經(jīng)可以正常使用這個控件了,更多的花樣接著往下看
配置說明
整個界面為英文顯示,有默認提示,如果你想將提示改為中文或添加自定義的提示內(nèi)容,那么可以通過如下配置
var selectorx = $('select[name="groups"]').bootstrapDualListbox({ nonSelectedListLabel: '未選擇的組', selectedListLabel: '已選擇的組', filterTextClear: '展示所有', filterPlaceHolder: '過濾搜索', moveSelectedLabel: "添加", moveAllLabel: '添加所有', removeSelectedLabel: "移除", removeAllLabel: '移除所有', infoText: '共{0}個組', infoTextFiltered: '搜索到{0}個組 ,共{1}個組', infoTextEmpty: '列表為空', });
以上配置都比較簡單,對照中文就能知曉意思,不做過多解釋,另外有幾個支持的參數(shù)說明如下:
infoText: 除了設(shè)置字符串外還可設(shè)置為false,當設(shè)置為false時可隱藏這段信息
showFilterInputs: 默認為true,是否顯示filter過濾框
moveOnSelect: 默認為true,點擊便會變更選項到對應(yīng)的選擇框內(nèi),如果設(shè)置為false則會在出現(xiàn)moveSelected的箭頭需要點擊箭頭或者雙擊選項后才能變更選項到對應(yīng)的選擇框
nonSelectedFilter: 未選中的默認過濾規(guī)則,可以配置為OPS-COFFEE-A則未選中的框內(nèi)只會顯示OPS-COFFEE-A
selectedFilter: 已選中的默認規(guī)則,與noSelectedFilter類似
使用進階
獲取已選擇的值
selectorx.val()
獲取select插件對象
selectorx.bootstrapDualListbox('getContainer')
刷新插件元素用戶界面
selectorx.bootstrapDualListbox('refresh');
刪除bootstrap-duallistbox插件,恢復(fù)select原樣
selectorx.bootstrapDualListbox('destroy');
動態(tài)添加select的option
selectorx.append('<option value="9" selected>ops-coffee.cn</option>'); selectorx.bootstrapDualListbox('refresh');
注意:上文中的所有selectorx都為加載duallistbox時實例化的select對象
完整Demo
為了方便大家學習,我寫了個完整的demo,你可以在線查看效果或下載代碼應(yīng)用到自己的項目中
在線Demo地址:https://demo.ops-coffee.cn/duallistbox/
Github源碼地址:https://github.com/ops-coffee/demo/tree/master/duallistbox
總結(jié)
以上所述是小編給大家介紹的前端插件之Bootstrap Dual Listbox使用教程,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!
相關(guān)文章
微信小程序完美解決scroll-view高度自適應(yīng)問題的方法
這篇文章主要介紹了微信小程序完美解決scroll-view高度自適應(yīng)問題的方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-08-08使用JS的input框?qū)崿F(xiàn)音頻文件的上傳與播放功能
最近的系統(tǒng)加的功能是越來越多了,前兩天老板又讓實現(xiàn)一個錄音上傳的功能,可以點擊播放按鈕打開音頻播放器,點擊暫停按鈕暫定播放,想了想決定使用input框的file類型加上接收的參數(shù)為audio來實現(xiàn)此功能,感興趣的朋友可以參考下2024-06-06