自從上次做了JQ自定義分頁插件和表格插件后，就沒在自定義過插件了，這一個月都在用linq和ef,基本前端都沒怎么去碰了，今天有個同事說有個項目需要在下拉框里面帶有復選框，本來想網上找下插件的，一想，其實這功能也并不難，于是就自己做了一個，也趁機再次熟悉下JQ自定義插件吧，好了，先附上效果圖先：
(function($){
var option={
isEdit:false, //是否可以編輯:默認是否
Listheight:200, //下拉框高度
ListWidth:0, //下拉框長度
//數據源
data:[
{"value":1,"text":"選擇1"},
{"value":2,"text":"選擇2"},
{"value":3,"text":"選擇3"},
{"value":4,"text":"選擇4"}
]
}
//開始創建下拉框
function Start(obj)
{
if(!option.isEdit)
{
obj.attr({"readonly":"readonly"});
}
var myList=$("<div></div>");
var ul=$("<ul></ul>");
ul.css({"list-style":"none","margin":"0px","padding":"2px"});
myList.css({"border":"1px solid #D9E5F3","position":"absolute","overflow-y":"scroll","background-color":"#fff","font-size":"12px"});
if(option.Listheight<=0)
{
option.Listheight=200;
}
myList.height(option.Listheight);
if(option.ListWidth<=0)
{
option.ListWidth=obj.width()
}
myList.width(option.ListWidth);
//默認位置是在創建元素的下方
myList.offset({"top":obj.offset().top+obj.outerHeight(),"left":obj.offset().left});
var data=option.data;
if(data.length>0)
{
for(i=0;i<data.length;i++)
{
var li=$("<li/>");
var ListSon=$("<input type='checkbox' />");
ListSon.change(function(){
if(this.checked)
{
obj.val(obj.val()+$(this).val());
}
else
{
obj.val(obj.val().replace($(this).val(),""));
}
})
myList.mouseover(function(){
myList.show();
})
myList.mouseout(function(){
myList.hide();
})
var span=$("<span></span>");
span.text(data[i].text);
ListSon.val(data[i].value+";");
li.append(ListSon);
li.append(span);
ul.append(li);
}
}
myList.append(ul);
myList.appendTo("body");
myList.hide();
FoucsShow($(obj),myList);
}
// 當獲取到焦點使出現該下拉框
function FoucsShow(obj,myList)
{
obj.focus(function(){myList.show()})
}
$.fn.createList=function(newoption)
{
$.extend(option,newoption);
Start($(this));
}
})(jQuery);
