第十七篇 基于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的知识内容,左边列 ...
随机推荐
- bzoj 2286 [Sdoi2011]消耗战 虚树+dp
题目大意:多次给出关键点,求切断边使所有关键点与1断开的最小费用 分析:每次造出虚树,dp[i]表示将i和i子树与父亲断开费用 对于父亲x,儿子y ①y为关键点:\(dp[x]\)+=\(dismn( ...
- 【单调栈】hdu1506 Largest Rectangle in a Histogram
单调栈的介绍及一些基本性质 http://blog.csdn.net/liujian20150808/article/details/50752861 依次把矩形塞进单调栈,保持其单增,矩形中的元素是 ...
- Bonferroni校正法
Bonferroni校正:如果在同一数据集上同时检验n个独立的假设,那么用于每一假设的统计显著水平,应为仅检验一个假设时的显著水平的1/n http://baike.baidu.com/view/12 ...
- MySQL只恢复某个库或某张表
在Mysqldump官方工具中,如何只恢复某个库呢? 全库备份 [root@HE1 ~]#mysqldump -uroot -p --single-transaction -A --master-da ...
- java二维码生成-谷歌（Google.zxing）开源二维码生成学习及实例
java二维码生成-谷歌(Google.zxing)开源二维码生成的实例及介绍 我们使用比特矩阵(位矩阵)的QR码编码在缓冲图片上画出二维码 实例有以下一个传入参数 OutputStream ou ...
- 关于JAVA IO流的学习
初学Java,一直搞不懂java里面的io关系,在网上找了很多大多都是给个结构图草草描述也看的不是很懂.而且没有结合到java7 的最新技术,所以自己来整理一下,有错的话请指正,也希望大家提出宝贵意见 ...
- java算法 蓝桥杯 扶老奶奶街
一共有5个红领巾,编号分别为A.B.C.D.E,老奶奶被他们其中一个扶过了马路. 五个红领巾各自说话: A :我和E都没有扶老奶奶 B :老奶奶是被C和E其中一个扶过大街的 C :老奶奶是被我和D其中 ...
- 修改/home内子目录的名字
每次装Linux系统我都会直接安装英文版,虽然中文版方便使用,但是在终端里面会有诸多不便,例如/home目录里面那些子文件夹就是一个很大的麻烦了,不过如果你安装了中文版的系统,还是有办法改成英文的. ...
- window下redis的安装
1.使用phpinfo()函数查看PHP的版本信息,这会决定扩展文件版本2.根据PHP版本号,编译器版本号和CPU架构,选择php_redis-2.2.5-5.5-ts-vc11-x86.zip和ph ...
- [html5] 学习笔记-服务器推送事件
1.HTML5服务器推送事件介绍 服务器推送事件(Server-sent Events)是Html5规范的一个组成部分,可以用来从服务端实时推送数据到浏览器端. 传统的服务器推送技术----WebSo ...