第十七篇 基于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的知识内容,左边列 ...
随机推荐
- 一分钟完成MySQL5.7安装部署
原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://suifu.blog.51cto.com/9167728/1855415 Part ...
- 负载均衡探测器lbd
负载均衡探测器lbd 大型网站为了解决海量访问问题,往往采用负载均衡技术,将用户的访问分配到不同的服务器上.网站的负载均衡可以从DNS和HTTP两个环节进行实施.在进行Web渗透测试的时候,需要先 ...
- 关于IE6、IE7、IE8实现盒子阴影shadow的几个注意点
通常,我们实现盒阴影都是通过这段代码来实现的 -moz-box-shadow: 3px 3px 4px #000; -webkit-box-shadow: 3px 3px 4px #000; box- ...
- 3. 托管对象模型的迁移（Core Data 应用程序实践指南）
本章介绍如何添加模型版本及模型映射,演示几种迁移技术,供在升级模型时使用. 3.1. 修改托管对象模型 3.2. 添加模型版本 3.3. 轻量级迁移方式 3.4. 默认的迁移方式 3.5. 通过迁移管 ...
- Spring学习笔记IOC与AOP实例
Spring框架核心由两部分组成: 第一部分是反向控制(IOC),也叫依赖注入(DI); 控制反转(依赖注入)的主要内容是指:只描述程序中对象的被创建方式但不显示的创建对象.在以XML语言描述的配置文 ...
- CentOS 7 安装 JDK
1. 卸载旧版 1.1. 查看版本信息 java -version 1.2. 查看JDK信息 rpm -qa | grep java 1.3. 卸载 rpm -e --nodeps tzdata-ja ...
- HTML 样式- CSS
如何使用CSS CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的. CSS 可以通过以下方式添加到HTML中: 内联样式- 在HTML元素中使用"style&qu ...
- 选择法排序 vb.net
Imports System.ThreadingModule Module1 Sub Main() 'test code 'Dim a, b As Integer ...
- 一个案例深入Python中的__new__和__init__
准备 在Python中,一切皆对象. 既然一切皆对象,那么类也是对象,我们暂且称之为 类对象.来个简单例子(本篇文章的所有案例都是运行在Python3.4中): class foo(): pass p ...
- Visual Studio项目模板与向导开发
在[Xamarin+Prism开发详解系列]里面经常使用到[Prism unity app]的模板创建Prism.Forms项目: 备注:由于Unity社区已经不怎么活跃,下一个版本将会有Autofa ...