Ausführliche Erklärung der universellen Initialisierung von jQuery

Dieser Artikel stellt hauptsächlich die universelle Initialisierung von jQuery vor. Er ist sehr gut und hat einen Referenzwert. Ich hoffe, er kann jedem helfen.

Ich habe das Chosen js-Plug-in verwendet, dessen Zweck darin besteht, das Dropdown-Feld zu verschönern. Github-Adresse: https://harvesthq.github.io/chosen/

no_results_text: Der Text, der angezeigt wird, wenn „xxxxx“ keine Suchergebnisse hat

allow_single_deselect: true Ob die Abwahl zugelassen werden soll
disable_search: true Ob ein Suchfeld angezeigt wird

max_selected_options: Wenn die Auswahl eine Mehrfachauswahl ist, die maximale Anzahl von Auswahlmöglichkeiten

Offizielle Dokumentationsadresse

Offizielle Dokumentationsadresse für Konfigurationsoptionen

/* 功能: Chosen通用初始化
 * 创建人：Brian 创建时间：2016-12-13
 */
(function ($j) {
  var chosenTool = function (el, options) {
    this.opts = options;
    this.chosenInit();
    this.chose_get_init();
    this.chose_mult_set_init(this.opts.hidClassName);
    this.clickEvent();
    return this;
  }
  chosenTool.opts = {
    selectId: '',//selectId
    hidClassName: '',//隐藏域Class
    placeholdertxt: '',//select中placeholder文字
    noresulttxt: '',//输入的名称未查到时显示的文字
    dataJson: ''//数据源
  };
  $j.fn.myChosenTool = function (opt) {
    var value,
      args = Array.prototype.slice.call(arguments, 1);
    var $jthis = $j(this),
      data = $jthis.data('chosenTool'),
      options = $j.extend({}, chosenTool.opts, $jthis.data(),
        typeof option === 'object' && option);
    if (typeof option === 'string') {
      //判断用户调用的方法是否存在
      //if ($j.inArray(option, allowedMethods) < 0) {
      //  throw new Error("Unknown method: " + option);
      //}
      if (!data) {
        return;
      }
      value = data[option].apply(data, args);
      if (option === &#39;destroy&#39;) {
        $jthis.removeData(&#39;chosenTool&#39;);
      }
    }
    /*插件外部调用插件内部的方法需要修改成下面形式*/
    //if (typeof opt === &#39;string&#39;) {
    //  if (!data) {
    //    return;
    //  }
    //  value = data[opt].apply(data, args);
    //  if (opt === &#39;destroy&#39;) {
    //    $jthis.removeData(&#39;chosenTool&#39;);
    //  }
    //}
    if (!data) {
      opt["selectId"] = $j(this).attr("id");
      $jthis.data(&#39;chosenTool&#39;, (data = new chosenTool(this, opt)));
    }
    console.log(data);
    return typeof value === &#39;undefined&#39; ? this : value;
  };
  chosenTool.prototype.clickEvent = function () {
    var _this = this;
    $j("#" + this.opts.selectId).on("change", function () {
      _this.chose_get_value();
    });
  };
  /*下拉框初始化方法*/
  chosenTool.prototype.selectInfoInit = function () {
    var proOPts = "";
    this.opts.dataJson = $j.parseJSON(this.opts.dataJson);
    $j.each(this.opts.dataJson, function (index, item) {
      proOPts += "<option value=&#39;" + item.ValueField + "&#39;>" + item.TextField + "</option>";
    });
    $j("#" + this.opts.selectId).append(proOPts);
    //初始化chosen
    $j("#" + this.opts.selectId).chosen({
      allow_single_deselect: true, //是否允许取消选择
      placeholder_text_multiple: this.opts.placeholdertxt, //多选框没有选中任何值的时候 显示的文字
      no_results_text: this.opts.noresulttxt,//无搜索结果时显示的文本
      search_contains: true//是否支持模糊搜索
    });
  };
  /*对象初始化方法*/
  chosenTool.prototype.chosenInit = function () {
    this.selectInfoInit();
  };
  //私有方法，检测参数是否合法
  chosenTool.prototype.isValid = function () {
    return !this.options || (this.options && typeof this.options === "object") ? true : false;
  };
  //数据同步
  chosenTool.prototype.chose_get_init = function () {
    var selectId = this.opts.selectId;
    $j("#" + this.opts.selectId).chosen().change(
         function () {
           $j("#" + selectId).trigger("liszt:updated");//更新下拉框
         });
  };
  //单选select value获取
  chosenTool.prototype.chose_get_value = function () {
    var selectVal = $j("#" + this.opts.selectId).val();
    $j("." + this.opts.hidClassName).val(selectVal);
  };
  //单选select value获取
  chosenTool.prototype.chose_mult_set_init = function () {
    var values = $j("." + this.opts.hidClassName).val();
    if (values && values.indexOf(&#39;,&#39;) > 0) {
      var arr = values.split(&#39;,&#39;);
      var length = arr.length;
      var value = &#39;&#39;;
      for (i = 0; i < length; i++) {
        value = arr[i];
        $j("#" + this.opts.selectId + " [value=&#39;" + value + "&#39;]").attr(&#39;selected&#39;, &#39;selected&#39;);
      }
    } else {
      $j("#" + this.opts.selectId + " [value=&#39;" + values + "&#39;]").attr(&#39;selected&#39;, &#39;selected&#39;);
    }
    $j("#" + this.opts.selectId).trigger("liszt:updated");
  };
  //select text获取，多选时请注意
  chosenTool.prototype.chose_get_text = function () {
    return $j("#" + this.opts.selectId + " option:selected").text();
  };
})(jQuery);

Verwandte Empfehlungen:

jQuery Validate kann das gewählte Element nicht überprüfen. So lösen Sie es

Chosen So verwenden Sie das Jquery-basierte Auswahlfeld-Plug-in_jquery

Beispiel für den ausgewählten dynamischen Einstellungswert von JQuery-Einführung_jquery

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung der universellen Initialisierung von jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!