1. Análisis de apertura
En los dos artículos anteriores, hablamos principalmente sobre cómo desarrollar complementos en jQuery y cómo combinar el diseño del proceso con un diseño de pensamiento orientado a objetos.
¿Cómo diseñar un complemento? Los dos métodos tienen sus propias ventajas y desventajas para aprender de las fortalezas y debilidades de los demás. Esta serie de artículos está orientado al aprendizaje, y todos deciden cómo usar los escenarios específicos. Entonces, a partir de este artículo hoy, utilizaremos ejemplos para desarrollar nuestra propia biblioteca de complementos de superficie a profundo. Jejeje, diga menos tonterías, llega al punto. Directamente sobre las representaciones reales:
Puedes verlo. Este es un complemento de pestaña. Podemos encontrarlo cuando realizamos aplicaciones de una sola página ("spa") todos los días. Tomemos el ejemplo de hoy.
Construimos un sistema basado en la estructura BS, que consistirá en varios módulos, que son todos los componentes del sistema de construcción. A través de este complemento, podemos administrar de manera efectiva nuestros módulos
Analicemos el formulario de experiencia y la interactividad del usuario 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:
bigbear.ui.createTab ($ ("#tab"), {
Buttontext: "Agregar módulo",
resultado: [
{
Texto: "Aviso de asistente",
URL: "AYUD.HTML",
ShowClose: "0",
Estado: "1"
},
{
Texto: "Información del estudiante",
URL: "info.html",
ShowClose: "1",
Estado: "1"
},
{
Texto: "Clasificación de estudiantes",
URL: "Categoría.html",
ShowClose: "1",
Estado: "1"
},
{
Texto: "Big Bear {{bb}}",
URL: "bb.html",
ShowClose: "1",
Estado: "1"
},
{
Texto: "Módulo de prueba beta",
URL: "test.html",
ShowClose: "1",
Estado: "1"
}
]
});
"Bigbear.ui.CreateTab" contiene dos parámetros. El primero es el objeto DOM Node y el segundo es la opción de parámetro de complemento. "Buttontext" representa la descripción del texto del botón de operación en el complemento "pestaña".
"Result" es una matriz que contiene las propiedades del elemento de pestaña, incluida la descripción del texto, la URL utilizada para solicitarla al hacer clic en el elemento de la pestaña, "ShowClose" representa si la opción de pestaña muestra el botón Cerrar.
El "estado" representa el estado de la opción, que es el estado en defecto de forma predeterminada, y puede haber un estado cerrado, que se expresa como: 1-Open y 0-Open respectivamente.
(2) ¿Cuáles son las funciones involucradas?
A través de parámetros opcionales, las entradas de opción relevantes se generan dinámicamente, de la siguiente manera:
La copia del código es la siguiente:
bigbear.ui.createTab ($ ("#tab"), {
Buttontext: "Agregar módulo",
resultado: [
{
Texto: "Análisis del código fuente jQuery",
URL: "AYUD.HTML",
ShowClose: "0",
Estado: "1"
},
{
Texto: "Big Bear {{bb}}}",
URL: "bb.html",
ShowClose: "1",
Estado: "1"
}
]
});
El efecto es el siguiente:
Puede agregar y eliminar libremente opciones de entradas, como se muestra en el siguiente efecto:
La imagen de arriba muestra una de estas situaciones. Cuando no hay módulo, se solicitará un mensaje.
Este es el segundo caso, y los que se eliminaron previamente se pueden restaurar.
(Iii), Código completo para el aprendizaje , 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 ------ Tab
</div>
<div>
<div id = "tab">
<div>
<div>
+ Agregar información del estudiante
</div>
<div>
<!-<div> <span> x </span> Página de bienvenida </div>
<div> <span> x </span> gestión de usuarios </div>
<Viv> <span> x </span> bigbear </div>->
</div>
</div>
<div>
</div>
<div>
<!-<div>
<div> <span> nombre: </span> <input type = "text"/> </div>
<div> <span> nota: </span> <xtexarea> </textarea> </div>
</div> <div> <input type = "button" value = "save"/> </div>
->
</div>
</div>
</div>
</body>
(2), código de archivo CSS
La copia del código es la siguiente:
.dxj-ui-hd {
relleno: 0px;
margen: 0 auto;
margen-top: 30px;
Ancho: 780px;
Altura: 60px;
Alganche de línea: 60px;
Antecedentes: #3385ff;
Color: #ffff;
Font-Family: "Microsoft Yahei";
tamaño de fuente: 28px;
Text-Align: Center;
Font-Weight: Bold;
}
.dxj-ui-bd {
relleno: 0px;
margen: 0 auto;
Ancho: 778px;
Top-top: 30px;
Bootomio: 30px;
desbordamiento: oculto;
Border: 1px Solid #3385ff;
}
.dxj-ui-bd #tab {
relleno: 0px;
margen: 0 auto;
Ancho: 720px;
desbordamiento: oculto;
}
.dxj-ui-bd #tab .title {
Ancho: 720px;
desbordamiento: oculto;
Border-Bottom: 2px Solid #3385ff;
}
.dxj-ui-bd #tab .title .adder {
Ancho: 160px;
Altura: 32px;
Línea de altura: 32px;
Antecedentes: #DC143C;
Color: #ffff;
Font-Family: "Microsoft Yahei";
tamaño de fuente: 14px;
Text-Align: Center;
Font-Weight: Bold;
flotante: izquierda;
cursor: puntero;
}
.dxj-ui-bd #tab .title .Items {
Altura: 32px;
margen-izquierda: 20px;
Ancho: 540px;
desbordamiento: oculto;
flotante: izquierda;
}
.dxj-ui-bd #tab .title .Items div {
relleno: 0px;
margen-izquierda: 10px;
Ancho: 96px;
Altura: 32px;
Línea de altura: 32px;
Antecedentes: #3385ff;
Color: #ffff;
Font-Family: Arial;
tamaño de fuente: 12px;
Text-Align: Center;
Posición: relativo;
flotante: izquierda;
cursor: puntero;
}
.dxj-ui-bd #tab .title .Items div span.del {
Ancho: 16px;
Altura: 16px;
Línea de altura: 16px;
Pantalla: bloque;
Antecedentes: #DC143C;
Posición: Absoluto;
Derecha: 0;
arriba: 0;
cursor: puntero;
}
.dxj-ui-bd #tab .content {
Ancho: 716px;
Top-top: 30px;
desbordamiento: oculto;
Border: 2px Solid #3385ff;
border-top: 0px;
Min-altura: 130px;
Text-Align: Center;
}
.dxj-ui-bd #tab .content table {
margen: 0 auto;
}
.dxj-ui-bd #tab .content div.c {
Top-top: 20px;
RODING-LUFE: 20px;
Antecedentes: #EEE;
Altura: 140px;
}
.dxj-ui-bd #tab .content div.c .input-contento {
margen-top: 10px;
Font-Family: Arial;
tamaño de fuente: 12px;
}
.dxj-ui-bd #tab .console-panel {
Ancho: 716px;
Top-top: 20px;
Botón de relleno: 20px;
desbordamiento: oculto;
Border: 2px Solid #3385ff;
border-top: 0px;
Border-Bottom: 2px Solid #3385ff;
Antecedentes: #fff;
Pantalla: ninguno;
}
.activo {
Font-Weight: Bold;
}
(3), el código JS es el siguiente:
La copia del código es la siguiente:
$ (function () {
bigbear.ui.createTab ($ ("#tab"), {
Buttontext: "Agregar módulo",
resultado: [
{
Texto: "Aviso de asistente",
URL: "AYUD.HTML",
ShowClose: "0",
Estado: "1"
},
{
Texto: "Información del estudiante",
URL: "info.html",
ShowClose: "1",
Estado: "1"
},
{
Texto: "Clasificación de estudiantes",
URL: "Categoría.html",
ShowClose: "1",
Estado: "1"
},
{
Texto: "Big Bear {{bb}}",
URL: "bb.html",
ShowClose: "1",
Estado: "1"
},
{
Texto: "Módulo de prueba beta",
URL: "test.html",
ShowClose: "1",
Estado: "1"
}
]
});
});
(función ($) {
var win = ventana;
var bb = win.bigbear = win.bigbear || {
ui: {}
};
var ui = bb.ui = {};
var tab = function (elem, opts) {
this.Elem = Elem;
this.opts = opts;
};
var tabproto = tab.prototype;
tabproto._deleteitem = function (elemento) {
var que = esto;
this.getElem (). Find (". Title .Items Div")
.eq (item ["índice"])
.fadeOut (function () {
que._resetContent ();
que._updatestatus (elemento);
que._triggerItem (item ["índice"] + 1);
que.getElem (). find (". Title .adder"). Trigger ("Click");
});
};
tabproto._triggeritem = function (next) {
var nextStatus = this._getStatus (siguiente);
VAR items = this.getElem (). Find (". Title .Items Div");
next = items.eq (siguiente);
if (next.size () && "1" == nextStatus) {// El nodo DOM posterior existe
next.Rigger ("hacer clic");
}
demás{
items.eq (0) .grager ("hacer clic");
}
};
tabproto._getstatus = function (index) {
estado var = "";
$ .each (this.getOpts () ["resultado"], function (i, item) {
if (index == item ["index"]) {
status += item ["status"];
devolver falso;
}
});
estado de retorno;
};
tabproto._updatestatus = function (elemento) {
status var = item ["status"];
item ["status"] = ("1" == estado)? "0": "1";
};
tabproto.init = function () {
var que = esto;
this.getElem (). Find (". Title .adder")
.Text (" +" + this.getOpts () ["Buttontext"])
.on ("hacer clic", function () {
que._TogGleconsolePanel (function () {
var root = that.getElem (). Find (". Console-panel"). vacía ();
$ .each (that.getOpts () ["resultado"], function (i, item) {
if ("0" == item ["status"]) {
var elem = $ ("<div style = 'float: left';> </div>")
.Data ("Artículo", artículo)
.appendto (raíz);
$ ("<input type = 'radio' name = 'addmod' />").appendto(elem);
$ ("<span> </span>"). Text (item ["Text"]). AppendTo (Elem);
}
});
if (root.find ("div"). size ()) {
$ ("<input type = 'button' value = 'Agregar módulo' style = 'margen-izquierda: 20px'/>")
.on ("hacer clic", function () {
var data = root.find ("input [type = radio]: checked"). parent (). data ("elemento");
que._updatestatus (datos);
that.getElem (). find (". Title .Items div"). eq (datos ["índice"]). fadein (). Trigger ("Click");
que.getElem (). find (". Title .adder"). Trigger ("Click");
})
.appendto (raíz);
}
demás{
root.text ("¡No hay elementos para agregar todavía!");
}
});
});
$ .each (this.getOpts () ["resultado"], function (i, item) {
item ["índice"] = i;
que._render (ítem);
});
this.getElem (). Find (". Title .Items Div")
.eq (0)
.grager ("hacer clic"); // Suponga que debe haber uno, de lo contrario, el complemento no tendrá mucho sentido.
};
TabProto._ToggleconsolePanel = function (Callback) {
this.getElem (). Find (". Console-panel"). SlidEtoggle (function () {
$ .ISFUNTION (Callback) && Callback ();
});
};
tabproto._resetContent = function () {
this.getElem (). Find (". Content"). Html ("");
};
tabproto._setContent = function (html) {
this.getElem (). find (". content"). html (html);
};
tabproto._getContent = function (url) {
devolver $ .AJAX ({
URL: URL
});
};
tabproto._render = function (data) {
var que = esto;
var item = $ ("<iv> </div>")
.Text (datos ["texto"])
.on ("hacer clic", function () {
que._setCurrent (datos ["índice"]);
that._getContent (data ["url"]). Done (function (resultado) {
que._setContent (resultado);
})
.fail (function () {
arrojar un nuevo error ("¡Error neto!");
});
})
.AppendTo (this.getElem (). find (". Title .Items")));
if ("1" == data ["showclose"]) {
$ ("<span class = 'del'> x </span>")
.on ("hacer clic", function () {
if (win.confirm ("¿se elimina este artículo?") {
que._deleteItem (datos);
devolver falso; // detener burbujas
}
})
.AppendTo (ítem);
}
};
tabproto._setCurrent = function (index) {
VAR items = this.getElem (). Find (". Title .Items Div"). RemoveClass ("Active");
items.eq (índice) .addclass ("activo");
Var contenido = this.getElem (). Find (". Content .C"). Hide ();
contenido.eq (índice) .show ();
};
tabproto.getElem = function () {
devolver esto.Elem;
};
tabproto.getOpts = function () {
devolver esto.opts;
};
ui.createTab = function (elem, opts) {
var tab = nueva pestaña (Elem, opts);
tab.init ();
pestaña de retorno;
};
}) (jQuery);
(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) ¿Piense en si las opciones en la pestaña se pueden clasificar de forma independiente en clases separadas en el ejemplo anterior? Por ejemplo, "elemento", ¿cómo modificar la clase "pestaña"? Piense con preguntas. . .
Lo anterior es todo el contenido de este artículo. Continuaremos mejorando este complemento en el futuro. Si te gusta este artículo, por favor dame un pulgar hacia arriba.