jQuery插件——下拉选择框

Posted 2020-10-03 烛火星光

其实，之前也写过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数组内容也可以直接是多个字符串，如： ["苹果", "水蜜桃", "哈密瓜"]