1. Analyse d'ouverture
Dans les deux articles précédents, nous avons principalement expliqué comment développer des plug-ins en jQuery et comment combiner la conception de processus avec la conception de pensée orientée objet.
Comment concevoir un plug-in? Les deux méthodes ont leurs propres avantages et inconvénients à apprendre des forces et des faiblesses de l'autre. Cette série d'articles est orientée vers l'apprentissage, et tout le monde décide comment utiliser les scénarios spécifiques. Ainsi, à partir de cet article aujourd'hui, nous utiliserons des exemples pour développer notre propre bibliothèque de plug-in de superficiel à profond. Hehehe, disons moins de bêtises, arrivez au point. Directement sur les rendus réels:
Vous pouvez le voir. Ceci est un plugin d'onglet. Nous pouvons le rencontrer lorsque nous faisons des applications à une page ("Spa") tous les jours. Prenons l'exemple d'aujourd'hui.
Nous construisons un système basé sur la structure BS, qui comprendra plusieurs modules, qui sont tous les composants du système de construction. Grâce à ce plug-in, nous pouvons gérer efficacement nos modules
Analysons le formulaire d'expérience et l'interactivité des utilisateurs en détail ci-dessous.
(Ii), analyse de cas
(1) Tout d'abord, déterminez ce que fait ce plugin. Jetons un coup d'œil à la méthode d'appel du plug-in et à la description du paramètre de configuration. Le code suivant:
La copie de code est la suivante:
bigbear.ui.createTab ($ ("# onglet"), {
ButtonText: "Ajouter le module",
résultat: [
{
Texte: "Invite de l'assistant",
URL: "Help.html",
showclose: "0",
Statut: "1"
},
{
Texte: "Informations sur les élèves",
URL: "info.html",
showclose: "1",
Statut: "1"
},
{
Texte: "Classification des élèves",
URL: "catégorie.html",
showclose: "1",
Statut: "1"
},
{
Texte: "Big Bear {{bb}}",
URL: "bb.html",
showclose: "1",
Statut: "1"
},
{
Texte: "Module de test bêta",
URL: "test.html",
showclose: "1",
Statut: "1"
}
]]
});
"bigbear.ui.createTab" contient deux paramètres. Le premier est l'objet Dom Node et le second est l'option de paramètre de plug-in. "ButtonText" représente la description du texte du bouton de fonctionnement dans le plug-in "Tab".
"Résultat" est un tableau qui contient les propriétés de l'élément d'onglet, y compris la description du texte, l'URL utilisée pour le demander lors de la clic de l'élément d'onglet, "ShowClose" représente si l'option Tab affiche le bouton Fermer.
Le "statut" représente l'état de l'option, qui est l'état ON par défaut, et il peut y avoir un état fermé, qui est exprimé respectivement en: 1-Open et 0-Open.
(2) Quelles sont les fonctions impliquées?
Grâce à des paramètres facultatifs, les entrées d'options pertinentes sont générées dynamiquement, comme suit:
La copie de code est la suivante:
bigbear.ui.createTab ($ ("# onglet"), {
ButtonText: "Ajouter le module",
résultat: [
{
Texte: "Analyse du code source jQuery",
URL: "Help.html",
showclose: "0",
Statut: "1"
},
{
Texte: "Big Bear {{bb}}}",
URL: "bb.html",
showclose: "1",
Statut: "1"
}
]]
});
L'effet est le suivant:
Vous pouvez ajouter et supprimer librement les options d'entrées, comme indiqué dans l'effet suivant:
L'image ci-dessus montre l'une de ces situations. Lorsqu'il n'y a pas de module, un message sera invité.
Il s'agit du deuxième cas, et ceux qui ont déjà été supprimés peuvent être restaurés.
(Iii), code complet pour l'apprentissage , ce code a été testé, y compris la structure du répertoire et les fichiers connexes.
(1), HTML
La copie de code est la suivante:
<body>
<div>
Big Bear {{BB}} - Dxj Ui ------ Tab
</div>
<div>
<div id = "tab">
<div>
<div>
+ Ajouter des informations sur les étudiants
</div>
<div>
<! - <div> <span> x </span> page de bienvenue </div>
<v> <span> x </span> Gestion des utilisateurs </div>
<v> <span> x </span> bigbear </div> ->
</div>
</div>
<div>
</div>
<div>
<! - <div>
<div> <span> Nom: </span> <input type = "text" /> </div>
<div> <span> Remarque: </span> <TextArea> </ TextArea> </div>
</div> <div> <input type = "Button" value = "Save" /> </div>
->
</div>
</div>
</div>
</docy>
(2), code de fichier CSS
La copie de code est la suivante:
.dxj-ui-hd {
rembourrage: 0px;
marge: 0 auto;
marge: 30px;
Largeur: 780px;
hauteur: 60px;
hauteur de ligne: 60px;
Contexte: # 3385FF;
Couleur: #ffff;
Font-Family: "Microsoft Yahei";
taille de police: 28px;
Texte-aligne: Centre;
Police-poids: Bold;
}
.dxj-ui-bd {
rembourrage: 0px;
marge: 0 auto;
Largeur: 778px;
Tableau de rembourrage: 30px;
Padding-Bottom: 30px;
débordement: caché;
Border: 1px solide # 3385FF;
}
.dxj-ui-bd #tab {
rembourrage: 0px;
marge: 0 auto;
Largeur: 720px;
débordement: caché;
}
.dxj-ui-bd #tab .Title {
Largeur: 720px;
débordement: caché;
Border-Bottom: 2px solide # 3385FF;
}
.dxj-ui-bd #tab .Title .adder {
Largeur: 160px;
hauteur: 32px;
hauteur de ligne: 32px;
Contexte: # DC143C;
Couleur: #ffff;
Font-Family: "Microsoft Yahei";
taille de police: 14px;
Texte-aligne: Centre;
Police-poids: Bold;
flottant: à gauche;
curseur: pointeur;
}
.dxj-ui-bd #tab .title .items {
hauteur: 32px;
marge-gauche: 20px;
Largeur: 540px;
débordement: caché;
flottant: à gauche;
}
.dxj-ui-bd #tab .title .items div {
rembourrage: 0px;
marge-gauche: 10px;
Largeur: 96px;
hauteur: 32px;
hauteur de ligne: 32px;
Contexte: # 3385FF;
Couleur: #ffff;
Font-Family: Arial;
taille de police: 12px;
Texte-aligne: Centre;
Position: relative;
flottant: à gauche;
curseur: pointeur;
}
.dxj-ui-bd #tab .title .items div span.del {
Largeur: 16px;
hauteur: 16px;
Heure de ligne: 16px;
Affichage: bloc;
Contexte: # DC143C;
Position: absolue;
à droite: 0;
en haut: 0;
curseur: pointeur;
}
.dxj-ui-bd #tab .Content {
Largeur: 716px;
Tableau de rembourrage: 30px;
débordement: caché;
Border: 2px solide # 3385FF;
Border-top: 0px;
Min-Height: 130px;
Texte-aligne: Centre;
}
.dxj-ui-bd #tab. Content Table {
marge: 0 auto;
}
.dxj-ui-bd #tab .content div.c {
Tableau de rembourrage: 20px;
Padding-Left: 20px;
Contexte: #eee;
hauteur: 140px;
}
.dxj-ui-bd #tab .content div.c .input-content {
marge: 10px;
Font-Family: Arial;
taille de police: 12px;
}
.dxj-ui-bd #tab .Console-Panel {
Largeur: 716px;
Tableau de rembourrage: 20px;
Padding-Bottom: 20px;
débordement: caché;
Border: 2px solide # 3385FF;
Border-top: 0px;
Border-Bottom: 2px solide # 3385FF;
Contexte: #FFF;
Affichage: aucun;
}
.actif {
Police-poids: Bold;
}
(3), le code JS est le suivant:
La copie de code est la suivante:
$ (function () {
bigbear.ui.createTab ($ ("# onglet"), {
ButtonText: "Ajouter le module",
résultat: [
{
Texte: "Invite de l'assistant",
URL: "Help.html",
showclose: "0",
Statut: "1"
},
{
Texte: "Informations sur les élèves",
URL: "info.html",
showclose: "1",
Statut: "1"
},
{
Texte: "Classification des élèves",
URL: "catégorie.html",
showclose: "1",
Statut: "1"
},
{
Texte: "Big Bear {{bb}}",
URL: "bb.html",
showclose: "1",
Statut: "1"
},
{
Texte: "Module de test bêta",
URL: "test.html",
showclose: "1",
Statut: "1"
}
]]
});
});
(fonction ($) {
var win = window;
var bb = win.bigbear = win.bigbear || {
ui: {}
};
var ui = bb.ui = {};
var tab = fonction (elem, opts) {
this.elem = elem;
this.opts = opts;
};
var tabproto = tab.prototype;
tabproto._deleteItem = fonction (item) {
var that = this;
this.getelem (). trouver (". Title .items div")
.eq (élément ["index"])
.fadeout (function () {
that._resetContent ();
that._updateStatus (item);
that._Triggertem (item ["index"] + 1);
that.getElem (). find (". Title .Adder"). Trigger ("Click");
});
};
tabproto._triggertem = fonction (suivant) {
var nextstatus = this._getStatus (suivant);
var items = this.getElem (). find (". Title .items div");
suivant = items.eq (suivant);
if (next.size () && "1" == nextStatus) {// Le nœud DOM suivant existe
next.trigger ("cliquez");
}
autre{
items.eq (0) .trigger ("cliquez");
}
};
tabproto._getstatus = fonction (index) {
var status = "";
$ .each (this.getOpts () ["result"], fonction (i, item) {
if (index == item ["index"]) {
status + = item ["status"];
retourne false;
}
});
statut de retour;
};
tabproto._updatestatus = fonction (item) {
var status = item ["status"];
élément ["statut"] = ("1" == statut)? "0": "1";
};
tabproto.init = function () {
var that = this;
this.getelem (). find (". Title .Adder")
.Text ("+" + this.getOpts () ["ButtonText"])
.on ("cliquez", fonction () {
that._toggleconsolepanel (function () {
var root = that.getElem (). trouver (". Console-Panel"). vide ();
$ .each (that.getOpts () ["result"], fonction (i, item) {
if ("0" == item ["status"]) {
var elem = $ ("<div style = 'float: Left';> </div>")
.Data ("article", article)
.APPENDTO (racine);
$ ("<input type = 'radio' name = 'addmod' />").appendto(elem);
$ ("<span> </span>"). Texte (élément ["texte"]). APPENDTO (elem);
}
});
if (root.find ("div"). size ()) {
$ ("<input type = 'bouton' value = 'ajouter module' style = 'margin-left: 20px' />")
.on ("cliquez", fonction () {
var data = root.find ("input [type = radio]: vérifié"). parent (). data ("item");
that._updatestatus (data);
that.getElem (). Rechercher (". Title .items div"). Eq (data ["index"]). fadein (). Trigger ("cliquez");
that.getElem (). find (". Title .Adder"). Trigger ("Click");
})
.APPENDTO (racine);
}
autre{
root.Text ("Pas encore d'éléments à ajouter!");
}
});
});
$ .each (this.getOpts () ["result"], fonction (i, item) {
item ["index"] = i;
that._render (item);
});
this.getelem (). trouver (". Title .items div")
.eq (0)
.trigger ("cliquez"); // Supposons qu'il doit y en avoir un, sinon le plug-in n'a pas beaucoup de sens!
};
tabproto._toggleconsolepanel = function (callback) {
this.getElem (). trouver (". Console-Panel"). Slidetoggle (fonction () {
$ .isfunction (callback) && callback ();
});
};
tabproto._resetContent = function () {
this.getElem (). trouver (". Content"). html ("");
};
tabproto._setContent = fonction (html) {
this.getElem (). trouver (". Content"). Html (html);
};
tabproto._getContent = fonction (url) {
return $ .ajax ({
URL: URL
});
};
tabproto._render = fonction (data) {
var that = this;
var item = $ ("<div> </div>")
.Text (données ["texte"])
.on ("cliquez", fonction () {
that._setCurrent (data ["index"]);
that._getContent (data ["URL"]). Done (fonction (result) {
that._setContent (résultat);
})
.fail (function () {
lancer une nouvelle erreur ("Erreur nette!");
});
})
.APPENDTO (this.getElem (). Find (". Title .Items")));
if ("1" == data ["showclose"]) {
$ ("<span class = 'del'> x </span>")
.on ("cliquez", fonction () {
if (win.confirm ("Cet élément est-il supprimé?")) {
that._deleteItem (data);
retourne false; // Arrête les bulles
}
})
.APPENDTO (article);
}
};
tabproto._setCurrent = fonction (index) {
var items = this.getElem (). find (". Title .Items div"). reposerlass ("active");
items.eq (index) .AddClass ("actif");
var contente = this.getElem (). trouver (". Content .c"). hide ();
contenu.eq (index) .show ();
};
tabproto.getElem = function () {
Renvoyez ce.elem;
};
tabproto.getopts = function () {
Renvoyez ceci.opts;
};
ui.createTab = fonction (elem, opts) {
var tab = new tab (elem, opts);
tab.init ();
Onglet Retour;
};
}) (jQuery);
(Iv), résumé final
(1) Une analyse raisonnable des exigences fonctionnelles d'une manière de penser orientée objet.
(2), organiser notre logique de plug-in de manière en classe.
(3) reconstruire en continu les exemples ci-dessus, comment reconstruire raisonnablement cela? Ne sur-des dessine, soyez à l'aise. La méthode recommandée consiste à combiner la conception de processus avec la conception de réflexion orientée objet.
(4) Renseignez-vous si les options dans l'onglet peuvent être classées indépendamment en classes distinctes dans l'exemple ci-dessus? Par exemple, "élément", puis comment modifier la classe "Tab"? Pensez avec des questions. . .
Ce qui précède est l'intégralité du contenu de cet article. Nous continuerons d'améliorer ce plug-in à l'avenir. Si vous aimez cet article, donnez-moi un coup de pouce.