jQuery外掛程式——下拉選擇框

標籤：外掛程式   sel   設定   scl   依賴   color   back   ems   val   

其實，之前也寫過jQuery外掛程式，今天寫的是一個類比select選擇的下拉外掛程式。

既然是jQuery外掛程式，那麼必然是依賴jQuery的了。

老規矩，直接上代碼吧！

;(function () {    $.fn.extend({      dropdown:function (options) {        return this.each(function (i, val) {          $(val).css("position", "relative");          // 設定預設參數          var opts = $.extend({            color: "#28c4ff",            items: [              {key1: "選項一"},              {key2: "選項二"},              {key3: "選項三"},              {key4: "選項四"},              {key5: "選項五"}            ],            callback: function () {                          }          }, options);          // 建立預設選擇--請選擇          var $defaultVal = $("<p class=‘item‘></p>").html("請選擇").appendTo($(this));          // 建立選擇項          var $items = $("<ul class=‘menu-options‘></ul>").css("backgroundColor", $(document.body).css("backgroundColor"));          $(this).append($items);          // 為每一個選擇項添加屬性 如果是物件類型，則添加key作為屬性，如果就是字串的話，直接既當做屬性，也當做內容添加          $.each(opts.items, function (index, item) {            if (typeof item == "string") {              $("<li></li>").html(item).attr("data-val", item).appendTo($items);            } else if (typeof item == "object") {              for (var key in item) {                $("<li></li>").html(item[key]).attr("data-val", key).appendTo($items);              }            }          });          $defaultVal.on("click", function (ev) {            ev.stopPropagation();            $(this).toggleClass("open");            $(this).hasClass("open") ? $(this).next().slideDown() : $(this).next().slideUp()          });          // 選擇項的點擊事件          $items.on("click", "li", function (ev) {            ev.stopPropagation();            var $this = $(this);            console.log($this.attr("data-val"))            $(this).addClass("active").css("backgroundColor", opts.color).siblings().removeClass("active").css("backgroundColor",$this.parent().css("backgroundColor"));            opts.callback();            $this.parent().slideUp(function () {              $this.parent().prev("p").html($this.html()).attr("data-val", $this.attr("data-val")).removeClass("open");            });                      });          // 點擊空白部分，關閉下拉選擇框          $(window).on("click", function () {            if ($defaultVal.hasClass("open")) {              $defaultVal.trigger("click");            }          })        });      }    })})(jQuery);

　　頁面上比較乾淨：　　

<div class="dropdown"></div>

　　js部分屬於直接調用dropload方法即可：

    $(".dropdown").dropdown({        color: "#f0f",        items: [          {"shucai": "青菜"},          {"shuiguo": "葡萄"},          {"food": "麵包"}        ],        callback: function () {          console.log($(this))        }.bind($(".dropdown"))      });

　　items數組內容也可以直接是多個字串，如： ["蘋果", "水蜜桃", "哈密瓜"]

jQuery外掛程式——下拉選擇框