受欢迎的博客标签

基于Bootstarp 仿京东多条件筛选插件的开发

Published
一个京东上筛选商品的插件,不多说上图。       首先看下API        这次只是用来说明下功能 下篇开始说具体的思路,其实也不难自己可以学习下,Demo奉上,但是js代码加密,有想学习都请邮件联系我:[email protected]    前些时候用换了工作,本来是用的前端框架是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: 700; color: #fff; line-height: 1; 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);   原文:http://www.cnblogs.com/OceanHeaven/p/4840798.html   有问题请联系我 邮件[email protected] Demo:http://pan.baidu.com/s/1i3q6oYT    .