第17篇 基于Bootstarp 仿京东多条件筛选插件的开发(展示下）
来源：互联网 发布：算法时代 下载 编辑：程序博客网 时间：2024/05/17 01:37
前些时候用换了工作，本来是用的前端框架是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);
有问题请联系我 邮件wells_fuwei@163.com
0 0
- 第17篇 基于Bootstarp 仿京东多条件筛选插件的开发(展示下）
- 第16篇 基于Bootstarp 仿京东多条件筛选插件的开发(展示上）
- 基于slimscroll与bootstarp插件实现非常好用应用系统表格展示
- 基于bootstarp的分页插件jquery.twbsPaginationwbst的使用
- 一个搜索和展示热词和历史内容等筛选条件的类
- 基于jQuery的zTree树插件实现筛选
- 功能展示——顶部筛选框条件选择
- MicroCoder flashSlider——基于Jquery的图片展示插件
- [MEF]第05篇 MEF的目录（Catalog）筛选
- 基于霍夫变换条件筛选的车道线识别-Opencv实现
- 基于JSON+JQuery实现的多条件筛选功能(类似京东和淘宝功能)
- 一款类似网易新闻的条件筛选器（swift）
- 基于WMS9SDK的插件开发
- Android基于插件的开发
- 条件筛选
- 移动开发中用到的几款js插件之滑动展示（1）
- AngularJs+BootStarp+fontAwesome打造个人展示页面
- 基于VisualStudio11开发Windows8的Direct2D-Metro应用程序范例（2） 国际化文字展示
- android开发笔记：listview
- 类指针的定义问题
- python之最简http文件列表显示服务
- 简单工厂模式,抽象工厂模式,反射工厂模式的代码总结
- CBitmapButton为按钮加载图片注意事项
- 第17篇 基于Bootstarp 仿京东多条件筛选插件的开发(展示下）
- 队列实现栈
- UI基础__控件布局的几种方法总结
- 一起talk C栗子吧（第六十三回：C语言实例--字符串查找）
- LeetCode---String to Integer (atoi)
- android sqlite cursor 没有返回数据，资源占用问题
- Android之退出应用关闭项目每个Activity的总结
- 佛祖保佑，永不宕机/永无bug
- Content Compression Resistance和Content Hugging
