第十七篇 基于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的知识内容,左边列 ...
随机推荐
- 学习笔记::LCT
今天听见茹大神20分钟讲完了LCT,10分钟讲完平衡树,5分钟讲完树剖,感觉自己智商还不及他一半... 还有很多不懂:2017/1/15 的理解: access是干什么用的? 不知道,只知道他是用来把 ...
- Win10系统安装Tomcat8
1.JDK 1.8 安装 1.1.在网站上http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151. ...
- Linux系统迁移
文章来源http://blog.csdn.net/gt945/article/details/12253585 sudo rsync -aAXvP --exclude-from=exclude.txt ...
- Delphi隐藏进程
interface function MyHideProcess: Boolean; implementation uses Windows, Classes, AclAPI, accCtrl; ty ...
- DNS没有生效的几个原因
1.记录没有正确添加 请确认你的域名记录是否完全正确的添加.线路类型正确,记录类型正确 2.域名还没有生效 这个情况还会有另外一个现象,就是域名有时候可以ping,有时候不能ping. 这是因为你当地 ...
- 深入React事件系统(React点击空白部分隐藏弹出层；React阻止事件冒泡失效)
只关注括号内问题的同学,可直接跳转到蓝字部分.(标题起的有点大,其实只讨论一个问题) 两个在React组件上绑定的事件,产生冲突后,使用e.stopPropagation(),阻止冒泡,即可防止事件冲 ...
- 【Zookeeper】源码分析之Watcher机制（三）之Zookeeper
一.前言 前面已经分析了Watcher机制中的大多数类,本篇对于ZKWatchManager的外部类Zookeeper进行分析. 二.Zookeeper源码分析 2.1 类的内部类 Zookeeper ...
- Google中Gson的使用解析json数据-------学习篇
之前写过一篇Gson解析json数据的基本应用,这里不多说,直接上例子. 有兴趣的可以先阅读下之前那篇,这里附上链接: http://www.cnblogs.com/Ant-soldier/p/632 ...
- POJ2187(旋转卡壳)
Beauty Contest Time Limit: 3000MS Memory Limit: 65536K Total Submissions: 35459 Accepted: 10978 ...
- Spring AOP中的动态代理
0 前言 1 动态代理 1.1 JDK动态代理 1.2 CGLIB动态代理 1.2.1 CGLIB的代理用法 1.2.2 CGLIB的过滤功能 2 Spring AOP中的动态代理机制 2.1 ...