1. Öffnungsanalyse
Hallo alle! In den ersten beiden Artikeln sprechen wir hauptsächlich darüber, wie Plug-Ins in "JQuery's Way" entwickelt werden können und wie ein Plug-In gestaltet wird, indem das Prozessdesign mit objektorientiertem Denkdesign kombiniert wird. Beide Methoden haben ihre Vor- und Nachteile aus ihren Stärken und Schwächen. Hehehe, lass uns weniger Unsinn reden und auf den Punkt kommen. Direkt auf den tatsächlichen Renderings:
Sie können es sehen. Dies ist ein Dropdown-Menü-Plug-In. In unserer täglichen Entwicklung kann das System manchmal das Gefühl haben, dass es nicht sehr schön ist und nur begrenzte Funktionen hat, was die Benutzer dazu veranlasst
Die Erfahrungsform und die Benutzerinteraktivität sind nicht sehr gut, also simuliere ich heute eine Hehehehehe. Lassen Sie es uns unten ausführlich analysieren.
(Ii) Fallanalyse
(1) Bestimmen Sie zunächst, was dieses Plugin tut. Schauen wir uns die Anrufmethode des Plug-Ins und die Beschreibung der Konfigurationsparameter an. Der folgende Code:
Die Codekopie lautet wie folgt:
$ (function () {
var itemSelector = new itemSelector ($ ("#item-selector"), {
aktuellText: "Bitte wählen Sie Element",
Artikel: [
{
Text: "JavaScript",
Wert: "JS",
Behindert: "1"
},
{
Text: "CSS",
Wert: "CSS",
Behindert: "0"
},
{
Text: "html",
Wert: "html",
Behindert: "0"
}
],
Modus: "0", // Wenn "1" das Kontrollkästchen Mehrfachauswahlmodus unterstützt
Änderung: Funktion (Wert) {
// Setzen Sie Ihren Code hier ein
}
});
itemSelector.init ();
setTimeout (function () {
console.log (itemSelector.getCurrentValue ()); // Testen Sie, um zuerst das ausgewählte Element zu erhalten
}, 2000);
"var itemSelector = new itemSelector ()" enthält zwei Parameter. Das erste ist das DOM-Knoten-Objekt und die zweite ist die Option Plug-in-Parameter. "currentText" repräsentiert die Textbeschreibung des Textanzeigebereichs im Plug-In "itemSelector".
"Elements" ist ein Array, das die Eigenschaften des Elements "itemelector" enthält, einschließlich Textbeschreibung, Optionswert, "deaktiviert" die Ernährung des Listeneintrags, 0 zeigt Anzeige und 1 stellt nicht anzuzeigen.
"Change" repräsentiert die Operation Callback -Funktion bei Auswahl, und die Optionsdaten werden in Form von Parametern zurückgegeben.
(2) Was sind die Funktionen?
Die Darstellungen, die angezeigt werden können, sind wie folgt:
Die Renderings, die nicht angezeigt werden können, sind wie folgt:
Der Unterschied zwischen den beiden ist: Die nicht respektierten Zustandsdaten werden nicht zurückgegeben, und es wird keine Auswirkung beim Aufschwung geben.
3) Der vollständige Code ist zum Lernen. Dieser Code wurde getestet, einschließlich Verzeichnisstruktur und zugehörigen Dateien.
(1), html
Die Codekopie lautet wie folgt:
<body>
<div>
Big Bear {{BB}}-DXJ UI ------ ITECTSURTORTORTION
</div>
<div>
<div id = "item-selector">
<div>
<div> </div> <span> ↓ </span>
</div>
<div>
<div>
</div>
</div>
</div>
</div>
</body>
(2), CSS
Die Codekopie lautet wie folgt:
/ * Element-Selector */
#item-selektor {
Rand: 0 Auto;
Breite: 220px;
Überlauf: versteckt;
Grenze: 2PX Solid #CCC;
}
#item-selektor .title {
Border-Bottom: 1PX Solid #CCC;
Überlauf: versteckt;
}
#item-selektor .title div {
Breite: 190px;
Grenze: 0px;
Farbe:#999;
Schriftfamilie: Arial;
Schriftgröße: 14px;
Höhe: 28px;
Zeilenhöhe: 28px;
float: links;
Cursor: Zeiger;
}
#item-selektor .title span {
Anzeige: Block;
Höhe: 30px;
Zeilenhöhe: 30px;
Breite: 29px;
float: links;
Text-Align: Mitte;
Border-Links: 1PX Solid #CCC;
Cursor: Zeiger;
}
#item-selektor .content {
Breite: 220px;
Überlauf: versteckt;
}
#item-selektor .content .Items {
Überlauf: versteckt;
}
#item-selektor .content .Items div {
Padding-Links: 20px;
Breite: 200px;
Höhe: 32px;
Zeilenhöhe: 32px;
Schriftfamilie: "Microsoft Yahei";
Schriftgröße: 14px;
Schriftgewicht: fett;
Cursor: Zeiger;
}
.Item-hover {
Hintergrund:#3385ff;
Farbe: #ffff;
}
(3), "itemSelector.js"
Die Codekopie lautet wie folgt:
Funktionselementen (Elem, Opts) {
this.elem = elem;
this.opts = opts;
};
var isProto = itemSelector.Prototyp;
IsProto.getelem = function () {
kehre dieses. Elem zurück;
};
IsProto.getopts = function () {
kehre dies zurück.
};
/* Datenmanip*/
IsProto._setCurrent = Funktion (aktuell) {
this.getOpts () ["Strom"] = Strom;
};
IsProto.getCurrentValue = function (aktuell) {
return this.getopts () ["aktuell"];
};
/* Datenmanip*/
IsProto.init = function () {
var das = dies;
this.getOpts () ["current"] = null; // Datencursor
this._setItemValue (this.getopts () ["currentText"]);
var itemselem = that.getelem (). find (". Inhalt .Items");
this.getelem (). find (". title div"). on ("click", function () {
itemselem.toggle ();
});
this.getelem (). find (". Titelspan"). On ("Click", function () {
itemselem.toggle ();
});
$ .each (this.getopts () ["items"], function (i, item) {
item ["id"] = (neues Datum (). GetTime ()). toString ();
that._render (item);
});
};
IsProto._setItemValue = function (value) {
this.getelem (). find (". title div"). text (Wert)
};
IsProto._render = function (item) {
var das = dies;
var itemelem = $ ("<div> </div>")
.Text (Element ["Text"])
.Attr ("id", item ["id"]);
if ("0" == item ["deaktiviert"]) {
itemelem.on ("klicken", function () {
var onchange = that.getOpts () ["Change"];
that.getelem (). find (". Inhalt .Items"). hide ();
that._setItemValue (item ["text"]);
that._setCurrent (item);
onchange && onchange (item);
})
.Mouseover (function () {
$ (this) .AddClass ("Item-Hover");
})
.Mouseout (function () {
$ (this) .removeclass ("item-hover");
});
}
anders{
itemelem.css ("color", "#ccc"). on ("click", function () {
that.getelem (). find (". Inhalt .Items"). hide ();
that._setItemValue (item ["text"]);
});
}
itemelem.appendto (this.getelem (). find (". Inhalt .Items")));
};
(Iv), endgültige Zusammenfassung
(1) Eine vernünftige Analyse der funktionalen Anforderungen in einer objektorientierten Denkweise.
(2) organisieren Sie unsere Plug-in-Logik auf eine klassenweise Weise.
(3) rekonstruieren Sie die obigen Beispiele kontinuierlich, wie Sie das vernünftigerweise rekonstruieren können? Nicht überherzig, seien Sie wohl. Die empfohlene Methode besteht darin, das Prozessdesign mit objektorientiertem Denkdesign zu kombinieren.
(4) Der folgende Artikel erweitert die damit verbundenen Funktionen wie den Eigenschaftsmodus. Wenn es sich um "1" handelt, unterstützt es den Checkbox Multi-Select-Modus, aber jetzt ist es nur der Standard-Dropdown-Modus.
Dieser Artikel ist hier zuerst hier und wir werden ihn später weiterhin diskutieren. Ich hoffe, Sie können diese Artikelserie genießen.