Vor kurzem habe ich einige mobile Seiten der Formulierungskategorien zusammengestellt und auf eine Verknüpfungsauswahl zwischen Provinzen, Städten und Distrikten gestoßen. Ich wollte ursprünglich die vorherigen PC-Seite Provinz, Gemeinde und Distrikte in der öffentlichen Bibliothek verwenden, aber ich stellte fest, dass die Auswirkung der PC-Seite auf das Mobiltelefon zu unbefriedigend war. Das Design lieferte keinen spezifischen Entwurfseffekt, daher musste ich die Auswahl der Auswahl der ausgewählten Provinz-, Gemeinde- und Distriktauswahleffekte durch mich herstellen. Der Stil verwendet den Effekt des Mobiltelefons. Ich bin der Meinung, dass der Stileffekt genau richtig ist und verwendet werden kann. Die Daten werden weiterhin von PC -Daten verwendet, aber ich habe die Komponenten nur neu geschrieben. Der Codeeffekt ist wie folgt:
var $ = require('jquery'), $window = $(window), data = require('./data-new'), $doc = $(document);var __DEFAULTS__ = { wrap:'', itemName: ['Province', 'City', 'area'], items: ['province', 'city', 'area'], callback: function(field, index) {} // Click to switch to execute}; Funktionsbereich (Optionen) {options = $ .extend ({}, __defaults__, Optionen); var das = dies; that.wrapper = $ (options.wrap); that.Selectarr = that.wrapper.data ('default')? that.wrapper.data ('Standard'). Split (','): [110000.110100.110101]; // that.items = options.items; that.itemname = options.itemname; that.callback = options.callback; that.setValue (); that.events (); that.Default = that.wrapper.data ('Standard'); // Standardausgabe von Provinz-, Stadt- und Bezirks-ID, dass.validinput = $ ("#default-area"); var validVal = that.default! == undefiniert? this.default: ''; that.validinput.val (validVal); } Area.Prototype = {Konstruktor: Bereich, // Auswahl erstellen und ausgeben die entsprechenden Daten creatInitems: Funktion (itemName, data, selectId) {var that = this this; // Wenn der Standard -Standardwert nicht ausgegeben wird, fügt die Standardeinstellung eine entsprechende Eingabeaufforderung hinzu, um var html = '<select name = "'+itemName+'">'+(that.default === undefined? ' für (var k in data) {html += '<option value = "' +data [k] .id +'' ' +(selectID === data [k] .id?' selected =" ausgewählt ": '') +'>' +data [k] .Name +'</option>'; } html += '</select>'; Rückgabe html; }, // Setzen Sie den Anfangswert setValue: function () {var that = this, html = ''; $.each(that.selectArr,function(index,k){ that.index = index; html += that.createItems(that.items[index], that.getData(that.items[index], that.selectArr[index-1]),k); }) that.wrapper.append(html) }, //Get data getData: function(type, pid) { if (type === 'Provinz') {return data.provinzen || []; // Musterinformationen benötigen keine PID} if (type === 'Stadt') {returndaten.cities [pid] || []; } if (type === 'Bereich') {return data.areas [pid] || []; }}, // Auswählen von Indexwert getItemIndex: function (type) {var that = this; für (var i = 0, l = this.items.length; i <l; i ++) {if (that.items [i] == Typ) {return i; }}}, // Wählen Sie beim Auslösen der Änderung den nächsten Wert aus, um setItemval: function (select) {var that = this this; var $ this = select, vorher = $ this.val (), $ type = $ this.attr ('name'), $ nxtType = ''; if ($ type! var data = that.getData ($ nxtType, previd), html = that.creatEitems ($ nxtType, data, previd), nahezu if ($ this.sillings ('select [name = "'+$ nxtType+'"]'). Länge> 0) {NextSelect.Remove (); } $ this.after (html); NextSelect.find ('Option: First'). prop ('ausgewählt', true); $ ('select [name = "'+$ nxtType+'"]'). Trigger ('ändere'); } else {that.validinput.val ($ this.val ()). Trigger ('validate')} that.index = that.getItemIndex ($ type); // Rückruffunktion, wenn nach dem Auslösen von Änderungen festgelegt werden kann, wenn (that.callback) {that.callback.call (this, select, that.getItemIndex ($ type)); }}, Ereignisse: function () {var that = this; // Wählen Sie Ereignis ändern $ doc.on ('ändere', '. Area-Container Select', function () {that.setItemval ($ (this));})}} module.exports = Bereich;HTML -Code:
Kopieren Sie den Code-Code wie folgt: <Eingabe type = "Hidden" name = "defaultArea" value = "" id = "default-area"> // Erforderliche Felder, um Überprüfung der Überprüfung der Überprüfung durch die Überprüfung der Überprüfung hinzuzufügen
<div data-default = ""> </div>
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.