第十七篇 基于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的知识内容,左边列 ...
随机推荐
- mysql配置主从数据库
1.目的 1.1 实现数据备份 1.2 项目访问时可以实现读写分离,提高访问和操作数据的速度<读写分离好处> 2.背景 这次的主从配置主要实现主库数据的改变可以实现同步到从库中: 此次试验 ...
- 在ubtuntu中使用包管理器 linux-brew
用惯了mac的程序员回到linux开发平台总觉得有点不适应,这是因为linux的界面没有mac那么精美,而且linux的包管理器没有mac上面的homebrew那么强大.mac程序员遇到库的依赖问题时 ...
- 2.10. 代码片段：demo方法（Core Data 应用程序实践指南）
该代码段我觉得没有太多东西 - (void)applicationDidBecomeActive:(UIApplication *)application { [self cdh]; [self de ...
- Java元注解
元注解是指注解的注解,包括@Retention @Target @Document @Inherited四种. 1.@Retention: 定义注解的保留策略@Retention(RetentionP ...
- Delphi 常用函数记录
//判断是否是数字 function IsNumeric(sDestStr: string): Boolean; //简写多余汉字 function SimplifyWord(sWord: strin ...
- CSS中设置margin:0 auto; 水平居中无效的原因分析
很多初学制作网页的朋友,可能会遇到的一个常见问题,就是在CSS中加了margin:0 auto;却没有效果,不能居中的问题,margin:0 auto;的意思就是:上下边界为0,左右根据宽度自适应,其 ...
- mfix模拟流化床燃烧帮助收敛的方法
1.在反应速率里用rate_limit函数:2.初始床料中可以添加一部分碳和灰.下面给出详细解释: 1.c3m生成的化学反应速率中有一个这样的函数: double precision function ...
- MySQL 替换部分电话号码为000
要做敏感信息剔除,要求又不能全换成同一个号码影响测试,想了几个方法,最终采用替换部分电话号码为000来做到敏感信息覆盖. mysql>update phone setb=replace(b,su ...
- Javascript 继承 图形化展示
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" conte ...
- WinForm DataGridView增删改查
DataGridView连接数据库对表进行增删改查 一.绑定数据源 //做一个变量控制页面刷新 ; public Form1() { InitializeComponent(); } private ...