1. Analyse d'ouverture
Salut tout le monde! Dans les deux premiers articles, nous parlons principalement de la façon de développer des plug-ins dans "JQuery's Way", et comment concevoir un plug-in en combinant la conception de processus avec la conception de pensée orientée objet. Les deux méthodes ont leurs avantages et leurs inconvénients à apprendre de leurs forces et de leurs faiblesses. Hehehe, parlons moins de bêtises et arrivons au point. Directement sur les rendus réels:
Vous pouvez le voir. Il s'agit d'un plug-in de menu déroulant. Dans notre développement quotidien, le système peut parfois nous faire sentir qu'il n'est pas très beau et a des fonctions limitées, ce qui fait que les utilisateurs
Le formulaire d'expérience et l'interactivité des utilisateurs ne sont pas très bons, donc aujourd'hui je simule un hehehehehe. 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:
$ (function () {
var itemSelector = new ItemSelector ($ ("# item-selector"), {
CurrentText: "Veuillez choisir l'élément",
articles: [
{
Texte: "javascript",
Valeur: "JS",
Désactivé: "1"
},
{
Texte: "CSS",
Valeur: "CSS",
Désactivé: "0"
},
{
Texte: "html",
valeur: "html",
Désactivé: "0"
}
],
MODE: "0", // Lorsque "1", il prend en charge le mode de sélection de la boîte à cocher
Changement: fonction (valeur) {
// Mettez votre code ici
}
});
itemSelector.init ();
setTimeout (function () {
console.log (itemSelector.getCurrentValue ()); // tester pour obtenir l'élément sélectionné d'abord
}, 2000);
"var itemSelector = new ItemSelector ()" contient deux paramètres. Le premier est l'objet Dom Node et le second est l'option de paramètre de plug-in. "CurrentText" représente la description du texte de la zone d'affichage du texte dans le plug-in "itemSelector".
"Éléments" est un tableau contenant les propriétés de l'élément "itemSelector", y compris la description du texte, la valeur de l'option, "Désable" représente la visubleness de l'entrée de la liste, 0 représente l'affichage et 1 représente ne pas s'afficher.
"Change" représente la fonction de rappel de l'opération lors de la sélection, et les données d'option seront renvoyées sous la forme de paramètres.
(2) Quelles sont les fonctions impliquées?
Les rendus qui peuvent être affichés sont les suivants:
Les rendus qui ne peuvent pas être affichés sont les suivants:
La différence entre les deux est: les données d'état non révélées ne seront pas renvoyées, et il n'y aura aucun effet lors du flottement.
3) Le code complet est 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 ------ itemSelector
</div>
<div>
<div id = "item-selector">
<div>
<div> </div> <span> ↓ </span>
</div>
<div>
<div>
</div>
</div>
</div>
</div>
</docy>
(2), CSS
La copie de code est la suivante:
/ * item-selector * /
# item-selector {
marge: 0 auto;
Largeur: 220px;
débordement: caché;
Border: 2px solide #ccc;
}
# item-selector .Title {
Border-Bottom: 1px solide #ccc;
débordement: caché;
}
# item-selector .Title div {
Largeur: 190px;
Border: 0px;
Couleur: # 999;
Font-Family: Arial;
taille de police: 14px;
hauteur: 28px;
hauteur de ligne: 28px;
flottant: à gauche;
curseur: pointeur;
}
# item-selector .Title Span {
Affichage: bloc;
hauteur: 30px;
hauteur de ligne: 30px;
Largeur: 29px;
flottant: à gauche;
Texte-aligne: Centre;
Border-Left: 1px solide #ccc;
curseur: pointeur;
}
# item-selector .Content {
Largeur: 220px;
débordement: caché;
}
# item-selector .Content .items {
débordement: caché;
}
# item-selector .Content .items div {
Padding-Left: 20px;
Largeur: 200px;
hauteur: 32px;
hauteur de ligne: 32px;
Font-Family: "Microsoft Yahei";
taille de police: 14px;
Police-poids: Bold;
curseur: pointeur;
}
.item-hover {
Contexte: # 3385FF;
Couleur: #ffff;
}
(3), "itemSelector.js"
La copie de code est la suivante:
Fonction élémentSelector (elem, opts) {
this.elem = elem;
this.opts = opts;
};
var isproto = itemSelector.prototype;
Isproto.getElem = function () {
Renvoyez ce.elem;
};
Isproto.getopts = function () {
Renvoyez ceci.opts;
};
/ * data manip * /
Isproto._setCurrent = fonction (courant) {
this.getOpts () ["Current"] = courant;
};
Isproto.getCurrentValue = fonction (courant) {
return this.getOpts () ["Current"];
};
/ * data manip * /
Isproto.init = function () {
var that = this;
this.getOpts () ["Current"] = null; // curseur de données
this._setItemValue (this.getOpts () ["currentText"]);
var itemSelem = that.getElem (). trouver (". Content .Items");
this.getElem (). trouver (". Title div"). sur ("cliquez", fonction () {
itemSelem.toggle ();
});
this.getElem (). trouver (". Title Span"). sur ("cliquez", fonction () {
itemSelem.toggle ();
});
$ .each (this.getOpts () ["items"], fonction (i, item) {
item ["id"] = (new Date (). getTime ()). toString ();
that._render (item);
});
};
Isproto._setItemValue = function (valeur) {
this.getElem (). trouver (". Title div"). texte (valeur)
};
Isproto._render = fonction (item) {
var that = this;
var itelsElem = $ ("<div> </div>")
.Text (élément ["texte"])
.attr ("id", item ["id"]);
if ("0" == item ["Disabled"]) {
itemlelem.on ("cliquez", fonction () {
var onchange = that.getOpts () ["change"];
that.getElem (). find (". Content .Items"). hide ();
that._setItemValue (item ["text"]);
that._setCurrent (item);
onchange && onchange (item);
})
.mouseOver (function () {
$ (this) .addclass ("item-hover");
})
.Mouseout (function () {
$ (this) .removeclass ("item-hover");
});
}
autre{
itemlelem.css ("Color", "# ccc"). sur ("cliquez", fonction () {
that.getElem (). find (". Content .Items"). hide ();
that._setItemValue (item ["text"]);
});
}
itelelem.appendto (this.getElem (). find (". Content .Items")));
};
(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) L'article suivant élargira les fonctions connexes, telles que le "mode" de la propriété. Lorsqu'il est "1", il prend en charge le mode Multi-Select Box, mais maintenant c'est juste le mode déroulant par défaut.
Cet article est d'abord ici, et nous continuerons à en discuter plus tard. J'espère que vous pourrez profiter de cette série d'articles.