前端插件之Bootstrap Dual Listbox使用教程
對(duì)于很多非專業(yè)前端開(kāi)發(fā)來(lái)說(shuō)寫頁(yè)面是非常痛苦的,借助框架或插件往往能夠達(dá)到事半功倍的效果,本系列文章會(huì)介紹我在運(yùn)維系統(tǒng)開(kāi)發(fā)過(guò)程中用到的那些順手的前端插件,如果你是想寫XX管理系統(tǒng)的學(xué)生、或是需要獨(dú)自做Dashboard的后端工程師、亦或是像我這樣半吊子的開(kāi)發(fā)加運(yùn)維,那么這個(gè)系列的文章你一定不要錯(cuò)過(guò)
Bootstrap Dual Listbox是一款基于Bootstrap的雙向select選擇框控件,作為對(duì)multiple select
的擴(kuò)展,使用起來(lái)非常簡(jiǎn)單,功能也更強(qiáng)大
項(xiàng)目Github地址:https://github.com/istvan-ujjmeszaros/bootstrap-duallistbox
基本使用
需要用到的JS和CSS文件位于項(xiàng)目代碼下的dist目錄中,需要將這個(gè)目錄中的對(duì)應(yīng)文件放入你的項(xià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.完成以上兩步可以看到頁(yè)面效果如下
非常簡(jiǎn)單,到這里已經(jīng)可以正常使用這個(gè)控件了,更多的花樣接著往下看
配置說(shuō)明
整個(gè)界面為英文顯示,有默認(rèn)提示,如果你想將提示改為中文或添加自定義的提示內(nèi)容,那么可以通過(guò)如下配置
var selectorx = $('select[name="groups"]').bootstrapDualListbox({ nonSelectedListLabel: '未選擇的組', selectedListLabel: '已選擇的組', filterTextClear: '展示所有', filterPlaceHolder: '過(guò)濾搜索', moveSelectedLabel: "添加", moveAllLabel: '添加所有', removeSelectedLabel: "移除", removeAllLabel: '移除所有', infoText: '共{0}個(gè)組', infoTextFiltered: '搜索到{0}個(gè)組 ,共{1}個(gè)組', infoTextEmpty: '列表為空', });
以上配置都比較簡(jiǎn)單,對(duì)照中文就能知曉意思,不做過(guò)多解釋,另外有幾個(gè)支持的參數(shù)說(shuō)明如下:
infoText: 除了設(shè)置字符串外還可設(shè)置為false,當(dāng)設(shè)置為false時(shí)可隱藏這段信息
showFilterInputs: 默認(rèn)為true,是否顯示filter過(guò)濾框
moveOnSelect: 默認(rèn)為true,點(diǎn)擊便會(huì)變更選項(xiàng)到對(duì)應(yīng)的選擇框內(nèi),如果設(shè)置為false則會(huì)在出現(xiàn)moveSelected的箭頭需要點(diǎn)擊箭頭或者雙擊選項(xiàng)后才能變更選項(xiàng)到對(duì)應(yīng)的選擇框
nonSelectedFilter: 未選中的默認(rèn)過(guò)濾規(guī)則,可以配置為OPS-COFFEE-A則未選中的框內(nèi)只會(huì)顯示OPS-COFFEE-A
selectedFilter: 已選中的默認(rèn)規(guī)則,與noSelectedFilter類似
使用進(jìn)階
獲取已選擇的值
selectorx.val()
獲取select插件對(duì)象
selectorx.bootstrapDualListbox('getContainer')
刷新插件元素用戶界面
selectorx.bootstrapDualListbox('refresh');
刪除bootstrap-duallistbox插件,恢復(fù)select原樣
selectorx.bootstrapDualListbox('destroy');
動(dòng)態(tài)添加select的option
selectorx.append('<option value="9" selected>ops-coffee.cn</option>'); selectorx.bootstrapDualListbox('refresh');
注意:上文中的所有selectorx都為加載duallistbox時(shí)實(shí)例化的select對(duì)象
完整Demo
為了方便大家學(xué)習(xí),我寫了個(gè)完整的demo,你可以在線查看效果或下載代碼應(yīng)用到自己的項(xiàng)目中
在線Demo地址:https://demo.ops-coffee.cn/duallistbox/
Github源碼地址:https://github.com/ops-coffee/demo/tree/master/duallistbox
總結(jié)
以上所述是小編給大家介紹的前端插件之Bootstrap Dual Listbox使用教程,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺(jué)得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
相關(guān)文章
js實(shí)現(xiàn)前端界面導(dǎo)航欄下拉列表
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)前端界面導(dǎo)航欄下拉列表,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-08-08點(diǎn)擊單元格后可編輯單元格內(nèi)文本如何制作
點(diǎn)擊單元格后可編輯單元格內(nèi)文本如何制作...2006-10-10微信小程序?qū)崿F(xiàn)select二級(jí)下拉
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)select二級(jí)下拉效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07js驗(yàn)證模型自我實(shí)現(xiàn)的具體方法
js驗(yàn)證模型自我實(shí)現(xiàn)的具體方法,需要的朋友可以參考一下2013-06-06ImageZoom 圖片放大鏡效果(多功能擴(kuò)展篇)
上一篇ImageZoom已經(jīng)對(duì)圖片放大效果做了詳細(xì)的分析,這次在ImageZoom的基礎(chǔ)上進(jìn)行擴(kuò)展,實(shí)現(xiàn)更多的效果。2010-04-04微信小程序完美解決scroll-view高度自適應(yīng)問(wèn)題的方法
這篇文章主要介紹了微信小程序完美解決scroll-view高度自適應(yīng)問(wèn)題的方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08Javascript string 擴(kuò)展庫(kù)代碼
Javascript原生的String處理函數(shù)顯得很不夠豐富2010-04-04js給網(wǎng)頁(yè)加上背景音樂(lè)及選擇音效的方法
這篇文章主要介紹了js給網(wǎng)頁(yè)加上背景音樂(lè)及選擇音效的方法,涉及javascript操作音頻的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03使用JS的input框?qū)崿F(xiàn)音頻文件的上傳與播放功能
最近的系統(tǒng)加的功能是越來(lái)越多了,前兩天老板又讓實(shí)現(xiàn)一個(gè)錄音上傳的功能,可以點(diǎn)擊播放按鈕打開(kāi)音頻播放器,點(diǎn)擊暫停按鈕暫定播放,想了想決定使用input框的file類型加上接收的參數(shù)為audio來(lái)實(shí)現(xiàn)此功能,感興趣的朋友可以參考下2024-06-06