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

NoraXie 发布于2019-08-20 12:29 / 722人阅读

摘要：项目此项目是替换标准含有属性的标签的一套交互友好的组件。类型默认值禁用状态选项的。类型默认值为时已选区域的选项根据选中顺序排序。方法初始化多选插件。选项选项选项取消选中匹配值的一项或多项。取消选中所有选项。

项目

此项目是替换标准 JavaScript

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

选项 afterInit

类型:function
默认值：function(container){}
初始化multiSelect后执行的方法。

afterSelect

类型:function
默认值：function(values){}
选中选项后执行的方法。

afterDeselect

类型:function
默认值：function(values){}
取消选中后执行的方法。

selectableHeader

类型：HTML/Text
默认值：null
自定义可选区域header。

selectableFooter

类型：HTML/Text
默认值：null
自定义可选区域footer。

selectionHeader

类型：HTML/Text
默认值：null
自定义已选区域header。

selectionFooter

类型：HTML/Text
默认值：null
自定义已选区域footer。

disabledClass

类型：String
默认值："disabled"
禁用状态选项的css class。

selectableOptgroup

类型：Boolean
默认值：false
为true时点击optgroup时等同于选中所有子选项。

keepOrder

类型：Boolean
默认值：false
为true时已选区域的选项根据选中顺序排序。

dblClick

类型：Boolean
默认值：false
为true时双击才会选中选项。

cssClass

类型：String
默认值：""
在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")

刷新当前multi-select。

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

.multiSelect("addOption", Hash)

以键值对形式动态添加选项到multi-select。

key        类型        是否必填        描述
value      String      true           需添加的选项值
text       String      true           需添加的选项内容    
index      Number      false          选项插入到从0开始的第几个位置，默认追加在选项的末尾
nested     String      false          如果存在optgroup，选项可以插入到某一optgroup下

$("#my-select").multiSelect("addOption", { value: "test", text: "test", index: 0, nested: "optgroup_label" });

键盘操作

key            作用
[ ↓ ]下        选择下一个选项
[ ↑ ]上        选择上一个选项
[ — ]空格      选中当前选择的选项
[ ← ]左        切换到上一区域
[ → ]右        切换到下一区域

Demo HTML


    
        
            选择联系人

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;
});

// 搜索框实时查询
$("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();
        }
    });
});

效果预览

更多demo详见参考文档：http://loudev.com/

服务器托管专线服务 jquery插件 jquery插件源码jquery 手写jQuery插件 jquery表单插件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81010.html

基于 Spring Boot 和 Shiro 的权限管理系统，界面风格为 Material Desi

摘要：系统简介是一个简单高效的后台权限管理系统。开发时直接使用的入口类启动即可，访问地址。部署时建议打包成包，访问地址端口号。本软件使用协议，请严格遵照协议内容。系统简介 FEBS是一个简单高效的后台权限管理系统。项目基础框架采用全新的Java Web开发框架 —— Spring Boot，消除了繁杂的XML配置，使得二次开发更为简单；数据访问层采用Mybatis，同时引入了通用Mappe...

klinson 2019-08-19 10:42 评论0 收藏0
HHuploadify 变化多端的图片上传组件

摘要：上传成功之后，用端返回的字段中的作为新的预览图片。通过的配置，采用不同的上传进度展示效果。利用选项，进行简单扩展之后，就可以实现一组固定的上传。通过钩子函数，对上传的最大张数进行控制。上面图片演示中，最多只能上传张图片。你可以在这里读到我第一次发布HHuploadify的内容，那个时候HHuploadify只是作为一个jquery插件发布，但是现在不同了我希望把它独立出来，不依赖jq...

bawn 2019-08-20 19:03 评论0 收藏0
HHuploadify 变化多端的图片上传组件

摘要：上传成功之后，用端返回的字段中的作为新的预览图片。通过的配置，采用不同的上传进度展示效果。利用选项，进行简单扩展之后，就可以实现一组固定的上传。通过钩子函数，对上传的最大张数进行控制。上面图片演示中，最多只能上传张图片。你可以在这里读到我第一次发布HHuploadify的内容，那个时候HHuploadify只是作为一个jquery插件发布，但是现在不同了我希望把它独立出来，不依赖jq...

GitChat 2019-08-05 11:58 评论0 收藏0
树插件的使用说明

摘要：源代码提取码文件树提取码功能支持展开收起功能可删除树节点可移动树节点根据树节点的数据来源可以是一个数组，也可以是一个地址调用方法存在一个树的容器引入在里面引入文件在的底部引入文件调用数据接口选择的类型单选还是多选还是菜单默认为菜单选择的类型源代码： url: http://yunpan.cn/cwkgzpzSBDXEu （提取码：e3af）文件树：http://yunpan.c...

dongxiawu 2019-08-21 10:32 评论0 收藏0
初学者学习JAVASCRIPT很吃力怎么办？到底该如何学习JS？

摘要：给初学者的印象总是那么的杂而乱，相信很多初学者都在找轻松学习的途径。通常学了很久的基础之后，变量函数对象你也都略知一二，但一到公司开发项目的时候，却又难以下手。 Js给初学者的印象总是那么的杂而乱，相信很多初学者都在找轻松学习Js的途径。在这里给大家总结一些学习Js的经验，希望能给后来的学习者探索出一条轻松学习Js之路。Js给人那种感觉的原因多半是因为它如下的特点：A：本身知识很抽象、...

WrBug 2019-08-23 17:57 评论0 收藏0