jQuery插件——下拉选择框

其实，之前也写过jQuery插件，今天写的是一个模拟select选择的下拉插件。

既然是jQuery插件，那么必然是依赖jQuery的了。

老规矩，直接上代码吧！

;(function () {
    $.fn.extend({
      dropdown:function (options) {
        return this.each(function (i, val) {
          $(val).css("position", "relative");
          var oThis = $(this);
          // 设置默认参数
          var opts = $.extend({
            color: "#0a96d4",
            items: [
              {key1: "选项一"},
              {key2: "选项二"},
              {key3: "选项三"},
              {key4: "选项四"},
              {key5: "选项五"}
            ],
            initialVal: "请选择",
            callback: function () {

            }
          }, options);

          // 创建默认选择--请选择
          var $defaultVal = $("<p class='item'></p>").html(opts.initialVal).appendTo($(this));
          oThis.data("val", opts.initialVal);

          // 创建选择项
          var $items = $("<ul class='menu-options'></ul>");

          $(this).append($items);
          // 为每一个选择项添加属性 如果是对象类型，则添加key作为属性，如果就是字符串的话，直接既当做属性，也当做内容添加
          $.each(opts.items, function (index, item) {
            if (typeof item == "string" || typeof item == "number") {
              var oLi = $("<li></li>").html(item).attr("data-val", item).appendTo($items);
              if (opts.initialVal == item) oLi.addClass("active");
            } else if (typeof item == "object") {
              for (var key in item) {
                var oLi = $("<li></li>").html(item[key]).attr("data-val", key).appendTo($items);
                if (opts.initialVal == item[key]) oLi.addClass("active");
              }
            }
          });

          $defaultVal.on("click", function (ev) {
            ev.stopPropagation();
            $(".open").not(this).trigger("click");
            $(this).toggleClass("open");
            $(this).hasClass("open") ? $(this).next().slideDown() : $(this).next().slideUp()
          });

          // 选择项的点击事件
          $items.on("click", "li", function (ev) {
            ev.stopPropagation();
            var $this = $(this);
            $(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()).add(oThis).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数组内容也可以直接是多个字符串，如： ["苹果", "水蜜桃", "哈密瓜"]