成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

NoraXie / 1049人閱讀

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

項目

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

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

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

afterSelect

類型:function
默認(rèn)值：function(values){}
選中選項后執(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)選項的css class。

selectableOptgroup

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

keepOrder

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

dblClick

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

cssClass

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

方法 .multiSelect(options)

初始化multi-select多選插件。

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

選中匹配值的一項或多項。

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

取消選中匹配值的一項或多項。

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

選中所有選項。

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

取消選中所有選項。

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

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

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

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

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

$("#my-select").multiSelect("addOption", { value: "test", text: "test", index: 0, nested: "optgroup_label" });
鍵盤操作 
key            作用
[ ↓ ]下        選擇下一個選項
[ ↑ ]上        選擇上一個選項
[ — ]空格      選中當(dā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查詢
$("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://m.hztianpu.com/yun/81010.html

相關(guān)文章

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

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

    klinson 評論0 收藏0

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

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

    bawn 評論0 收藏0

  • 樹插件的使用說明

    摘要：源代碼提取碼文件樹提取碼功能支持展開收起功能可刪除樹節(jié)點可移動樹節(jié)點根據(jù)樹節(jié)點的數(shù)據(jù)來源可以是一個數(shù)組，也可以是一個地址調(diào)用方法存在一個樹的容器引入在里面引入文件在的底部引入文件調(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ā)項目的時候，卻又難以下手。 Js給初學(xué)者的印象總是那么的雜而亂，相信很多初學(xué)者都在找輕松學(xué)習(xí)Js的途徑。在這里給大家總結(jié)一些學(xué)習(xí)Js的經(jīng)驗，希望能給后來的學(xué)習(xí)者探索出一條輕松學(xué)習(xí)Js之路。Js給人那種感覺的原因多半是因為它如下的特點：A：本身知識很抽象、...

    WrBug 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<