99热在线精品一区二区三区_国产伦精品一区二区三区女破破_亚洲一区二区三区无码_精品国产欧美日韩另类一区

這期內(nèi)容當中小編將會給大家?guī)碛嘘P(guān)如何正確的使用Bootstrap、Dual和Listbox插件，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

成都創(chuàng)新互聯(lián)堅持“要么做到，要么別承諾”的工作理念，服務領(lǐng)域包括：成都網(wǎng)站制作、做網(wǎng)站、外貿(mào)營銷網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務，滿足客戶于互聯(lián)網(wǎng)時代的武寧網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

基本使用

需要用到的JS和CSS文件位于項目代碼下的dist目錄中，需要將這個目錄中的對應文件放入你的項目里，這一步不贅述

1.引入CSS/JS文件，由于bootstrap-duallistbox是基于bootstrap的，所以要先引入bootstrap相關(guān)的css和js

1.加載duallistbox插件

  GroupA
  GroupB
  GroupC
  GroupD
  GroupE
  GroupF
  GroupG

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，點擊便會變更選項到對應的選擇框內(nèi)，如果設(shè)置為false則會在出現(xiàn)moveSelected的箭頭需要點擊箭頭或者雙擊選項后才能變更選項到對應的選擇框

nonSelectedFilter： 未選中的默認過濾規(guī)則，可以配置為OPS-COFFEE-A則未選中的框內(nèi)只會顯示OPS-COFFEE-A

selectedFilter： 已選中的默認規(guī)則，與noSelectedFilter類似

使用進階

獲取已選擇的值

selectorx.val()

獲取select插件對象

selectorx.bootstrapDualListbox('getContainer')

刷新插件元素用戶界面

selectorx.bootstrapDualListbox('refresh');

刪除bootstrap-duallistbox插件，恢復select原樣

selectorx.bootstrapDualListbox('destroy');

動態(tài)添加select的option

selectorx.append('ops-coffee.cn');
selectorx.bootstrapDualListbox('refresh');

上述就是小編為大家分享的如何正確的使用Bootstrap、Dual和Listbox插件了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道。

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

標題名稱：如何正確的使用Bootstrap、Dual和Listbox插件-創(chuàng)新互聯(lián)
地址分享：http://ef60e0e.cn/article/cspsod.html