1. Análisis de apertura
¡Hola a todos! En los dos primeros artículos, hablamos principalmente de cómo desarrollar complementos en "JQuery's Way" y cómo diseñar un complemento combinando el diseño de procesos con un diseño de pensamiento orientado a objetos. Ambos métodos tienen sus pros y contras para aprender de sus fortalezas y debilidades. Jejeje, hablemos menos tonterías, y lleguemos al grano. Directamente sobre las representaciones reales:
Puedes verlo. Este es un complemento de menú desplegable. En nuestro desarrollo diario, el sistema a veces puede hacernos sentir que no es muy hermoso y tiene funciones limitadas, lo que hace que los usuarios
El formulario de experiencia y la interactividad del usuario no son muy buenas, así que hoy simulo un jejejeje. Analicemos en detalle a continuación.
(Ii), análisis de casos
(1) Primero, determine qué hace este complemento. Echemos un vistazo al método de llamada del complemento y la descripción del parámetro de configuración. El siguiente código:
La copia del código es la siguiente:
$ (function () {
var itemSelector = new itemSelector ($ ("#item-selector"), {
CurrentText: "por favor elija el artículo",
elementos: [
{
Texto: "JavaScript",
Valor: "JS",
Desactivado: "1"
},
{
Texto: "CSS",
Valor: "CSS",
Desactivado: "0"
},
{
Texto: "html",
valor: "html",
Desactivado: "0"
}
]
Modo: "0", // Cuando "1", admite la casilla de verificación Modo de selección múltiple
Cambiar: función (valor) {
// Pon tu código aquí
}
});
itemselector.init ();
setTimeOut (function () {
console.log (itemSelector.getCurrentValue ()); // prueba para obtener el elemento seleccionado primero
}, 2000);
"VAR itemSelector = new itemSelector ()" contiene dos parámetros. El primero es el objeto DOM Node y el segundo es la opción de parámetro de complemento. "CurrentText" representa la descripción de texto del área de visualización de texto en el complemento "Elemselector".
"Elementos" es una matriz que contiene las propiedades del elemento "itemselector", incluida la descripción del texto, el valor de la opción, "deshabilitado" representa la visibilidad de la entrada de la lista, 0 representa la pantalla y 1 representa que no se mostrará.
"Cambiar" representa la función de devolución de llamada de operación cuando se selecciona, y los datos de opción se devolverán en forma de parámetros.
(2) ¿Cuáles son las funciones involucradas?
Las representaciones que se pueden mostrar son las siguientes:
Las representaciones que no se pueden mostrar son las siguientes:
La diferencia entre los dos es: los datos de estado no revelados no se devolverán, y no habrá ningún efecto al flotar.
3) El código completo es para aprender. Este código ha sido probado, incluida la estructura del directorio y los archivos relacionados.
(1), html
La copia del código es la siguiente:
<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>
</body>
(2), CSS
La copia del código es la siguiente:
/ * Artículo-selector */
#elemento-selector {
margen: 0 auto;
Ancho: 220px;
desbordamiento: oculto;
borde: 2px sólido #ccc;
}
#elemento-selector .title {
Border-Bottom: 1px Solid #CCC;
desbordamiento: oculto;
}
#elemento-selector .title div {
Ancho: 190px;
borde: 0px;
Color:#999;
Font-Family: Arial;
tamaño de fuente: 14px;
Altura: 28px;
Línea de altura: 28px;
flotante: izquierda;
cursor: puntero;
}
#elemento-selector .title-span {
Pantalla: bloque;
Altura: 30px;
Línea de altura: 30px;
Ancho: 29px;
flotante: izquierda;
Text-Align: Center;
Border-izquierda: 1px Solid #CCC;
cursor: puntero;
}
#elemento-selector .content {
Ancho: 220px;
desbordamiento: oculto;
}
#elemento-selector .content .Items {
desbordamiento: oculto;
}
#elemento-selector .content .Items div {
RODING-LUFE: 20px;
Ancho: 200px;
Altura: 32px;
Línea de altura: 32px;
Font-Family: "Microsoft Yahei";
tamaño de fuente: 14px;
Font-Weight: Bold;
cursor: puntero;
}
.Item-Hover {
Antecedentes:#3385ff;
Color: #ffff;
}
(3), "itemSelector.js"
La copia del código es la siguiente:
function itemSelector (elem, opts) {
this.Elem = Elem;
this.opts = opts;
};
var isproto = itemselector.prototype;
Isproto.getElem = function () {
devolver esto.Elem;
};
Isproto.getOpts = function () {
devolver esto.opts;
};
/* Manip de datos*/
Isproto._setCurrent = function (actual) {
this.getOpts () ["Current"] = Current;
};
Isproto.getCurrentValue = function (corriente) {
devuelve this.getOpts () ["actual"];
};
/* Manip de datos*/
Isproto.init = function () {
var que = esto;
this.getOpts () ["Current"] = null; // cursor de datos
this._setItemValue (this.getOpts () ["currentText"]);
var itemSelem = that.getElem (). Find (". Content .Items");
this.getElem (). Find (". Title Div"). ON ("Click", function () {
itemselem.toggle ();
});
this.getElem (). Find (". Title Span"). ON ("Click", function () {
itemselem.toggle ();
});
$ .each (this.getOpts () ["elementos"], function (i, item) {
item ["id"] = (nueva fecha (). gettime ()). toString ();
que._render (ítem);
});
};
Isproto._setitemValue = function (valor) {
this.getElem (). Find (". Title Div"). Text (valor)
};
Isproto._render = function (item) {
var que = esto;
var itemElem = $ ("<iv> </div>")
.Text (elemento ["texto"])
.attr ("id", elemento ["id"]);
if ("0" == item ["discapacitado"]) {
itemElem.on ("hacer clic", function () {
var onChange = that.getOpts () ["cambio"];
que.getElem (). Find (". Content .Items"). Hide ();
que._setItemValue (item ["Text"]);
que._setCurrent (elemento);
OnChange && onChange (item);
})
.MouseOver (function () {
$ (esto) .AddClass ("Artículo-balance");
})
.MouseOut (function () {
$ (this) .removeclass ("item-hover");
});
}
demás{
itemelem.css ("color", "#ccc"). on ("hacer clic", function () {
que.getElem (). Find (". Content .Items"). Hide ();
que._setItemValue (item ["Text"]);
});
}
itemElem.appendTo (this.getElem (). find (". content .Items")));
};
(Iv), resumen final
(1) Un análisis razonable de los requisitos funcionales en una forma de pensar orientada a objetos.
(2), organice nuestra lógica de complemento de manera de clase.
(3) Reconstruir continuamente los ejemplos anteriores, ¿cómo reconstruirlo razonablemente? No se diseñe en exceso, esté a gusto. El método recomendado es combinar el diseño del proceso con un diseño de pensamiento orientado a objetos.
(4) El siguiente artículo ampliará las funciones relacionadas, como la propiedad "Modo". Cuando es "1", es compatible con el modo de control de casilla de verificación, pero ahora es solo el modo desplegable predeterminado.
Este artículo ha terminado aquí primero, y continuaremos discutiéndolo más tarde. Espero que puedas disfrutar de esta serie de artículos.