1. Öffnungsanalyse
In den beiden vorherigen Artikeln haben wir hauptsächlich darüber gesprochen, wie man Plug-Ins in JQuery entwickelt und wie das Prozessdesign mit objektorientiertem Denkdesign kombiniert wird.
Wie entwerfe ich ein Plug-In? Die beiden Methoden haben ihre eigenen Vor- und Nachteile, um aus den Stärken und Schwächen des anderen zu lernen. Diese Artikelserie ist lernorientiert und jeder entscheidet, wie die spezifischen Szenarien verwendet werden. Ab diesem heutigen Artikel werden wir Beispiele verwenden, um unsere eigene Plug-in-Bibliothek von flach bis tief zu entwickeln. Hehehe, weniger Unsinn sagen, kommen Sie auf den Punkt. Direkt auf den tatsächlichen Renderings:
Sie können es sehen. Dies ist ein Tab -Plugin. Wir können darauf stoßen, wenn wir jeden Tag einseitige Anwendungen ("Spa") erstellen. Nehmen wir das heutige Beispiel.
Wir bauen ein System basierend auf der BS -Struktur, das aus mehreren Modulen besteht, die alle Komponenten des Konstruktionssystems sind. Durch dieses Plug-In können wir unsere Module effektiv verwalten
Analysieren wir im Folgenden die Erfahrung der Erfahrung und der Benutzerinteraktivität der Benutzer.
(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:
bigbear.ui.createtab ($ ("#tab"), {
ButtonText: "Modul hinzufügen",
Ergebnis: [
{
Text: "Assistentum",
URL: "help.html",
Showclose: "0",
Status: "1"
},
{
Text: "Schülerinformationen",
URL: "info.html",
Showclose: "1",
Status: "1"
},
{
Text: "Schülerklassifizierung",
URL: "category.html",
Showclose: "1",
Status: "1"
},
{
Text: "Big Bear {{BB}}",
URL: "Bb.html",
Showclose: "1",
Status: "1"
},
{
Text: "Beta -Testmodul",
URL: "test.html",
Showclose: "1",
Status: "1"
}
]
});
"Bigbear.ui.CreateTab" enthält zwei Parameter. Das erste ist das DOM-Knoten-Objekt und die zweite ist die Option Plug-in-Parameter. "ButtonText" repräsentiert die Textbeschreibung der Operationsschaltfläche im Plug-In "Tab".
"Ergebnis" ist ein Array, das die Eigenschaften des Registerkartenelements enthält, einschließlich der Textbeschreibung, die URL, mit der sie beim Klicken auf das Registerkartenelement angefordert werden.
"Status" repräsentiert den Status der Option, die standardmäßig der State ist, und es kann einen geschlossenen Zustand geben, der als: 1-Open bzw. 0-open ausgedrückt wird.
(2) Was sind die Funktionen?
Durch optionale Parameter werden relevante Optionseinträge wie folgt dynamisch generiert:
Die Codekopie lautet wie folgt:
bigbear.ui.createtab ($ ("#tab"), {
ButtonText: "Modul hinzufügen",
Ergebnis: [
{
Text: "JQuery Quellcode Analyse",
URL: "help.html",
Showclose: "0",
Status: "1"
},
{
Text: "Big Bear {{BB}}}",
URL: "Bb.html",
Showclose: "1",
Status: "1"
}
]
});
Der Effekt ist wie folgt:
Sie können Einträgeoptionen frei hinzufügen und löschen, wie im folgenden Effekt gezeigt:
Das obige Bild zeigt eine dieser Situationen. Wenn es kein Modul gibt, wird eine Nachricht aufgefordert.
Dies ist der zweite Fall, und diejenigen, die zuvor gelöscht wurden, können wiederhergestellt werden.
(Iii), vollständiger Code für 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 ------ Registerkarte "
</div>
<div>
<div id = "tab">
<div>
<div>
+ Fügen Sie Schülerinformationen hinzu
</div>
<div>
<!-<div> <span> x </span> willkommene Seite </div>
<Div> <span> x </span> Benutzerverwaltung </div>
<div> <span> x </span> bigBear </div>->
</div>
</div>
<div>
</div>
<div>
<!-<div>
<Div> <span> Name: </span> <Eingabe type = "text"/> </div>
<div> <span> Hinweis: </span> <textarea> </textArea> </div>
</div> <div> <Eingabe type = "button" value = "speichern"/> </div>
->
</div>
</div>
</div>
</body>
(2), CSS -Dateicode
Die Codekopie lautet wie folgt:
.dxj-ui-hd {
Polsterung: 0px;
Rand: 0 Auto;
Randtop: 30px;
Breite: 780px;
Höhe: 60px;
Zeilenhöhe: 60px;
Hintergrund: #3385ff;
Farbe: #ffff;
Schriftfamilie: "Microsoft Yahei";
Schriftgröße: 28px;
Text-Align: Mitte;
Schriftgewicht: fett;
}
.dxj-ui-bd {
Polsterung: 0px;
Rand: 0 Auto;
Breite: 778px;
Padding-Top: 30px;
Padding-Bottom: 30px;
Überlauf: versteckt;
Grenze: 1PX Solid #3385ff;
}
.dxj-ui-bd #tab {
Polsterung: 0px;
Rand: 0 Auto;
Breite: 720px;
Überlauf: versteckt;
}
.dxj-ui-bd #tab .title {
Breite: 720px;
Überlauf: versteckt;
Grenzboden: 2PX Solid #3385ff;
}
.dxj-ui-bd #tab .title .adder {
Breite: 160px;
Höhe: 32px;
Zeilenhöhe: 32px;
Hintergrund: #DC143C;
Farbe: #ffff;
Schriftfamilie: "Microsoft Yahei";
Schriftgröße: 14px;
Text-Align: Mitte;
Schriftgewicht: fett;
float: links;
Cursor: Zeiger;
}
.dxj-ui-bd #tab .title .Items {
Höhe: 32px;
Rand-Links: 20px;
Breite: 540px;
Überlauf: versteckt;
float: links;
}
.dxj-ui-bd #tab .title .Items div {
Polsterung: 0px;
Rand-Links: 10px;
Breite: 96px;
Höhe: 32px;
Zeilenhöhe: 32px;
Hintergrund: #3385ff;
Farbe: #ffff;
Schriftfamilie: Arial;
Schriftgröße: 12px;
Text-Align: Mitte;
Position: Relativ;
float: links;
Cursor: Zeiger;
}
.dxj-ui-bd #tab .title .Items div span.del {
Breite: 16px;
Höhe: 16px;
Zeilenhöhe: 16px;
Anzeige: Block;
Hintergrund: #DC143C;
Position: absolut;
Rechts: 0;
Top: 0;
Cursor: Zeiger;
}
.dxj-ui-bd #tab .content {
Breite: 716px;
Padding-Top: 30px;
Überlauf: versteckt;
Grenze: 2PX Solid #3385ff;
Border-Top: 0px;
min-hohe: 130px;
Text-Align: Mitte;
}
.dxj-ui-bd #tab .Content Table {
Rand: 0 Auto;
}
.dxj-ui-bd #tab .Content div.c {
Padding-Top: 20px;
Padding-Links: 20px;
Hintergrund: #eee;
Höhe: 140px;
}
.dxj-ui-bd #tab .Content div.c.Input-content {
Rand: 10px;
Schriftfamilie: Arial;
Schriftgröße: 12px;
}
.dxj-ui-bd #tab .console-panel {
Breite: 716px;
Padding-Top: 20px;
Padding-Bottom: 20px;
Überlauf: versteckt;
Grenze: 2PX Solid #3385ff;
Border-Top: 0px;
Grenzboden: 2PX Solid #3385ff;
Hintergrund: #fff;
Anzeige: Keine;
}
.Active {
Schriftgewicht: fett;
}
(3) ist der JS -Code wie folgt:
Die Codekopie lautet wie folgt:
$ (function () {
bigbear.ui.createtab ($ ("#tab"), {
ButtonText: "Modul hinzufügen",
Ergebnis: [
{
Text: "Assistentum",
URL: "help.html",
Showclose: "0",
Status: "1"
},
{
Text: "Schülerinformationen",
URL: "info.html",
Showclose: "1",
Status: "1"
},
{
Text: "Schülerklassifizierung",
URL: "category.html",
Showclose: "1",
Status: "1"
},
{
Text: "Big Bear {{BB}}",
URL: "Bb.html",
Showclose: "1",
Status: "1"
},
{
Text: "Beta -Testmodul",
URL: "test.html",
Showclose: "1",
Status: "1"
}
]
});
});
(Funktion ($) {
var win = Fenster;
var bb = win.bigbear = win.bigbear || {
ui: {}
};
var ui = bb.ui = {};
var Tab = Funktion (Elem, Opts) {
this.elem = elem;
this.opts = opts;
};
var tabProto = tab.Prototype;
tabproto._deleteItem = function (item) {
var das = dies;
this.getelem (). Find (". Titel .Items Div")
.eq (item ["Index"])
.Fadeout (function () {
that._resetContent ();
that._updatestatus (item);
that._triggerItem (item ["index"] + 1);
that.getElem (). find (". title .adder"). Trigger ("klicken");
});
};
tabproto._triggerItem = function (next) {
var NextStatus = this._getStatus (next);
var items = this.getelem (). find (". title .Items div");
next = items.eq (Weiter);
if (next.size () && "1" == NextStatus) {// Der nachfolgende Dom -Knoten existiert
als nächstes.trigger ("klicken");
}
anders{
items.eq (0) .trigger ("click");
}
};
tabproto._getStatus = function (index) {
var status = "";
$ .each (this.getopts () ["result"], function (i, item) {
if (index == item ["index"]) {
Status += item ["Status"];
false zurückgeben;
}
});
Rückgabestatus;
};
tabproto._updatestatus = function (item) {
var status = item ["Status"];
Item ["Status"] = ("1" == Status)? "0": "1";
};
tabProto.init = function () {
var das = dies;
this.getelem (). find ("title .adder")
.Text (" +" + this.getOpts () ["buttonText"])
.on ("klicken", function () {
that._toggleconsolepanel (function () {
var root = that.getElem (). find (". Konsole-Panel"). leer ();
$ .each (that.getopts () ["Ergebnis"], Funktion (i, item) {
if ("0" == item ["Status"]) {
var elem = $ ("<div style = 'float: links';> </div>")
.Data ("Artikel", Artikel)
.Appendto (root);
$ ("<Eingabe type = 'radio' name = 'addMod' />").Appendto(elem);
$ ("<span> </span>"). text (item ["text"]). appendTo (elem);
}
});
if (root.find ("div"). size ()) {
$ ("<Eingabe type = 'button' value = 'modul hinzufügen' style = 'margin-links: 20px'/>")
.on ("klicken", function () {
var data = root.find ("input [type = radio]: checked"). parent (). data ("item");
that._updatestatus (Daten);
that.getelem (). find (". title .Items div"). EQ (Daten ["Index"]). Fadein (). Trigger ("Click");
that.getElem (). find (". title .adder"). Trigger ("klicken");
})
.Appendto (root);
}
anders{
root.text ("Noch keine Elemente hinzuzufügen!");
}
});
});
$ .each (this.getopts () ["result"], function (i, item) {
item ["index"] = i;
that._render (item);
});
this.getelem (). Find (". Titel .Items Div")
.eq (0)
.TRIGGER ("Click"); // Angenommen, es muss eins geben, sonst macht das Plug-In nicht viel Sinn!
};
tabproto._toggleconsolepanel = function (radback) {
this.getElem (). find (". Konsole-Panel"). Slidetoggle (function () {
$ .IStunction (Callback) && callback ();
});
};
tabProto._resetContent = function () {
this.getelem (). find (". Inhalt"). html ("");
};
tabproto._setcontent = function (html) {
this.getelem (). find (". Inhalt"). HTML (HTML);
};
tabproto._getContent = function (url) {
zurücksenden $ .ajax ({{{{
URL: URL
});
};
tabProto._render = Funktion (Daten) {
var das = dies;
var item = $ ("<div> </div>")
.Text (Daten ["Text"])
.on ("klicken", function () {
that._setCurrent (Daten ["Index"]);
that._getContent (data ["url"]). Done (Funktion (Ergebnis) {
that._setContent (Ergebnis);
})
.Fail (function () {
Neuen Fehler werfen ("Netto -Fehler!");
});
})
.Appendto (this.getelem (). find ("title .Items"));
if ("1" == data ["showClose"]) {
$ ("<span class = 'del'> x </span>")
.on ("klicken", function () {
if (win.confirm ("Wird dieser Artikel gelöscht?")) {
that._deleteItem (Daten);
false zurückgeben; // Blasen stoppen
}
})
.Appendto (Artikel);
}
};
tabProto._setCurrent = function (index) {
var items = this.getElem (). find ("title .Items div"). removeclass ("active");
items.eq (Index) .AddClass ("Active");
var contents = this.getelem (). find (". content .c"). hide ();
contents.eq (index) .show ();
};
tabProto.getelem = function () {
kehre dieses. Elem zurück;
};
tabProto.getopts = function () {
kehre dies zurück.
};
ui.createtab = function (elem, opts) {
var Tab = neue Registerkarte (Elem, Opts);
tab.init ();
Registerkarte zurück;
};
}) (jQuery);
(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) Überlegen Sie, ob die Optionen auf der Registerkarte im obigen Beispiel unabhängig in separate Klassen eingeteilt werden können? Zum Beispiel "Element", wie ich die "Registerkarte" -Klasse ändern kann? Denken Sie mit Fragen nach. . .
Das obige ist der gesamte Inhalt dieses Artikels. Wir werden dieses Plug-In in Zukunft weiter verbessern. Wenn Sie diesen Artikel mögen, geben Sie mir bitte einen Daumen hoch.