1. Analyse d'ouverture
Salut, vous souvenez-vous encore de l'article précédent? Il raconte principalement comment un plugin "onglet" organise le code et l'implémente, et comment la conception de processus est combinée avec la conception de pensée orientée objet est
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. À partir de cet article, nous nous concentrons toujours sur cette instance "onglet".
Continuez à étendre les fonctions connexes. Hehehe, disons moins de bêtises, arrivez au point. Directement sur les rendus réels:
Vous l'avez vu et une nouvelle fonctionnalité a été ajoutée. Si le nombre d'entrées de notre élément d'information de configuration de module lorsque nous initialisons est supérieur à ce que nous spécifions, il sera affiché dans "plus de modules"
Dans la liste cachée des éléments d'opération, notre configuration du paramètre d'initialisation a également été nouvellement ajustée, comme un "DisplayMax" supplémentaire pour spécifier le nombre d'entrées à l'initialisation et un attribut d'élément, "statut"
Pendant l'initialisation, aucune configuration n'est requise. La configuration dynamique est générée dans le programme, ce qui augmente la flexibilité du programme. Analyons-le 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:
{
ButtonText: "Ajouter le module",
résultat: [
{
Texte: "Invite de l'assistant",
URL: "Help.html",
showClose: "0"
},
{
Texte: "Informations sur les élèves",
URL: "info.html",
ShowClose: "1"
},
{
Texte: "Classification des élèves",
URL: "catégorie.html",
ShowClose: "1"
},
{
Texte: "Big Bear {{bb}}",
URL: "bb.html",
ShowClose: "1"
},
{
Texte: "Module de test bêta",
URL: "test.html",
ShowClose: "1"
},
{
Texte: "Trois hommes gras",
URL: "Help.html",
ShowClose: "1"
},
{
Texte: "Quatre hommes chauves",
URL: "Help.html",
ShowClose: "1"
}
],
DisplayMax: 5 // Affichage maximum
}
"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" est également supprimé lors de l'initialisation et ne nécessite pas de configuration, et la configuration est générée dynamiquement dans le programme. Il peut y avoir un état fermé, qui est exprimé comme: Affichage à 1 défaut, statut 0 et 2-Thon le nombre par défaut des entrées.
(2) les fonctions sont introduites en étapes
1 ---, initialisez le plug-in via des paramètres facultatifs:
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"
},
{
Texte: "Informations sur les élèves",
URL: "info.html",
ShowClose: "1"
},
{
Texte: "Classification des élèves",
URL: "catégorie.html",
ShowClose: "1"
},
{
Texte: "Big Bear {{bb}}",
URL: "bb.html",
ShowClose: "1"
},
{
Texte: "Module de test bêta",
URL: "test.html",
ShowClose: "1"
},
{
Texte: "Trois hommes gras",
URL: "Help.html",
ShowClose: "1"
},
{
Texte: "Quatre hommes chauves",
URL: "Help.html",
ShowClose: "1"
}
],
DisplayMax: 5 // Affichage maximum
});
});
2 ---, rendre et compléter la liaison du temps et la logique commerciale connexe, comme la vérification du nombre d'entrées pendant l'initialisation.
La copie de code est la suivante:
tabproto.init = function () {
if (this._isempTyResult ()) {
this._setContent ("Pas encore de module!");
}
var that = this;
this.getelem (). find (". Title .Adder")
.Text ("+" + this.getOpts () ["ButtonText"])
.on ("cliquez", fonction () {
that.getElem (). trouver (". Console-Panel"). Slidetoggle (function () {
that._renderconsolepanel ("0");
});
});
$ .each (this.getOpts () ["result"], fonction (i, item) {
if (that._isDisplayMax (i + 1)) {
that._saveOrUpDateStatus (item, "1");
}
autre{
that._saveOrUpDateStatus (item, "2");
}
that._render (item);
});
if (! that._isDisplayMax (this.getOpts () ["result"]. Longueur)) {
this.getElem (). find (". Title .more-mod"). fadein (function () {
$ (this) .find (". tag"). sur ("cliquez", fonction () {
var root = $ (this) .next ();
root.empty ();
$ .each (that._getItemListByStatus ("2"), fonction (i, data) {
$ ("<div> </div>"). Texte (données ["texte"])
.on ("cliquez", fonction () {
if (that._getItemListByStatus ("1"). Longueur <That.getOpts () ["DisplayMax"]) {
that.getElem (). find (". title .items div"). eq (data ["index"]). fadein (function () {
that._saveorupdatestatus (data, "1");
});
}
autre{
alerte ("Aucun module ne peut être ajouté, c'est actuellement le nombre maximum!");
}
})
.APPENDTO (racine);
});
root.toggle ();
});
});
}
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!
};
3 ---, opérations de commutation d'onglet et de contenu de données.
La copie de code est la suivante:
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 ();
};
La copie de code est la suivante:
item.on ("cliquez", fonction () {
that._setCurrent ($ (this) .index ());
that._getContent (data ["URL"]). Done (fonction (result) {
that._setContent (résultat);
})
.fail (function () {
lancer une nouvelle erreur ("Erreur nette!");
});
})
La copie de code est la suivante:
tabproto._setContent = fonction (html) {
this.getElem (). trouver (". Content"). Html (html);
};
tabproto._getContent = fonction (url) {
return $ .ajax ({
URL: URL
});
};
4 ---, la méthode de fonctionnement des données auxiliaire noyau n'implique pas DOM.
La copie de code est la suivante:
/ * Mettre à jour le temps 2015 1/26 15:36 * /
TabProto._isDisplayMax = fonction (taille) {
var displayMax = this.getOpts () ["DisplayMax"] || 5;
return (size <= displayMax)? vrai: false;
};
tabproto._isempTyResult = function () {
if (! this.getOpts () ["result"]. longueur) {
retourne false;
}
Retour Vrai;
};
tabproto._saveorupdatestatus = fonction (item, status) {
élément ["statut"] = statut;
};
tabproto._getItemListByStatus = fonction (status) {
var list = [];
var result = this.getOpts () ["résultat"];
$ .each (résultat, fonction (i, item) {
if (status == item ["status"]) {
list.push (item);
}
});
Liste de retour;
};
tabproto._getStatusByIndex = fonction (index) {
var status = null;
var result = this.getOpts () ["résultat"];
$ .each (résultat, fonction (i, item) {
if (index == item ["index"]) {
status = item ["status"];
}
});
statut de retour;
};
(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> Plus de modules </div>
<div>
</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, 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é;
Position: relative;
}
.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 .more-mod {
débordement: caché;
Border: 1px solide # dc143c;
Largeur: 70px;
Position: absolue;
à droite: 0;
marge-droite: 6px;
Affichage: aucun;
}
.dxj-ui-bd #tab .title .more-mod .tag {
hauteur: 32px;
hauteur de ligne: 32px;
Largeur: 70px;
Contexte: # DC143C;
Couleur: #ffff;
Font-Family: Arial;
taille de police: 12px;
Texte-aligne: Centre;
curseur: pointeur;
}
.dxj-ui-bd #tab .title .more-mod .mods {
débordement: caché;
Largeur: 70px;
Affichage: aucun;
}
.dxj-ui-bd #tab .title .more-mod .mods div {
hauteur: 24px;
hauteur de ligne: 24px;
Largeur: 62px;
Font-Family: Arial;
taille de police: 12px;
curseur: pointeur;
padding-gauche: 10px;
}
.dxj-ui-bd #tab .title .items {
hauteur: 32px;
Largeur: 480px;
débordement: caché;
flottant: à gauche;
}
.dxj-ui-bd #tab .title .items div {
rembourrage: 0px;
marge-gauche: 10px;
Largeur: 84px;
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, bigbear.js
La copie de code est la suivante:
(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;
/ * Mettre à jour le temps 2015 1/26 15:36 * /
TabProto._isDisplayMax = fonction (taille) {
var displayMax = this.getOpts () ["DisplayMax"] || 5;
return (size <= displayMax)? vrai: false;
};
tabproto._isempTyResult = function () {
if (! this.getOpts () ["result"]. longueur) {
retourne false;
}
Retour Vrai;
};
tabproto._saveorupdatestatus = fonction (item, status) {
élément ["statut"] = statut;
};
tabproto._getItemListByStatus = fonction (status) {
var list = [];
var result = this.getOpts () ["résultat"];
$ .each (résultat, fonction (i, item) {
if (status == item ["status"]) {
list.push (item);
}
});
Liste de retour;
};
tabproto._getStatusByIndex = fonction (index) {
var status = null;
var result = this.getOpts () ["résultat"];
$ .each (résultat, fonction (i, item) {
if (index == item ["index"]) {
status = item ["status"];
}
});
statut de retour;
};
TabProto._RenderConSolepanel = fonction (status) {
var that = this;
var root = that.getElem (). trouver (". Console-Panel");
this._resetConsolepanel ();
$ .each (that._getItemListByStatus (status), fonction (i, item) {
var elem = $ ("<div style = 'float: Left';> </div>"). APPENDTO (root);
$ ("<input type = 'radio' name = 'addmod' />")
.Data ("article", article)
.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é"). data ("item");
if (that._getItemListByStatus ("1"). Longueur <That.getOpts () ["DisplayMax"]) {
that.getElem (). find (". title .items div"). eq (data ["index"]). fadein (function () {
that._saveorupdatestatus (data, "1");
})
.trigger ("cliquez");
}
autre{
that._saveOrUpDateStatus (data, "2");
}
that.getElem (). find (". Title .Adder"). Trigger ("Click");
})
.APPENDTO (racine);
}
autre{
root.Text ("Pas encore d'éléments à ajouter!");
}
};
/ * Mettre à jour le temps 2015 1/26 15:36 * /
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;
};
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._deleteItem = fonction (elem) {
var that = this;
this.getelem (). trouver (". Title .items div")
.eq (elem.index ())
.fadeout (function () {
that._resetContent ();
that._saveorupdatestatus (elem.data ("item"), "0");
that._triggertem (elem.index () + 1);
});
};
tabproto._triggertem = fonction (suivant) {
var nextstatus = this._getStatusByIndex (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._resetconsolepanel = function () {
this.getElem (). trouver (". Console-Panel"). vide ();
};
tabproto.init = function () {
if (this._isempTyResult ()) {
this._setContent ("Pas encore de module!");
}
var that = this;
this.getelem (). find (". Title .Adder")
.Text ("+" + this.getOpts () ["ButtonText"])
.on ("cliquez", fonction () {
that.getElem (). trouver (". Console-Panel"). Slidetoggle (function () {
that._renderconsolepanel ("0");
});
});
$ .each (this.getOpts () ["result"], fonction (i, item) {
if (that._isDisplayMax (i + 1)) {
that._saveOrUpDateStatus (item, "1");
}
autre{
that._saveOrUpDateStatus (item, "2");
}
that._render (item);
});
if (! that._isDisplayMax (this.getOpts () ["result"]. Longueur)) {
this.getElem (). find (". Title .more-mod"). fadein (function () {
$ (this) .find (". tag"). sur ("cliquez", fonction () {
var root = $ (this) .next ();
root.empty ();
$ .each (that._getItemListByStatus ("2"), fonction (i, data) {
$ ("<div> </div>"). Texte (données ["texte"])
.on ("cliquez", fonction () {
if (that._getItemListByStatus ("1"). Longueur <That.getOpts () ["DisplayMax"]) {
that.getElem (). find (". title .items div"). eq (data ["index"]). fadein (function () {
that._saveorupdatestatus (data, "1");
});
}
autre{
alerte ("Aucun module ne peut être ajouté, c'est actuellement le nombre maximum!");
}
})
.APPENDTO (racine);
});
root.toggle ();
});
});
}
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._render = fonction (data) {
var that = this;
var item = $ ("<div> </div>"). text (data ["text"]). APPENDTO (this.getElem (). find (". title .items")));
data ["index"] = item.index ();
item.on ("cliquez", fonction () {
that._setCurrent ($ (this) .index ());
that._getContent (data ["URL"]). Done (fonction (result) {
that._setContent (résultat);
})
.fail (function () {
lancer une nouvelle erreur ("Erreur nette!");
});
})
.data ("item", données);
if ("2" == data ["status"]) {
item.hide ();
}
if ("1" == data ["showclose"]) {
$ ("<span class = 'del'> x </span>")
.on ("cliquez", fonction () {
if (win.confirm ("Cet élément est-il supprimé?")) {
that._deleteItem (item);
retourne false; // Arrête les bulles
}
})
.APPENDTO (article);
}
};
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.