Benutzerdefinierte JQuery-Dropdown-Liste example_form Effekte

Seit ich das letzte Mal das benutzerdefinierte Paging-Plug-In und das Tabellen-Plug-In erstellt habe, habe ich das Plug-In diesen Monat nicht mehr angepasst und die Grundlagen nicht berührt Heute sagte ein Kollege, dass es ein Projekt gäbe, für das ein Kontrollkästchen im Dropdown-Feld erforderlich sei, aber nachdem ich darüber nachgedacht hatte, war diese Funktion nicht schwierig. Also habe ich selbst eines erstellt und die Gelegenheit genutzt, mich noch einmal mit dem benutzerdefinierten JQ-Plug-in vertraut zu machen. Okay, okay, hängen wir zuerst die Renderings an:

Es sieht nicht so schwierig aus, aber es geht tatsächlich darum, Ihren JQ zu stärken, damit er nicht einrostet, wenn er zu lange nicht verwendet wird. In Ordnung. Im Anhang ist mein Code:

Code kopieren Der Code lautet wie folgt:

(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=$("

");
           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          {
             var li=$("

");
              var ListSon=$("");
             ListSon.change(function(){
                   if(this.checked)   
                   {
             . 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.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 Fokussieren, sodass das Dropdown-Feld angezeigt wird
function FoucsShow(obj,myList)
.fn.createList=function(newoption)
                                                                            })(jQuery); >
Vordergrundaufruf:





Code kopieren

Der Code lautet wie folgt:

$("#d2").createList ({

//Datenquelle

Daten:[ {"value": "C#", "text": "C#"}, {"value": ".NET", text": ".NET"}, {"value": "Java", "text": "Java"}, {"value": "JSP", "text": "JSP"} ,            {"value": "C", "text": "C"},                                                                                                                                                                       ","text":"javascript"},

                                                                                                                                                      "},

                                                                                                                                            {"value": "xml", "text": "mysql"},
, "text": "jQuery"},
css3 "},
🎜>})