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

資訊專欄INFORMATION COLUMN

前端插件一：jQuery Multi-Select多選插件

NoraXie / 969人閱讀

摘要：項(xiàng)目此項(xiàng)目是替換標(biāo)準(zhǔn)含有屬性的標(biāo)簽的一套交互友好的組件。類型默認(rèn)值禁用狀態(tài)選項(xiàng)的。類型默認(rèn)值為時(shí)已選區(qū)域的選項(xiàng)根據(jù)選中順序排序。方法初始化多選插件。選項(xiàng)選項(xiàng)選項(xiàng)取消選中匹配值的一項(xiàng)或多項(xiàng)。取消選中所有選項(xiàng)。

項(xiàng)目

此項(xiàng)目是替換標(biāo)準(zhǔn) JavaScript 

$("#my-select").multiSelect();
選項(xiàng) afterInit

類型:function
默認(rèn)值：function(container){}
初始化multiSelect后執(zhí)行的方法。

afterSelect

類型:function
默認(rèn)值：function(values){}
選中選項(xiàng)后執(zhí)行的方法。

afterDeselect

類型:function
默認(rèn)值：function(values){}
取消選中后執(zhí)行的方法。

selectableHeader

類型：HTML/Text
默認(rèn)值：null
自定義可選區(qū)域header。

selectableFooter

類型：HTML/Text
默認(rèn)值：null
自定義可選區(qū)域footer。

selectionHeader

類型：HTML/Text
默認(rèn)值：null
自定義已選區(qū)域header。

selectionFooter

類型：HTML/Text
默認(rèn)值：null
自定義已選區(qū)域footer。

disabledClass

類型：String
默認(rèn)值："disabled"
禁用狀態(tài)選項(xiàng)的css class。

selectableOptgroup

類型：Boolean
默認(rèn)值：false
為true時(shí)點(diǎn)擊optgroup時(shí)等同于選中所有子選項(xiàng)。

keepOrder

類型：Boolean
默認(rèn)值：false
為true時(shí)已選區(qū)域的選項(xiàng)根據(jù)選中順序排序。

dblClick

類型：Boolean
默認(rèn)值：false
為true時(shí)雙擊才會選中選項(xiàng)。

cssClass

類型：String
默認(rèn)值：""
在multiselect容器（.ms-container）上添加自定義css class。

方法 .multiSelect(options)

初始化multi-select多選插件。

$("#my-select").multiSelect({});
.multiSelect("select", String|Array)

選中匹配值的一項(xiàng)或多項(xiàng)。

$("#my-select").multiSelect("select", "選項(xiàng)1");
$("#my-select").multiSelect("select", ["選項(xiàng)1", "選項(xiàng)3"]);
.multiSelect("deselect", String|Array)

取消選中匹配值的一項(xiàng)或多項(xiàng)。

$("#my-select").multiSelect("deselect", "選項(xiàng)2");
$("#my-select").multiSelect("deselect", ["選項(xiàng)2", "選項(xiàng)4"]);
.multiSelect("select_all")

選中所有選項(xiàng)。

$("#my-select").multiSelect("select_all");
.multiSelect("deselect_all")

取消選中所有選項(xiàng)。

$("#my-select").multiSelect("deselect_all");
.multiSelect("refresh")

刷新當(dāng)前multi-select。

$("#my-select").multiSelect("refresh");
.multiSelect("addOption", Hash)

以鍵值對形式動態(tài)添加選項(xiàng)到multi-select。

key        類型        是否必填        描述
value      String      true           需添加的選項(xiàng)值
text       String      true           需添加的選項(xiàng)內(nèi)容    
index      Number      false          選項(xiàng)插入到從0開始的第幾個(gè)位置，默認(rèn)追加在選項(xiàng)的末尾
nested     String      false          如果存在optgroup，選項(xiàng)可以插入到某一optgroup下

$("#my-select").multiSelect("addOption", { value: "test", text: "test", index: 0, nested: "optgroup_label" });
鍵盤操作 
key            作用
[ ↓ ]下        選擇下一個(gè)選項(xiàng)
[ ↑ ]上        選擇上一個(gè)選項(xiàng)
[ — ]空格      選中當(dāng)前選擇的選項(xiàng)
[ ← ]左        切換到上一區(qū)域
[ → ]右        切換到下一區(qū)域
Demo HTML 

    

        

            
選擇聯(lián)系人
JavaScript 
// 初始化
$("#optgroup").multiSelect({
    selectableHeader: "",
    selectionHeader: "",
    selectableOptgroup: true,
    afterSelect: function (values) {
        select.modifyselectNum("#optgroup");
    },
    afterDeselect: function (values) {
        select.modifyselectNum("#optgroup");
    }
});

