自從上次做了JQ自訂分頁插件和表格插件後，就沒在自訂過插件了，這一個月都在用linq和ef,基本前端都沒怎麼去碰了，今天有個同事說有個項目需要在下拉框裡面有複選框，本來想上網找下插件的，一想，其實這功能也不難，於是就自己做了一個，也趁機再次熟悉下JQ自訂插件吧，好了，先附上效果圖先：
看起來沒怎麼難吧，其實就是強化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=$("
");
var ul=$("
");
padding":"2px"});
myList.css({"border":"1pxsolid #D9E5F3","position":"absolute","overflow-y":"scroll"" "#fff","font-size":"12px"});
if(option.Listheight option.Listheight=200;
}
myList .height(option.Listheight);
()
}
時的清單寬度 (選購寬度。 ListWidth);
// 預設位置在建立元素的下方
myList.offset({"topf:obj.左});
vardata=option.data;
for(i=0;i
{
var li=$(""); ListSon.change(function () {
作用中if(this.checked)
obj.val(obj.val() $(this).val());
其他
{
> })
myList.show();
})
myList.hide();
)
var span=$("");
ListSon.val(data[i].value "; ");
li.append(ListSon);
);
}
}
;
myList.appendTo("body");
sShow($(obj),myList);
}
// 當所擷取到焦點讓出現此下拉方塊
function FoucsShow(obj,myList)
)
}
$.fn.createList =function(newoption)
{
. >
}
})(jQuery);
前台呼叫：
複製程式碼
程式碼如下:
{"value":"Java","text":"Java"},
> {"value":"C","text":"C"},
{"value":C ","text": ","text":"javascript"},
{"value":"ajax","text":"ajax"},
"},
{"value":"xml","text":"xml"},
, { {"value":"xml","text":"Mysql"},
{"value":"oracle","text":"oracle"}, {"value":"Ext js","text":"Ext js"},
CSS3"},
{"value":"HTML5","text":"HTML5"}
$("#d3").createList();
})
