首頁  >  文章  >  web前端  >  jquery自訂下拉清單範例_表單特效

jquery自訂下拉清單範例_表單特效

WBOY
WBOY原創
2016-05-16 16:51:22962瀏覽

自從上次做了JQ自訂分頁插件和表格插件後,就沒在自訂過插件了,這一個月都在用linq和ef,基本前端都沒怎麼去碰了,今天有個同事說有個項目需要在下拉框裡面有複選框,本來想上網找下插件的,一想,其實這功能也不難,於是就自己做了一個,也趁機再次熟悉下JQ自訂插件吧,好了,先附上效果圖先:

jquery自訂下拉清單範例_表單特效

看起來沒怎麼難吧,其實就是強化JQ,免得太久沒用,生疏了。好了。附上我的程式碼:

複製程式碼 程式碼如下:

(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=$("
    ");
             padding":"2px"});
               myList.css({"border":"1pxsolid #D9E5F3","position":"absolute","overflow-y":"scroll"" "#fff","font-size":"12px"});
               if(option.Listheight    option.Listheight=200;
                }
    myList .height(option.Listheight);
              ()
               }
                 時的清單寬度 (選購寬度。 ListWidth);
                // 預設位置在建立元素的下方
               myList.offset({"topf:obj.左});
               vardata=option.data;

                     for(i=0;i          {
                 var li=$("
  • ");             ListSon.change(function () {
                       作用中if(this.checked)   
                       obj.val(obj.val() $(this).val());
                      其他
                         {
                          >                    })
                 myList.show();          
                          })
                               myList.hide();          
        )
                 var span=$("");
                 ListSon.val(data[i].value "; ");
                  li.append(ListSon);
               );
              }
               }
           ;
                   myList.appendTo("body");
              sShow($(obj),myList);
              }
              // 當所擷取到焦點讓出現此下拉方塊
              function FoucsShow(obj,myList)
             )
              }
              $.fn.createList =function(newoption)
              {
                 . >
              }
              })(jQuery);



    前台呼叫:



  • 複製程式碼

    程式碼如下:

    $("#d2").createList({     //數據源     data:[           {"value":"C#","text":"C#"},           {"value":".NET","text": ".NET"},
               {"value":"Java","text":"Java"},
             >           {"value":"C","text":"C"},
               {"value":C ","text":      ","text":"javascript"},
               {"value":"ajax","text":"ajax"},
         "},
               {"value":"xml","text":"xml"},
            ,   { {"value":"xml","text":"Mysql"},
               {"value":"oracle","text":"oracle"},           {"value":"Ext js","text":"Ext js"},
       CSS3"},
               {"value":"HTML5","text":"HTML5"}
                        $("#d3").createList();   
                   })


    陳述:
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn