jquery liste déroulante personnalisée effets example_form

Depuis la dernière fois que j'ai créé le plug-in de pagination et de table personnalisés JQ, je n'ai pas personnalisé le plug-in, j'ai utilisé linq et ef ce mois-ci, et je n'ai pas touché aux bases. front-end. Aujourd'hui, un collègue a dit qu'il y avait un projet qui nécessitait une case à cocher dans la liste déroulante. Je voulais au départ trouver un plug-in en ligne, mais après y avoir réfléchi, cette fonction n'est pas difficile, j'en ai donc fait un moi-même et j'en ai profité pour me familiariser à nouveau avec le plug-in personnalisé JQ. Bon, d'accord, attachons d'abord les rendus :

.

Cela n'a pas l'air si difficile, mais il s'agit en fait de renforcer votre JQ afin qu'il ne rouille pas s'il n'est pas utilisé trop longtemps. Très bien. Ci-joint mon code :

Copier le code Le code est le suivant :

(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.Listeight<=0)
           {
               option.Listeight=200;
             }
           myList.height(option.Listheight);
           if(option.ListWidth<=0)
           {
                  }
              maListe.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(obj.val() $ (this).val());
                    }
                    else
                    {
                       obj.val(obj.val().replace($(this).val(),""));
                    }
                     })
              maListe.mouseover (function(){
                            maListe.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);
}
}
maListe.append( ul);
myList.appendTo("body");
myList.hide();

FoucsShow($(obj),myList);
}
              // quand Obtenez le focus pour que la liste déroulante apparaisse
function FoucsShow(obj,myList)
.fn .createList=function(newoption)
                                                                                    })(jQuery);


Appel au premier plan :





Copier le code

Le code est le suivant :

$("#d2").createList ({ //Source de données data:[ {"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"},
                                                                                                                                             🎜>            })