第十七篇 基于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的知识内容,左边列 ...
随机推荐
- Sublime text追踪函数插件
Sublime Text2/3怎样在Ubuntu中配置CTags插件 | 浏览:1278 | 更新:2014-03-05 10:34 1 2 3 4 5 6 7 分步阅读 本文详解在Ubuntu Li ...
- angularjs---服务(service / factory / provider)
初angularJs时 常写一些不够优雅的代码 !我总结了一下看看各位有没有中枪的!-----( 这里只针对服务service及其相关! ) 以下做法不太优雅 兄弟controller 之间的相同 ...
- linux环境下Vim的配置
原文链接:http://blog.chinaunix.net/uid-26826958-id-3272375.html (本文转自此链接中的部分内容,但做了适当修改) 安装vim命令:sudo ap ...
- VS2013 F12无法转到函数的定义处，总是从“元数据”获取的问题 ——解决方法
右键项目名称-->点击菜单中的"添加"-->点击"引用"-->在弹出窗中点击"解决方案"下的"项目", ...
- 升级wamp5集成安装包 php5.2到php5.3
平时xp下面都使用wamp5集成开发 但php的空间命名需要php5.3 才支持,而且公司系统大部分都使用5.3,很多函数与5.2是不同的 难的在xp下面手动安装,集成包使用很方便,配置,快捷键都很不 ...
- mysql数据库锁定机制
前言 为了保证数据的一致完整性,任何一个数据库都存在锁定机制.锁定机制的优劣直接应想到一个数据库系统的并发处理能力和性能,所以锁定机制的实现也就 成为了各种数据库的核心技术之一.本章将对MySQL中两 ...
- 单选按钮（RadioButton）与复选框（CheckBox）的功能与用法
单选按钮(RadioButton)和复选框(CheckBox).状态开关按钮(ToggleButton)与开关(Switch)是用户界面中最普通的UI组件,他们都继承了Button类,因此都可直接使用 ...
- Spring classPath：用法
http://blog.csdn.net/xing_sky/article/details/8228305 参考文章地址: http://hi.baidu.com/huahua035/item/ac8 ...
- mysql表名忽略大小写
安装完数据库,建表查询发现表不存在,原来是表名大小写写错了,原来Linux下的MySQL默认是区分表名大小写的,这样的话对变成灰带来很大的不变,如何才能使mysql表名不区分大小写呢? 通过如下设置, ...
- 从0到1学习node之简易的网络爬虫
本文地址: http://www.xiabingbao.com/node/2017/01/19/node-spider.html 我们这节的目标是学习完本节课程后,能进行网页简单的分析与抓取,对抓取到 ...