// 可選全選按鈕
$("button.selectAll").click(function(){
    $(selectId).multiSelect("select_all");
    return false;
});

// 已選全選按鈕
$("button.deselectAll").click(function(){
    $(selectId).multiSelect("deselect_all");
    return false;
});

// 搜索框?qū)崟r(shí)查詢
$("input.search-input").on("input propertychange", function() {
    var inputValue = $(this).val().trim();
    var $selections = $(selectId).siblings(".ms-container").find(".ms-selectable li.ms-elem-selectable");
    $selections.each(function () {
        var thisValue = $(this).children("span").text();
        if (thisValue.match(inputValue)) {
            $(this).show();
        } else {
            $(this).hide();
        }
    });
});
效果預(yù)覽

更多demo詳見參考文檔：http://loudev.com/

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

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

相關(guān)文章

  • 基于 Spring Boot 和 Shiro 的權(quán)限管理系統(tǒng)，界面風(fēng)格為 Material Desi

    摘要：系統(tǒng)簡介是一個(gè)簡單高效的后臺權(quán)限管理系統(tǒng)。開發(fā)時(shí)直接使用的入口類啟動即可，訪問地址。部署時(shí)建議打包成包，訪問地址端口號。本軟件使用協(xié)議，請嚴(yán)格遵照協(xié)議內(nèi)容。 系統(tǒng)簡介 FEBS是一個(gè)簡單高效的后臺權(quán)限管理系統(tǒng)。項(xiàng)目基礎(chǔ)框架采用全新的Java Web開發(fā)框架 —— Spring Boot，消除了繁雜的XML配置，使得二次開發(fā)更為簡單；數(shù)據(jù)訪問層采用Mybatis，同時(shí)引入了通用Mappe...

    klinson 評論0 收藏0

  • HHuploadify 變化多端的圖片上傳組件

    摘要：上傳成功之后，用端返回的字段中的作為新的預(yù)覽圖片。通過的配置，采用不同的上傳進(jìn)度展示效果。利用選項(xiàng)，進(jìn)行簡單擴(kuò)展之后，就可以實(shí)現(xiàn)一組固定的上傳。通過鉤子函數(shù)，對上傳的最大張數(shù)進(jìn)行控制。上面圖片演示中，最多只能上傳張圖片。 你可以在這里讀到我第一次發(fā)布HHuploadify的內(nèi)容，那個(gè)時(shí)候HHuploadify只是作為一個(gè)jquery插件發(fā)布，但是現(xiàn)在不同了我希望把它獨(dú)立出來，不依賴jq...

    bawn 評論0 收藏0

  • 樹插件的使用說明

    摘要：源代碼提取碼文件樹提取碼功能支持展開收起功能可刪除樹節(jié)點(diǎn)可移動樹節(jié)點(diǎn)根據(jù)樹節(jié)點(diǎn)的數(shù)據(jù)來源可以是一個(gè)數(shù)組，也可以是一個(gè)地址調(diào)用方法存在一個(gè)樹的容器引入在里面引入文件在的底部引入文件調(diào)用數(shù)據(jù)接口選擇的類型單選還是多選還是菜單默認(rèn)為菜單選擇的類型 源代碼： url: http://yunpan.cn/cwkgzpzSBDXEu （提取碼：e3af） 文件樹：http://yunpan.c...

    dongxiawu 評論0 收藏0

  • 初學(xué)者學(xué)習(xí)JAVASCRIPT很吃力怎么辦？到底該如何學(xué)習(xí)JS？

    摘要：給初學(xué)者的印象總是那么的雜而亂，相信很多初學(xué)者都在找輕松學(xué)習(xí)的途徑。通常學(xué)了很久的基礎(chǔ)之后，變量函數(shù)對象你也都略知一二，但一到公司開發(fā)項(xiàng)目的時(shí)候，卻又難以下手。 Js給初學(xué)者的印象總是那么的雜而亂，相信很多初學(xué)者都在找輕松學(xué)習(xí)Js的途徑。在這里給大家總結(jié)一些學(xué)習(xí)Js的經(jīng)驗(yàn)，希望能給后來的學(xué)習(xí)者探索出一條輕松學(xué)習(xí)Js之路。Js給人那種感覺的原因多半是因?yàn)樗缦碌奶攸c(diǎn)：A：本身知識很抽象、...

    WrBug 評論0 收藏0

發(fā)表評論

0條評論

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