Maison > interface Web > js tutoriel > jquery liste déroulante personnalisée effets example_form

jquery liste déroulante personnalisée effets example_form

WBOY
Libérer: 2016-05-16 16:51:22
original
1023 Les gens l'ont consulté

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 :

jquery liste déroulante personnalisée effets example_form

.

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"},
                                                                                                                                                 🎜>            })


    Étiquettes associées:
    source:php.cn
    Déclaration de ce site Web
    Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
    Tutoriels populaires
    Plus>
    Derniers téléchargements
    Plus>
    effets Web
    Code source du site Web
    Matériel du site Web
    Modèle frontal