Heim >Web-Frontend >js-Tutorial >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 === 'destroy') { $jthis.removeData('chosenTool'); } } /*插件外部调用插件内部的方法需要修改成下面形式*/ //if (typeof opt === 'string') { // if (!data) { // return; // } // value = data[opt].apply(data, args); // if (opt === 'destroy') { // $jthis.removeData('chosenTool'); // } //} if (!data) { opt["selectId"] = $j(this).attr("id"); $jthis.data('chosenTool', (data = new chosenTool(this, opt))); } console.log(data); return typeof value === 'undefined' ? 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='" + item.ValueField + "'>" + 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(',') > 0) { var arr = values.split(','); var length = arr.length; var value = ''; for (i = 0; i < length; i++) { value = arr[i]; $j("#" + this.opts.selectId + " [value='" + value + "']").attr('selected', 'selected'); } } else { $j("#" + this.opts.selectId + " [value='" + values + "']").attr('selected', 'selected'); } $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!