Vorwort: Als ich kürzlich die Bootstrap -Komponente verwendete, fand ich ein Problem der Benutzerfreundlichkeit. Für viele einfache Komponenten -Initialisierung muss viel Initialisierungscode in JS geschrieben werden, z. B. ein einfaches Auswahl -Tag. Da es nur Daten aus dem Hintergrund erhalten und in die Option füllen muss. Wenn Sie jedoch Daten aus dem Hintergrund abrufen, müssen Sie die JS -Initialisierung erfordern. Daher verursacht dies eine Menge doppelter Code im JS -Initialisierungscode, wenn die Seite initialisiert wird, was sehr ärgerlich aussieht. Also erinnerte ich mich an das Datenattribut in der Bootstrap -Tabelle. Es wäre so cool, wenn ich Daten verwenden könnte, um einfache Komponenten direkt im HTML zu initialisieren. Schauen wir uns zunächst die Dokumentation der Bootstrap -Tabelle an:
Sie können sehen, dass fast alle Eigenschaften und Ereignisse in der Bootstrap-Tabelle in Daten verwendet werden können, was sich ziemlich gut anfühlt. Dann wird der Blogger anfangen zu recherchieren. Daten-*Woher kommt dieses Ding?
1. Eine vorläufige Studie zu JQuery -Daten ()
Nachdem ich online gesucht hatte, fand ich endlich die Datenquelle:*. Es stellte sich heraus, dass es von JQuery und HTML5 stammte. Gute Dinge, wirklich gute Dinge! Schauen wir uns die Jquery -API an
Die ursprüngliche Verwendung ist wie folgt:
Die Funktion ist tatsächlich sehr offensichtlich, nämlich bestimmte Attribute und Daten zum Element hinzuzufügen oder Werte zu nehmen.
Schauen wir uns die Kombination der Data () -Methode und des HTML5-Datenattributs an
Haha, dieses Ding ist gut. Der von HTML5-Daten festgelegte Wert kann mit der jQuery-Daten () -Methode erhalten werden. Die Regeln hier sind wie folgt:
1) Alle Datenattribute müssen mit "Data-" beginnen.
2) Die Attribute werden durch "-" getrennt,
3) Entfernen Sie bei JQuery nur "Daten" und "-".
Damit wissen wir, wie man Eigenschaften im Tag festlegt und dann die entsprechenden Eigenschaften in JS aufnimmt. Erklären wir es unten in Kombination mit dem Beispiel der letzten Kapselung von Combobox.
2. JQuery Data () implementiert die Daten-* Initialisierungskomponente
Denken Sie an die vorherige JS -Komponentenserie --kapseln Sie Ihre eigenen JS -Komponenten. Sie können auch einen einfachen Combobox in diesem Artikel zusammenfassen, der Daten über die URL aus dem Backend abrufen kann. Im Folgenden werden wir also immer noch unser Bestes an der Grundlage dieser Komponente tun und das Datenattribut für das SELECT-Tag direkt hinzufügen, um die Dropdown-Box-Komponente zu initialisieren.
1. JS -Komponentenkapselungscode
(Funktion ($) {// 1. Definieren Sie JQuery -Erweiterungsmethoden Combobox $ .fn.combobox = Funktion (Optionen, Param) {if (Typofoptionen == 'String') {return $ .fn.combobox.methods [option] (this, param);} // 2. $. Option.Text (Option.PlaceHolder); options.onBeforeLoad.call (Ziel, parat); item) {var option = $ ('<option> </option>'); option.onchange (target.val ()); $ .getJson (url, function (data) {jq.empty (); var option = $ ('<option> </option>'); option.attr ('value', ''); option.text ('bitte auswählen'); jq.append (option); $. item [jq.attr ('valueField']); }}; // 6. Default parameter list $.fn.combobox.defaults = { url: null, param: null, data: null, valueField: 'value', textField: 'text', placeholder: 'Please select', onBeforeLoad: function (param) { }, onLoadSuccess: function () { }, onChange: function (value) { } }; // Dieser Absatz ist neu hinzugefügt und die Initialisierungsmethode $ (Dokument) .Ready (function () {$ ('. Combobox'). Jeweils (Funktion () {var $ combobOX = $ (this); }) (jQuery);Die meisten Codes unterscheiden sich nicht von der letzten. Konzentrieren wir uns auf den folgenden Absatz
// Dieser Absatz ist neu hinzugefügt. Nach Abschluss der Seiteninitialisierung ist die Initialisierungsmethode $ (Dokument) .Ready (function () {$ ('. Combobox'). Jede (Funktion () {var $ combobox = $ (this);Es ist offensichtlich, dass nach Abschluss der Seiteninitialisierung die Komponente durch den Stilwählers initialisiert wird. Jedes wird verwendet, wenn mehrere .combobox-Stile vorhanden sind, die jeweils nacheinander initialisieren. Rufen Sie die Anrufmethode an, um die Initialisierung von Combobox über $ .fn.combobox.call ($ combobox, $ combobox.data ()) aufzurufen. Die beiden Parameter in der Anrufmethode entsprechen:
1) Das aktuell initialisierte JQuery -Objekt
2) Parameterliste. Hier sind die über $ combobox.data () erhaltenen Datenattribute alle HTML-Datenattribute. Geben Sie alle Datenattribute als Parameter in die Initialisierungsmethode von Combobox ein.
2. In HTML initialisieren Sie durch Daten-*
<select id = "search_" name = "search_province" data-url = "/home/getProvince" data-param = '{"Typ": "0"}' data-text-field = "name" data-value-field = "id"> </select>Geben Sie das Datenattribut an. Aus dem obigen wissen, dass die Initialisierung hier darin besteht, die Komponente über die Style Selector.comBobox zu initialisieren. Wenn Sie Daten verwenden möchten, müssen Sie die Komponente initialisieren.
3. Backend C# -Methode
public class HomeController : Controller { public List<string> lstProvince = new List<string>() { "Beijing", "Tianjin", "Chongqing", "Shanghai", "Hebei", "Shanxi", "Liaoning", "Jilin", "Heilongjiang", "Jiangsu", "Zhejiang", "Anhui", "Fujian", "Jiangxi", "Shandong", "Henan", "Hubei", "Hunan", "Guangdong", "Hainan", "Sichuan", "Guizhou", "Yunnan", "Yannan", "Shaanxi", "", ",", ",", ",", " "Autonome Region" Inner Mongolia "," Guangxi Zhuang Autonomous Region "," Autonome Region Tibet "," Ningxia Hui Autonomous Region "," Xinxia Uygur Autonomous Region "," Hong Kong Special Administrative Region "," Macao Special Administrative Region "}; public JsonResult getProvince (String -Typ) {var lstres = new List <Provinz> (); für (var i = 0; i <10; i ++) {var omodel = new provinz (); omodel.id = i; omodel.name = lstprovince [i]; lstres.add (Omodel); } return json (lstres, jsonRequestBehavior.AllowGet); }} öffentliche Klasse Provinz {public int id {get; Satz; } public String Name {get; Satz; }}Über das Testen des Codes gibt es nichts zu sagen.
4. Debugging -Effekt
Den Effekt erhalten
Dies führt im Grunde genommen die Initialisierung der Komponente durch Daten-*ab.
3. Zusammenfassung
Die obigen demonstriert kurz die Verwendung der Methode JQuery Data () in Kombination mit dem HTML5-Datenattribut. Es kann im Grunde die Anforderungen von Bloggern erfüllen: Sie müssen keine weitere Zeile des JS -Codes schreiben, um das Tag direkt zu initialisieren. Wenn Sie es verwenden, beziehen Sie sich einfach auf die Dateien von jQuery.js und jquery.extension.js. Wir wissen jedoch, dass es für den Browser bestimmte Anforderungen an den Browser geben muss, da es sich um eine Funktion in HTML5 handelt. Natürlich ist diese Verwendungsfunktion relativ einfach, reicht jedoch für die Initialisierung einiger einfacher Komponenten aus.
Wenn der Artikel ein falsches Verständnis gibt, weisen Sie bitte darauf hin, und der Blogger wird sehr dankbar sein.
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.