Since the last time JQ custom paging plug-ins and form plug-ins, it has not been customized plug-ins, these one months are in the use of LINQ and EF, the basic front-end are not how to touch, today, a colleague said that there is a project needs to be in the dropdown box with a check box, would like to find the Internet plug-in, a think, in fact, this function is not difficult, So I did one, also took the opportunity to be familiar with the next JQ Custom plug-in bar, OK, first attach the effect chart first:
Looks not how difficult, in fact, is to strengthen the JQ, lest too long useless, unfamiliar. All right. Attach My Code:
Copy Code code as follows:
(function ($) {
var option={
Isedit:false,//Can be edited: default
listheight:200,//drop down frame height
listwidth:0,//drop down box length
Data source
data:[
{"Value": 1, "Text": "Select 1"},
{"Value": 2, "Text": "Select 2"},
{"Value": 3, "text": "SELECT 3"},
{"Value": 4, "Text": "Select 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 location is below the creation 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);
}
When you get to the focus, the dropdown box appears
function Foucsshow (obj,mylist)
{
Obj.focus (function () {mylist.show ()})
}
$.fn.createlist=function (newoption)
{
$.extend (option,newoption);
Start ($ (this));
}
}) (JQuery);
Front Call:
Copy Code code as follows:
$ ("#d2"). CreateList ({
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 ();
})
