JQuery自製下拉式選單

Ref. 1 http://docs.jquery.com/Plugins/Authoring

    最近看了別人做的下拉式選單,覺得很有趣就想說用自己的邏輯跟用jQuery來
實作一下,但這個是很陽春的版本,沒有做什麼特效。至於我也參考了Ref. 1的
資料來做jQuery的plugin,至於為什麼要做plugin的原因是我想把這隻程式跟index.html
給分離開來好管理,如果對我這種作法有任何疑問跟有更好的想法希望能讓我知道然後
可以一起討論。

    如果想線上看效果可以上以下的網站去看:
http://jsfiddle.net/aDSdr/9/

那我也直接貼程式碼來跟大家分享:
============ index.html ===============

<script>
    $(document).ready(function(){
        $('#input1').selectDrop();
    });
</script>

<div id="warper1">
    <select name="" id="select1" style="display:none;">
         <option value="高雄" >高雄</option>
         <option value="台北">台北</option>
         <option value="台中" selected>台中</option>
         <option value="台南">台南</option>
         <option value="花蓮">花蓮</option>

    </select>
     <div class="inputbox1" id "input1"></div>
     <button type="button">Submit</button>
</div>



============ css ============

#warper1margin:20pxposition:relativewidth:202pxfloatleft;}

#warper1 ul{list-style:nonemargin0padding:0;}

#warper1 ul li{line-height:20pxcursor:pointermargin:1px 0font-size:12pxtext-indent:5px;}

.inputbox1{width:202pxheight:23pxline-height:23pxbackground#fff border:1px solid #333;  font-size:12pxtext-indent:5px;}

.hoverbackground:bluecolor:#fff;}
.hover1background:redcolor:#fff;}

.select_ul{background:#ddd;}

============ js ============


// 自製下拉式選單
(function($){

      $.fn.selectDrop function(){
        
        var $input_select $(this);
        var $ul $(document.createElement("ul"));
        var Selects $(this).parent('#warper1').find('select');
        var opt $('option'Selects);      
        var opt_num opt.length;
        var opt_list [];
        
        // init
        $ul.addClass('select_ul');
        $ul.mouseleave(function(){
                $ul.hide();
        });    

        //
         for (var i=0i<opt_num;i++ ){
             
            opt_list[i$(opt[i]).val();
            var $li $("<li>" opt_list[i"</li>");             
            $li.hover(function(){
                $(this).addClass('hover');
            },function(){
                $(this).removeClass('hover');
            });
                
            $li.click(function(){
                $("#input1").text($(this).text());
                $li.parent().hide();
            });
             
             $ul.append($li);
        };

        $("#input1").text(opt_list[0]);
          
        $input_select.after($ul);
        $ul.hide();
        
        $("#input1").click(function(){
             $ul.show();
        });
    };
})(jQuery)





























張貼留言

這個網誌中的熱門文章

解釋scope.$apply用來做什麼? -- AngularJS

Unions 在C語言的簡單介紹

JavaScript的Timer用法