实例介绍
【实例简介】
【实例截图】
【核心代码】
本插件基于JQuery插件标准开发，可以用来学习，项目中也可以用
;(function($){//;表示将前面的作为一个语句
$.fn.multselect=function(options){//插件名称
var defaults={
url:"",//ajax请求数据 数据格式[{"id":"1","name":"张三"},{"id":"123","name":"李四"}]
width:"330px",//div宽 必须是像素值
disabled:false,//插件禁用
panelHeight:"150px",//下拉画布高 auto
onSelect:function(el){//选中回调函数
},
onEcho:[]//做回显 data格式[1,2,3,4,5] select中的value
}
var options=$.extend(defaults,options);
return this.each(function(){
var uid="ui" new Date().getTime();//控件ID
var body=$("body"),jqObj;
var _this=$(this);
var position=_this.offset();
var originObj={//获取select内容
name:_this.attr("name"),//name属性
//通过单选加载本地数据
getOptions:function(){//获取options 值 value
var obj=[];//获取value ，值
_this.find("option").each(function(){
var value=this.value;
var html=this.innerHTML;
var o={};
o[value]=html;
obj.push(o);
})
return obj;
}
};
var box_html="<div id='" uid "' class='multselect'><i class='icon-right'></i><div class='kid kid-t'><ul></ul></div></div>",
content_html="<span></span>",
submit_input="<input name='' style='display:none;' value=''></input>";
var multselect={
//初始化option
_initial:function(){
if (options.url!=""){//加载远程数据
$.ajax({
url:options.url,
dataType:"json",
async:false,
success:function(data){
if($.isArray(data)){
var h;
for(var i=0,j=data.length;i<j;i ){
h ='<option value="' data[i].id '">' data[i].name '</option>';
}
_this.append(h);
multselect.initHtml();
}else{
console.debug("数据格式错误");
}
}
});
}else if(_this.find("option").length>0){//加载本地数据
multselect.initHtml();
}
},
initHtml:function(){//页面初始化控价
_this.css({opacity:0});//select隐藏
_this.after(box_html);
jqObj=$("#" uid);
this.changeCSS(jqObj);
/*获取ul中的li的集合*/
var optionshtml="";
var arr=[];//存储select中的value值
var _origin=originObj.getOptions();
for(var i=0;i<_origin.length;i ){
var $key,$value;
for(var key in _origin[i]){
$key=key;
$value=_origin[i][key];
}
arr.push($key);
optionshtml ='<li data-id="' $key '">' $value '</li>';
}
jqObj=multselect.setKidDiv_Zindex(jqObj);
/*加载span input*/
jqObj.append(content_html).append(submit_input);;
jqObj.find(".kid ul").append(optionshtml);//加载li集合
//回显
var data=options.onEcho;
if(data&&$.isArray(data)){
var text="";
for(var i=0;i<data.length;i ){
if($.inArray(data[i],arr)=="-1"){//判断select value集合有无
break;
}
var $li=jqObj.find("li[data-id='" data[i] "']");
$li.addClass("select");
text =text==""?$li.html():"," $li.html();
}
jqObj.find("span").html(text);
jqObj.find("input").val(data.join());
}
this.setEvents();//初始化事件集
if(options.disabled==true){//禁用
jqObj.unbind("click");
jqObj.addClass("disabled");
}
},
setEvents:function(){
var event=this;
//鼠标单击加载active样式
jqObj.delegate("li","click",function(){
var text=$(this).get(0).innerHTML;
var id=$(this).data("id");
if($(this).is(".select")){
event.removeContentOptions($(this),id);
}else{
event.addContentOptions($(this),text,id);
}
return false;
});
//单击展开下拉
jqObj.bind("click",function(){
var kidBox=$(this).find(".kid");
if(kidBox.is(":hidden")){
kidBox.show();
$(this).addClass("mult-b");
$(this).find("i").removeClass().addClass("icon-bottom");
}else{
kidBox.hide();
$(this).removeClass("mult-b");
$(this).find("i").removeClass().addClass("icon-right");
}
}),
//鼠标移入移出
jqObj.delegate("li","mouseover",function(){
$(this).addClass("active");
}),
jqObj.delegate("li","mouseleave",function(){
$(this).removeClass("active");
}),
//点击控件外进行收起控件
$(document).click(function(event){
body.find(".kid").hide();
jqObj.removeClass("mult-b");
jqObj.find("i").removeClass().addClass("icon-right");
});
jqObj.click(function(event){
event.stopPropagation();
});
},
//修改样式
changeCSS:function(obj){
jqObj.css({
"position":"absolute",
"width":options.width,
"top":position.top "px",
"left":position.left "px",
"z-index":0});
jqObj.find(".kid").css({
"display":"none",
"overflow-y":"auto",
"width":options.width,
"height":options.panelHeight
});
},
//删除li 以及 span中内容
removeContentOptions:function(obj,id){
obj.removeClass("select");
jqObj.find("span").html(multselect.getContent());
//设置input中value
var val="";
jqObj.find("li[class='select']").each(function(index,el){
var _id=$(el).data("id");
val =val==""?_id:"," _id;
})
jqObj.find("input").val(val);
},
//添加li 以及 span中内容
addContentOptions:function(obj,text,id){
obj.addClass("select");
jqObj.find("span").html(multselect.getContent());
//设置input中value
var val="";
jqObj.find("li[class='select']").each(function(index,el){//选中第一个 input值没有？？？
var _id=$(el).data("id");
val =val==""?_id:"," _id;
})
jqObj.find("input").val(val);
_this.find("option[value='" id "']").attr("selected","selected");
//回调函数
options.onSelect(_this);
},
//刷新页面显示内容
getContent:function(){
var content="";
jqObj.find("li").each(function(){
if ($(this).hasClass("select")) {
content =content==""?$(this).html():"," $(this).html();
}
});
return content;
},
//解决两个下拉框重叠显示问题
setKidDiv_Zindex:function(jqObj){
var length=body.find(".multselect").length;
if(typeof length=='number'){
jqObj.css("z-index",$(document).height()-position.top);//通过高度加载 越高 值越大
}
return jqObj;
}
};
multselect._initial();
})
}
})(jQuery);
【核心代码】
好例子网口号：伸出你的我的手 — 分享！
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论