第十七篇 基于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);
有问题请联系我 邮件wells_fuwei@163.com
第十七篇 基于Bootstarp 仿京东多条件筛选插件的开发(展示下)的更多相关文章
- 第十六篇 基于Bootstarp 仿京东多条件筛选插件的开发(展示上)
这几天学习Bootstrap,本来是两年前的用的东西,现在又重新拾起来,又有很多重新的认识,看了Bootstrap的样式偏多,插件现在还没有学习到几个,也有写几个插件自己用的想法.正好工作上也会用到, ...
- Jquery特效之=》仿京东多条件筛选特效
仿京东多条件筛选特效 * { margin: 0; padding: 0; list-style-type: none } a, img { border: 0 } body { font: 12px ...
- Tars | 第6篇 基于TarsGo Subset路由规则的Java JDK实现方式(下)
目录 前言 1. 修改.tars协议文件 1.1 Java源码位置及逻辑分析 1.2 Java语言实现方式 1.3 通过协议文件自动生成代码 1.4 变更代码的路径 2. [核心]增添Subset核心 ...
- JQ实现仿淘宝条件筛选
首先看下效果: Js代码: <script type="text/javascript"> $(".search_qxxx > ul > li & ...
- 基于Mvc3,Ef,领域驱动电子商务系统的EShop开发
分享自己从代码小工一步步走向搭架子,ING... 简单了解UnitOfWork 摘要: UnitOfWorkUnit Of Work模式,即工作单元,它是一种数据访问模式.它是用来维护一个由已经被业务 ...
- 跟我学SpringCloud | 第十七篇:服务网关Zuul基于Apollo动态路由
目录 SpringCloud系列教程 | 第十七篇:服务网关Zuul基于Apollo动态路由 Apollo概述 Apollo相比于Spring Cloud Config优势 工程实战 示例代码 Spr ...
- 基于PtrFrameLayout实现自定义仿京东下拉刷新控件
前言 最近基于项目需要,使用PtrFrameLayout框架实现了自定义的下拉刷新控件,大体效果类似于京东APP的下拉刷新动态效果.在这里和大家分享一下具体的思路和需要注意的地方,以便帮助有类似开发和 ...
- React-Native牛刀小试仿京东砍啊砍砍到你手软
React-Native牛刀小试仿京东砍啊砍砍到你手软 React-Native基础教程 *React-Native基础篇作者git *React-Native官方文档 *Demo 几个月前faceb ...
- iOS仿京东分类菜单之UICollectionView内容
在上<iOS仿京东分类菜单实例实现>已经实现了大部分主体的功能,本文是针对右边集合列表进行修改扩展,使它达到分组的效果,本文涉及到的主要是UICollectionView的知识内容,左边列 ...
随机推荐
- OpenCV点滴2
明天回家了-- 昨天去见了老师,去之前告诉自己不要紧张,去了后还是紧张了,语无伦次,很没礼貌--(不敢看老师的眼睛) 刚才妈打电话说让我早点回去,不知道为什么,在空荡荡的宿舍里听到妈的声音,眼泪会夺眶 ...
- Robocopy 轉帖
实例一:文件,想怎么复制就怎么复制 [实现效果] 随时将源文件夹中的纯文本(TXT).Word文档(DOC)还有BMP.TIF图像文件复制到目标文件夹中 ,这是在"资源管理器"中直 ...
- 后端数据库使用 Bomb方案
不再需要阿里云进行部署: http://docs.bmob.cn/ios/faststart/index.html?menukey=fast_start&key=start_ios
- linux 自动备份脚本
首先我在/root/backup 目录下建立一个文件夹, #mkdir /root/backup/mysqlbackup 以后在每天五点钟,就会有一个文件保存在这里. 接着新建文件 #vim /roo ...
- fiddler 路由设置
REGEX:^http://data.51buy.com/biz/oppmsmobile/web/js/app/(.+)/(.+).js E:\svns\new\dev\webapp\data_ics ...
- 启动子&外显子&内含子
启动子 http://baike.baidu.com/link?url=HMqaMY4mXusH--4hMu1p6P_XUzEve9lZhFGtxScnbb8Z9HaLYJ981eWxAuZt2iAP ...
- ThinkPHP创建应用的一般开发流程
使用ThinkPHP创建应用的一般开发流程是: 系统设计.创建数据库和数据表:(可选) 项目命名并创建项目入口文件,开启调试模式: 完成项目配置: 创建项目函数库:(可选) 开发项目需要的扩展(模式. ...
- jQuery 的 ready 函数是如何工作的?(源码分析)
如果你使用过 jQuery , 就必然使用过 ready 函数,它用来注册当页面准备好之后可以执行的函数. 问题来啦,我们的页面什么时候准备好了呢? 1. onload 事件 最基本的处理方式就是页面 ...
- 选择移动web开发框架研究——有mui、frozenui以及Sencha Touch等
纯粹的总结一下移动web开发框架,移动 web开发框架有jQuery Mobile .Sencha Touch等等,他们都来源于web开发,是成熟的框架,jQuery Mobile出自于jQuery家 ...
- JWPlayer支持SD/HD
First, we have to render two versions of our video: an SD (standard definition) and HD (high definit ...