jquery 사용자 정의 드롭다운 목록 example_form 효과

저번에 JQ 커스텀 페이징 플러그인과 테이블 플러그인을 만든 이후로 플러그인을 커스텀하지 않았습니다. 이번 달에는 linq와 ef를 사용하고 있으며 기본 프론트는 건드리지 않았습니다. 오늘은 동료가 있는데 드롭다운 박스에 체크박스를 필수로 넣어야 하는 프로젝트가 있었다고 하더군요. 원래는 온라인에서 플러그인을 찾아보고 싶었는데 생각해보니 이 기능은 사실 어렵지 않네요. , 그래서 직접 만들고 JQ 사용자 정의 플러그인에 다시 익숙해지는 기회를 얻었습니다. 먼저 렌더링을 첨부해 보겠습니다.

그렇게 어려워 보이지는 않지만 사실 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=$("

");
           ul.css({"list-style":"none","margin":"0px" ,"padding":"2px"});
           myList.css({"border":"1px solid #D9E5F3","position":"절대","overflow-y":"스크롤","배경 -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=$("");
> ) $(this).val());
                   }
>        }
                     })
              myList.mouseover (function(){
                           myList.show();          
                      })
            myList.mouseout(function(){
                        myList.hide();          
                        })
varspan=$("");
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);
}
              // 언제 드롭다운 상자가 나타나도록 포커스 가져오기
function FoucsShow(obj,myList)
.createList=function(newoption)
                                                       })(jQuery)



포그라운드 호출:

코드 복사

코드는 다음과 같습니다.

$("#d2").createList ({ //데이터 소스 data:[ {"value":"C#","text":"C#"}, {"value":".NET"," text": ".NET"}, {"value":"Java","text":"Java"},

{"value":"JSP","text":"JSP"} ,

            {"값": "C", "텍스트": "C"},
                                                                  ~       ","text":"javascript"},
                                                                                  > : "xml","text":"Mysql"},
                                                                                          ,"text":"JQuery"},
                                                                             > > 🎜>