成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

下拉多選框

Lyux / 640人閱讀

摘要：基于來制作的一個下拉多選控件使用前需加載庫樣式和還有。由于我覺得有趣一點，把項目遷移到了，地址如下

Bootstrap Selection

基于Bootstrap.dropdown來制作的一個下拉多選控件
使用前需加載JQuery、Bootstrap庫（樣式和JS）還有underscore js。

如果不需要動態(tài)加載下拉項可不加載underscore js

例子

簡單使用



//簡單使用
$("#small-exp").selection();

動態(tài)加載

//數(shù)據(jù)源
var data = [
    {"id":1,"name":"star","content":"五星"},
    {"id":2,"name":"star","content":"準(zhǔn)五星"},
    {"id":3,"name":"star","content":"四星"},
    {"id":4,"name":"star","content":"準(zhǔn)四星"},
    {"id":5,"name":"star","content":"三星"},
    {"id":6,"name":"star","content":"準(zhǔn)三星"},
    {"id":7,"name":"star","content":"二星"},
    {"id":8,"name":"star","content":"經(jīng)濟型"}
];
//動態(tài)加載例子
$("#small-exp").selection("source",data);
方法

顯示（或隱藏）下拉框
$(".dropdown-checkbox").selection("toggle")

全選
$(".dropdown-checkbox").selection("all")

反選
$(".dropdown-checkbox").selection("invert")

取消選擇
$(".dropdown-checkbox").selection("none")

取得標(biāo)題
$(".dropdown-checkbox").selection("title")

設(shè)置標(biāo)題
$(".dropdown-checkbox").selection("title","標(biāo)題")

取得數(shù)據(jù)源
$(".dropdown-checkbox").selection("source")

設(shè)置數(shù)據(jù)源
$(".dropdown-checkbox").selection("source",{JSON})

取得所有下拉項的JQuery對象(就是所有checkbox)
$(".dropdown-checkbox").selection("items")

事件

多選控件勾選后促發(fā)bs.selection.changed事件。

$(".dropdown-checkbox").selection().on("bs.selection.changed",function(e,selection,$item){
    //...
});
其他

在dropdown-checkbox元素中設(shè)置以下data-屬性會自動加載

 data-title="星級 "
 data-source="[{"id":1,"name":"star","content":"五星"},...,{"id":8,"name":"star","content":"經(jīng)濟型"}]"

取得每個子項的數(shù)據(jù)源，前提是動態(tài)加載下拉的子項

$(".dropdown-checkbox").selection("items").each(function(){
    //數(shù)據(jù)保存在li上
    var data = $(this).parents("li").data("bs.selection.item.data");
});

  
詳細(xì)參考：http://git.oschina.net/packy-tang/Bootstrap-Selection

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝［更新說明］＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

項目新版本已經(jīng)使用bower、gruntjs等管理工具從新打包，多謝各位關(guān)注。
由于我覺得coding.net有趣一點，把項目遷移到coding了，地址如下：

  
https://coding.net/u/packy/p/Bootstrap-Selection/git

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/85339.html

相關(guān)文章

  • 封裝下拉多選框

    {{item.text}} × ↑ ↓ {{item.text}}

    luck 評論0 收藏0

  • 1-3. Vue.js核心知識之表單綁定

    摘要：我們可以用指令在表單及元素上創(chuàng)建雙向數(shù)據(jù)綁定。它會根據(jù)控件類型自動選取正確的方法來更新元素。 我們可以用 v-model 指令在表單 input 及 textarea 元素上創(chuàng)建雙向數(shù)據(jù)綁定。它會根據(jù)控件類型自動選取正確的方法來更新元素。 文本輸入框 你輸入的內(nèi)容: {{ message }} 多行文本框 你輸入的內(nèi)容：{{ message }} 單選框 男 ...

    mayaohua 評論0 收藏0

  • HTML表單元素及CSS

    摘要：表單一介紹標(biāo)簽表示為表單，表單元素是允許用戶在表單中輸入內(nèi)容。屬性值被提交表單的類型二表單組件組件一般被定義在表單中標(biāo)簽中標(biāo)簽表示輸入框，為空標(biāo)簽。屬性，屬性規(guī)定要顯示的元素的類型。冒號表示分隔符，分號表示結(jié)束符。 表單 一、介紹 標(biāo)簽表示為表單，表單元素是允許用戶在表單中輸入內(nèi)容。 屬性：action-提交表單的地址 Method-提交表單的方式。屬性值：get/post ...

    MyFaith 評論0 收藏0

  • HTML表單元素及CSS

    摘要：表單一介紹標(biāo)簽表示為表單，表單元素是允許用戶在表單中輸入內(nèi)容。屬性值被提交表單的類型二表單組件組件一般被定義在表單中標(biāo)簽中標(biāo)簽表示輸入框，為空標(biāo)簽。屬性，屬性規(guī)定要顯示的元素的類型。冒號表示分隔符，分號表示結(jié)束符。 表單 一、介紹 標(biāo)簽表示為表單，表單元素是允許用戶在表單中輸入內(nèi)容。 屬性：action-提交表單的地址 Method-提交表單的方式。屬性值：get/post ...

    jayzou 評論0 收藏0

  • 初識 “HTML”

    摘要：僅在屬性存在時使用。規(guī)定顯示圖像的。表格概念具有行和列基本結(jié)構(gòu)表示表格表示行表示單元格帶表頭的表格表頭單元格由創(chuàng)建，元素中的文本通常呈現(xiàn)粗體并居中。規(guī)定用于發(fā)送表單數(shù)據(jù)的方法。規(guī)定表單的名稱。 HTML 什么是HTML？ ①全稱：超文本標(biāo)記語言②超文本：在普通的文本內(nèi)容的基礎(chǔ)上添加超鏈接、圖片、視頻等③標(biāo)記語言：HTML提供一系列標(biāo)簽④版本：HTML 4.01 HTML聲明 1.編碼格...

    史占廣 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<