第十七篇 基于Bootstarp 仿京东多条件筛选插件的开发(展示下）

前些时候用换了工作，本来是用的前端框架是easyui，后面用的是bootstrap。对于我来说虽然不是新东西，因为原来毕业时候用过一段时间，也不懂什么插件的开发，现在用过easyui后觉得easyui的用法比较好，容易上手，所有一直有个想法，去开发几个插件自己用用。不多说，上篇文章发面一个多选插件的使用方法，虽然有点不是很完善，但还是可以来用用的。这次就详细说说原理和开发的结节，以及要注意的地方。关于jQuery的插件开发根本也不是什么难的事情，下面就说的我的想法。

开发的原理

jQuery的插件开发大体来说共分两种，一种是静态方法的开发，一种是扩展的jQuery对象上面：

1、 静态方法的开发

说来就是在$上面添加方法，如easyui上面的弹出框，$.messger(….);

开发的基本格式为：

(function($, undefine) {

Var opt={};//默认属性值

$.Msger = function() {}

})(jQuery);

使用方法就是：$.Msger(…)

2、扩展对象开发

这个也没有什么难的，不过就是对象不一样的，一个是全局的jQuery对象，一个是选择后dom对象，注意这里上选择后的对象（并不是dom）如easyui上面，如果一个下拉框$(“#ddlmb”).combobox();

开发的基本格式

(function($, undefine) {

$.fn.mSelect = function(option) {

var _default = {};

var opt = $.extend(true, _default, option);

this.each(function(index, value) {});//这个是对选择的d对象进行遍历

})(jQuery);

开发的过程

下面就是看代码的事情的了，下面是我开发的多选插件的源码和API

对就的插件脚本“：

(function(window, undefine) {

    $.fn.mSelect = function(option) {
        var _default = {};

        var opt = $.extend(true, _default, option);

        this.each(function(index, value) {
            var dom = this;
            if (dom) {
                $.each(opt.data, function(idx, vlu) {
                    var strg = $("<strong></strong>").addClass("text-muted").html(vlu.Name + ":");
                    var fcDiv = $("<div></div>").append(strg).appendTo(dom);
                    //                    if (opt.isAll) {
                    //                        var aSelect = $("<span></span>").addClass("w-badge w-badge-info filter w-badge-custom").html("全选").attr({
                    //                            id:"All_"+idx
                    //                        });
                    //                        fcDiv.append(aSelect);
                    //                    }
                    //value代表一个行的数据
                    $.each(vlu.Item, function(ix, vl) {
                        CommonCreatItem(vlu, fcDiv, vl, true, dom); //传入当前的字段和当前的父容器，还有当前的数值
                    });
                    if (vlu.hasMore) {
                        var hSpan = $("<small></small>").addClass("w-badge filter").html("更多>>"); //.append($("<span></span>").addClass("caret"));
                        fcDiv.append(hSpan);
                        fcDiv.append("<br/>"); //强制换行
                        hSpan.click(function() {
                            if (hSpan.next().next().is(":hidden")) {
                                $(hSpan).nextAll().show(100);
                                $(hSpan).html("收起").append($("<span></span>").addClass("caret"));
                            } else {
                                $(hSpan).nextAll().removeClass("w-badge-info");
                                $(hSpan).nextAll().hide(100);
                                $(hSpan).html("更多>>");
                            }

                        });
                        $.each(vlu.hasMore, function(ix, vl) {
                            CommonCreatItem(vlu, fcDiv, vl, false, dom); //传入当前的字段和当前的父容器，还有当前的数值
                        });
                    }
                });
            }
        });

        function CommonCreatItem(vlu, fcDiv, vl, isShow, dom) {
            var dom = dom;
            //vl代表单个的数据
            //var fSpan = $("<span></span>").addClass("text-muted filter");
            var fSpan = $("<span></span>").addClass("w-badge filter w-badge-custom").attr({
                "pField": vlu.Field
            }); //添加默认的样式
            if (!isShow) {
                fSpan.attr({
                    type: "hasMore"
                }).hide();
            }
            if (opt.optionFunc) {
                //text的作为显示，value作为字段
                var ob=opt.optionFunc(vl, vlu);
                fSpan.html(ob.text);
                fSpan.attr({
                    "field":ob.value
                });
            } else {
                //text的作为显示，value作为字段
                fSpan.attr({
                    "field":vl.value
                });
                fSpan.html(vl.text);
            }
            /**
             * 绑定span事件
             */
            fSpan.click(function() {
                //对样式的修改 w-badge-info代表选中的唯一条件
                if (vlu.isMulti) { //是否允许多选？
                    if (fSpan.hasClass("w-badge-info")) {
                        fSpan.removeClass("w-badge-info");
                    } else {
                        fSpan.addClass("w-badge-info");
                    }
                } else {
                    if (fSpan.hasClass("w-badge-info")) {
                        fSpan.removeClass("w-badge-info");
                    } else {
                        fSpan.addClass("w-badge-info").siblings().removeClass("w-badge-info")
                    }

                }
                if (opt.onClick) {
                    var datajson = GetJson($(dom).find(".w-badge-info"));
                    var domList = $(dom).find(".w-badge-info")
                    opt.onClick(fSpan, datajson, domList);
                }
            });
            fSpan.hover(function() {
                if (opt.onHover) {
                    opt.onHover(fSpan)
                };
            });

            fcDiv.append(fSpan);
        }
    }

    function GetJson(cSpans) {
        var djson = {};
        $.each(cSpans, function(ix, vl) {
            var key = $(vl).attr("pfield");
            if (hasKey.call(djson, key) != -1) {
                djson[key].push($(vl).attr("field"));
            } else {
                djson[key] = [];
                djson[key].push($(vl).attr("field"));
            }

        });

        return djson;
    }
})(window);

function hasKey(k) {
    for (var key in this) {
        if (key === k) return 0;
    }
    return -1;
}

对应的样式：

对应的样式代码：

  .w-badge-info {
        background-color: #3a87ad !important;
        color: #fff !important;
    }

    .w-badge {
        display: inline-block;
        min-width: 10px;
        padding: 3px 7px;
        font-size: 12px;
        font-weight:;
        color: #fff;
        line-height:;
        vertical-align: baseline;
        white-space: nowrap;
        text-align: center;
        background-color: #777;
        border-radius: 10px;
    }

    .filter {
        margin: 5px;
    }
        .filter:hover {
            background-color: #999 !important;
            color: #fff;
            cursor: pointer;
        }

    .w-badge-custom {
        /*font-size: 17px;*/
        background-color: #fff ;
        color: #0f0f0f;
    }

自己又做了修改，添加的选项的code和value，具体的使用方法和效果如下:

$(function() {
        $("#msdiv").mSelect({
            data: [{
                Field: "Brand",
                Name: "商标",
                Item: [{value:"len",text:"lenovo"}, {value:"Ace",text:"Acer"},{value:"Sum",text:"Sumsan"}], //列表数据
                hasMore: [{value:"H",text:"HP"}, {value:"shenzhou",text:"神舟"},{value:"DE",text:"DELL"}], //更多的列表数据
                isMulti: true //当前的字段的值是否支持多选
            }, {
                Field: "Price",
                Name: "价格",
                Item: [{value:1,text:"<3000"},{value:2,text:"4000-5000"}, {value:3,text:"5000-7000"}],
                hasMore: [{value:4,value:"7000-8000"},{value:5,text:"8000-12000"}],
                isMulti: false
            }, {
                Field: "Type1",
                Name: "类型1",
                Item: ["filter1", "filer1_1", "filter1_2", "filer1_3"],
                isMulti: true
            }, {
                Field: "Type2",
                Name: "类型2",
                Item: ["filter2", "filer2_1", "filter2_2", "filer2_3"],
                isMulti: false
            }], //数据格式
            //isAll:true,//是否包括全选，废弃不用
            optionFunc: function(value, index) { //修改数据的值，可以自定义HTML.如添加图片
//                if(value=="lenovo")
//                {
//                    return "<img src='https://ss2.bdstatic.com/9rUZbzqaKgQFm2e88IuM_a/resource/fFhO6R-C0CBiZmAS9VsRZIk30WXQhaSC0mTQ9VsRhV0W0VsS0CXQZdRenFvkrUZwBmhMBmsenGv3XURbBWZSBmZaBUkL.jpg'/>";
//                }
                return value;
            },
            onHover: function(target) { //在上面滑动时事件，缺省无效果，参数为当前的节点
                //                console.log(target.text());
            },
            onClick: function(target, filter, domList) {
                //每点击一次的事件，参数为当前节点，当前所有选择的条件，所有选择的DOM，便于后期扩展
                   alert(target.text()+"  "+JSON.stringify(filter));
            }
        });
    });

静态方法开发事例：

这个是基于bootstrap做的提示框，估计项目中也常常用到用法如下：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
        <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.min.js"></script>
        <script type="text/javascript" src="js/Message.js"></script>
    </head>

    <body>
        <button class="btn btn-primary" id="btnAlert">弹出Alert</button>
        <button class="btn btn-primary" id="btnConfirm">弹出Confirm</button>
        <button class="btn btn-primary" id="btnPromp">弹出Promp</button>

</html>
<script>
    $(function() {
        $("#btnAlert").click(function() {
            $.Msger("alert", "提示", "你错了");
        });
        $("#btnConfirm").click(function() {
            $.Msger("confirm", "提示", "你错了", function(e) {
                if (!e) {
                    alert(false);
                }
            });
        });
        $("#btnPromp").click(function() {
            $.Msger("promt", "提示", function(e,s) {

                    alert(e+s);

            });
        });
    });
</script>

源码如下：

(function($, undefine) {
    $.Msger = function() {
        var info = {};
        info.type = arguments[0] || "";
        info.title = arguments[1] || "";
        info.content = arguments[2] || "";
        info.content = arguments[2] || "";
        info.callBack = arguments[3] || "";
        var _msgD = {};
        var a = $("<div></div>").addClass("modal fade"); //model
        var b = $("<div></div>").addClass("modal-dialog modal-sm").appendTo(a); //dialog
        var c = $("<div></div>").addClass("modal-content").appendTo(b); //content
        var dh = $("<div></div>").addClass("modal-header").appendTo(c); //title
        var dc = $("<div></div>").addClass("modal-body").appendTo(c); //content
        var df = $("<div></div>").addClass("modal-footer").appendTo(c); //footter
        $("body").append(a); //添加到body
        _a[info.type].call(info, dh, dc, df, a);
        a.on("hidden.bs.modal", function() {
            a.remove();
        });
    };
    var _a = {
        alert: function() {
            var dh = arguments[0];
            var dc = arguments[1];
            var df = arguments[2];
            var a = arguments[3];
            var info = this;
            if (!info.callBack) {
                dh.html(info.title);
                dc.html(info.content);
                $("<button></button>").addClass("btn btn-primary").attr({
                    "data-dismiss": "modal"
                }).html("确定").appendTo(df).click(function() {
                    a.modal('hide');
                });
            } else {
                ///先这样写 后面还要修改 要添加对类型的显示
                dh.html(info.title);
                dc.html(info.content);
                $("<button></button>").addClass("btn btn-primary").attr({
                    "data-dismiss": "modal"
                }).html("确定").appendTo(df).click(function() {
                    a.modal('hide');
                });
            }
            a.modal({
                width: 500,
                backdrop: 'static'
            });
        },
        confirm: function() {
            var dh = arguments[0];
            var dc = arguments[1];
            var df = arguments[2];
            var a = arguments[3];
            var info = this;
            dh.html(info.title);
            dc.html(info.content);
            if (info.callBack) {

                $("<button></button>").addClass("btn btn-primary").attr({
                    "data-dismiss": "modal"
                }).html("确定").appendTo(df).click(function() {
                    a.modal('hide');
                    info.callBack(true);

                });
                $("<button></button>").addClass("btn btn-default").attr({
                    "data-dismiss": "modal"
                }).html("取消").appendTo(df).click(function() {
                    a.modal('hide');
                    info.callBack(false);
                });
            } else {
                ///先这样写 后面还要修改 要添加对类型的显示
                $("<button></button>").addClass("btn btn-primary").attr({
                    "data-dismiss": "modal"
                }).html("确定").appendTo(df).click(function() {
                    a.modal('hide');
                });
                $("<button></button>").addClass("btn btn-default").attr({
                    "data-dismiss": "modal"
                }).html("取消").appendTo(df).click(function() {
                    a.modal('hide');
                });
            }
            a.modal({
                width: 500,
                backdrop: 'static'
            });

        },
        promt: function() {
            var dh = arguments[0];
            var dc = arguments[1];
            var df = arguments[2];
            var a = arguments[3];
            var info = this;
            dh.append($("<h6></h6>").html(info.title));
            //              if(info.content){
            //                  dc.html(info.content);
            //              }
            var i = $("<input type='text'/>").addClass("form-control");
            dc.append(i)
            info.callBack = info.content;
            if (info.callBack) {
                $("<button></button>").addClass("btn btn-sm btn-primary").attr({
                    "data-dismiss": "modal"
                }).html("确定").appendTo(df).click(function() {
                    a.modal('hide');
                    info.callBack(i.val(), true);

                });
                $("<button></button>").addClass("btn btn-sm btn-default").attr({
                    "data-dismiss": "modal"
                }).html("取消").appendTo(df).click(function() {
                    a.modal('hide');
                    info.callBack(i.val(), false);
                });
            } else {
                ///先这样写 后面还要修改 要添加对类型的显示
                $("<button></button>").addClass("btn btn-sm btn-primary").attr({
                    "data-dismiss": "modal"
                }).html("确定").appendTo(df).click(function() {
                    a.modal('hide');
                });
                $("<button></button>").addClass("btn btn-sm btn-default").attr({
                    "data-dismiss": "modal"
                }).html("取消").appendTo(df).click(function() {
                    a.modal('hide');
                });
            }
            a.modal({
                width: 500,
                backdrop: 'static'
            });

        }
    }

})(jQuery);

有问题请联系我 邮件[e-mail]