Jquery custom drop down list example
- 2020-03-30 02:45:51
- OfStack
Since the last made JQ custom paging and form the plugin, is never in a custom plug-in, this month are using linq and ef, basic front didn't how to touch, a colleague said today there is a project need to be in the drop-down box with a check box, wanted to find the online plug-in, a thought, in fact this function also is not difficult, so he do it himself a and also the chance to once again under the familiar JQ custom plug-in, good, the first enclosed rendering first:
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201404/20140425113146.jpg? 2014325113340 ">
It doesn't look too hard, but it's just to strengthen JQ, so it won't be useless for too long. Ok. Attached is my code:
(function($){
var option={
isEdit:false, //Whether to edit: default whether
Listheight:200, //Drop-down box height
ListWidth:0, //Drop-down box length
//The data source
data:[
{"value":1,"text":" choose 1"},
{"value":2,"text":" choose 2"},
{"value":3,"text":" choose 3"},
{"value":4,"text":" choose 4"}
]
}
//Start creating a drop-down box
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);
//The default position is below the created element
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);
}
//Causes the drop-down box to appear when getting focus
function FoucsShow(obj,myList)
{
obj.focus(function(){myList.show()})
}
$.fn.createList=function(newoption)
{
$.extend(option,newoption);
Start($(this));
}
})(jQuery);
Foreground call:
$("#d2").createList({
//The data source
data:[
{"value":"C#","text":"C#"},
{"value":".NET","text":".NET"},
{"value":"Java","text":"Java"},
{"value":"JSP","text":"JSP"},
{"value":"C","text":"C"},
{"value":"C++","text":"C++"},
{"value":"javascript","text":"javascript"},
{"value":"ajax","text":"ajax"},
{"value":"json","text":"json"},
{"value":"xml","text":"xml"},
{"value":"sql server","text":"sql server"},
{"value":"xml","text":"Mysql"},
{"value":"oracle","text":"oracle"},
{"value":"JQuery","text":"JQuery"},
{"value":"Ext js","text":"Ext js"},
{"value":"CSS3","text":"CSS3"},
{"value":"HTML5","text":"HTML5"}
]
});
$("#d3").createList();
})