1. Análisis de apertura
Hola, ¿todavía recuerdas el artículo anterior? Principalmente dice cómo un complemento de "pestaña" organiza el código y lo implementa, y cómo el diseño del proceso se combina con el 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. De este artículo, todavía nos centramos en esa instancia de "pestaña".
Continuar expandiendo las funciones relacionadas. Jejeje, diga menos tonterías, llega al punto. Directamente sobre las representaciones reales:
Lo has visto y se ha agregado una nueva característica. Si el número de entradas de nuestro elemento de información de configuración del módulo cuando se inicializamos es mayor de lo que especificamos, se mostrará en "más módulos"
En la lista oculta de elementos de operación, nuestra configuración de parámetros de inicialización también se ha ajustado recientemente, como un "DisplayMax" adicional para especificar el número de entradas en la inicialización y un atributo de elemento, "Estado"
Durante la inicialización, no se requiere configuración. La configuración dinámica se genera en el programa, que aumenta la flexibilidad del programa. 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:
{
Buttontext: "Agregar módulo",
resultado: [
{
Texto: "Aviso de asistente",
URL: "AYUD.HTML",
ShowClose: "0"
},
{
Texto: "Información del estudiante",
URL: "info.html",
ShowClose: "1"
},
{
Texto: "Clasificación de estudiantes",
URL: "Categoría.html",
ShowClose: "1"
},
{
Texto: "Big Bear {{bb}}",
URL: "bb.html",
ShowClose: "1"
},
{
Texto: "Módulo de prueba beta",
URL: "test.html",
ShowClose: "1"
},
{
Texto: "Tres hombres grasos",
URL: "AYUD.HTML",
ShowClose: "1"
},
{
Texto: "Cuatro hombres calvos",
URL: "AYUD.HTML",
ShowClose: "1"
}
]
DisplayMax: 5 // elementos de pantalla máximo
}
"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" también se elimina durante la inicialización y no requiere configuración, y la configuración se genera dinámicamente en el programa. Puede haber un estado cerrado, que se expresa como: pantalla de 1 definición, estado de 0-Off y 2, por lo que el número predeterminado de entradas.
(2) Las funciones se introducen en los pasos
1 ---, inicialice el complemento a través de parámetros opcionales:
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"
},
{
Texto: "Información del estudiante",
URL: "info.html",
ShowClose: "1"
},
{
Texto: "Clasificación de estudiantes",
URL: "Categoría.html",
ShowClose: "1"
},
{
Texto: "Big Bear {{bb}}",
URL: "bb.html",
ShowClose: "1"
},
{
Texto: "Módulo de prueba beta",
URL: "test.html",
ShowClose: "1"
},
{
Texto: "Tres hombres grasos",
URL: "AYUD.HTML",
ShowClose: "1"
},
{
Texto: "Cuatro hombres calvos",
URL: "AYUD.HTML",
ShowClose: "1"
}
]
DisplayMax: 5 // elementos de pantalla máximo
});
});
2 ---, renderizar y completar el tiempo de enlace y la lógica comercial relacionada, como la verificación del número de entradas durante la inicialización.
La copia del código es la siguiente:
tabproto.init = function () {
if (this._isEmptyResult ()) {
this._setContent ("¡No hay módulo todavía!");
}
var que = esto;
this.getElem (). Find (". Title .adder")
.Text (" +" + this.getOpts () ["Buttontext"])
.on ("hacer clic", function () {
that.getElem (). find (". Console-panel"). SlidEtoggle (function () {
que._renderconsolepanel ("0");
});
});
$ .each (this.getOpts () ["resultado"], function (i, item) {
if (that._isdisplaymax (i + 1)) {
que._saveorupdatestatus (elemento, "1");
}
demás{
que._saveorupdatestatus (elemento, "2");
}
que._render (ítem);
});
if (! that._isdisplaymax (this.getOpts () ["resultado"]. longitud)) {
this.getElem (). Find (". Title .more-MOD"). FadeIn (function () {
$ (this) .find (". etiqueta"). on ("hacer clic", function () {
var root = $ (this) .next ();
root.empty ();
$ .each (that._getItemListByStatus ("2"), function (i, data) {
$ ("<iv> </div>"). Text (datos ["Texto"])
.on ("hacer clic", function () {
if (that._getItemListByStatus ("1"). longitud <that.getOpts () ["displaymax"]) {
that.getElem (). find (". Title .Items div"). eq (data ["índice"]). fadein (function () {
que._saveorupdatestatus (datos, "1");
});
}
demás{
alerta ("No se pueden agregar módulos, ¡actualmente es el número máximo!");
}
})
.appendto (raíz);
});
root.toggle ();
});
});
}
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.
};
3 ---, conmutación de pestañas y operaciones de representación de contenido de datos.
La copia del código es la siguiente:
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 ();
};
La copia del código es la siguiente:
elemento.on ("hacer clic", function () {
que._setCurrent ($ (this) .index ());
that._getContent (data ["url"]). Done (function (resultado) {
que._setContent (resultado);
})
.fail (function () {
arrojar un nuevo error ("¡Error neto!");
});
})
La copia del código es la siguiente:
tabproto._setContent = function (html) {
this.getElem (). find (". content"). html (html);
};
tabproto._getContent = function (url) {
devolver $ .AJAX ({
URL: URL
});
};
4 ---, el método central de operación de datos auxiliares no involucra a DOM.
La copia del código es la siguiente:
/ * Tiempo de actualización 2015 1/26 15:36 */
tabproto._isdisplaymax = function (size) {
var displayMax = this.getOpts () ["DisplayMax"] || 5;
return (tamaño <= displaymax)? verdadero: falso;
};
tabproto._isemptyResult = function () {
if (! this.getOpts () ["resultado"]. Longitud) {
devolver falso;
}
devolver verdadero;
};
tabproto._saveorupdateTatus = function (elemento, status) {
item ["status"] = status;
};
tabproto._getitemListByStatus = function (status) {
var list = [];
resultado var = this.getOpts () ["resultado"];
$ .each (resultado, función (i, elemento) {
if (status == item ["status"]) {
list.push (elemento);
}
});
lista de devolución;
};
tabproto._getstatusbyindex = function (index) {
estado var = nulo;
resultado var = this.getOpts () ["resultado"];
$ .each (resultado, función (i, elemento) {
if (index == item ["index"]) {
status = item ["status"];
}
});
estado de retorno;
};
(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> más módulos </div>
<div>
</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, 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;
Posición: relativo;
}
.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 .more-mod {
desbordamiento: oculto;
borde: 1px sólido #dc143c;
Ancho: 70px;
Posición: Absoluto;
Derecha: 0;
margen-derecha: 6px;
Pantalla: ninguno;
}
.dxj-ui-bd #tab .title .more-mod .tag {
Altura: 32px;
Línea de altura: 32px;
Ancho: 70px;
Antecedentes: #DC143C;
Color: #ffff;
Font-Family: Arial;
tamaño de fuente: 12px;
Text-Align: Center;
cursor: puntero;
}
.dxj-ui-bd #tab .title .more-mod .mods {
desbordamiento: oculto;
Ancho: 70px;
Pantalla: ninguno;
}
.dxj-ui-bd #tab .title .more-mod .mods div {
Altura: 24px;
Línea-aguja: 24px;
Ancho: 62px;
Font-Family: Arial;
tamaño de fuente: 12px;
cursor: puntero;
ROLDE-LEFT: 10px;
}
.dxj-ui-bd #tab .title .Items {
Altura: 32px;
Ancho: 480px;
desbordamiento: oculto;
flotante: izquierda;
}
.dxj-ui-bd #tab .title .Items div {
relleno: 0px;
margen-izquierda: 10px;
Ancho: 84px;
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, bigbear.js
La copia del código es la siguiente:
(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;
/ * Tiempo de actualización 2015 1/26 15:36 */
tabproto._isdisplaymax = function (size) {
var displayMax = this.getOpts () ["DisplayMax"] || 5;
return (tamaño <= displaymax)? verdadero: falso;
};
tabproto._isemptyResult = function () {
if (! this.getOpts () ["resultado"]. Longitud) {
devolver falso;
}
devolver verdadero;
};
tabproto._saveorupdateTatus = function (elemento, status) {
item ["status"] = status;
};
tabproto._getitemListByStatus = function (status) {
var list = [];
resultado var = this.getOpts () ["resultado"];
$ .each (resultado, función (i, elemento) {
if (status == item ["status"]) {
list.push (elemento);
}
});
lista de devolución;
};
tabproto._getstatusbyindex = function (index) {
estado var = nulo;
resultado var = this.getOpts () ["resultado"];
$ .each (resultado, función (i, elemento) {
if (index == item ["index"]) {
status = item ["status"];
}
});
estado de retorno;
};
tabproto._renderconsolePanel = function (status) {
var que = esto;
var root = that.getElem (). Find (". Console-panel");
this._resetconsolePanel ();
$ .each (that._getItemListByStatus (status), function (i, item) {
var elem = $ ("<div style = 'float: left';> </div>"). appendTo (root);
$ ("<input type = 'radio' name = 'addmod' />")
.Data ("Artículo", artículo)
.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"). Data ("item");
if (that._getItemListByStatus ("1"). longitud <that.getOpts () ["displaymax"]) {
that.getElem (). find (". Title .Items div"). eq (data ["índice"]). fadein (function () {
que._saveorupdatestatus (datos, "1");
})
.grager ("hacer clic");
}
demás{
que._saveorupdatestatus (datos, "2");
}
que.getElem (). find (". Title .adder"). Trigger ("Click");
})
.appendto (raíz);
}
demás{
root.text ("¡No hay elementos para agregar todavía!");
}
};
/ * Tiempo de actualización 2015 1/26 15:36 */
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;
};
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._deleteitem = function (elem) {
var que = esto;
this.getElem (). Find (". Title .Items Div")
.eq (elem.index ())
.fadeOut (function () {
que._resetContent ();
que._saveorupdatestatus (elem.data ("item"), "0");
that._triggerItem (elem.index () + 1);
});
};
tabproto._triggeritem = function (next) {
var nextStatus = this._getStatusByIndex (Next);
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._resetconsolePanel = function () {
this.getElem (). Find (". Console-panel"). vacía ();
};
tabproto.init = function () {
if (this._isEmptyResult ()) {
this._setContent ("¡No hay módulo todavía!");
}
var que = esto;
this.getElem (). Find (". Title .adder")
.Text (" +" + this.getOpts () ["Buttontext"])
.on ("hacer clic", function () {
that.getElem (). find (". Console-panel"). SlidEtoggle (function () {
que._renderconsolepanel ("0");
});
});
$ .each (this.getOpts () ["resultado"], function (i, item) {
if (that._isdisplaymax (i + 1)) {
que._saveorupdatestatus (elemento, "1");
}
demás{
que._saveorupdatestatus (elemento, "2");
}
que._render (ítem);
});
if (! that._isdisplaymax (this.getOpts () ["resultado"]. longitud)) {
this.getElem (). Find (". Title .more-MOD"). FadeIn (function () {
$ (this) .find (". etiqueta"). on ("hacer clic", function () {
var root = $ (this) .next ();
root.empty ();
$ .each (that._getItemListByStatus ("2"), function (i, data) {
$ ("<iv> </div>"). Text (datos ["Texto"])
.on ("hacer clic", function () {
if (that._getItemListByStatus ("1"). longitud <that.getOpts () ["displaymax"]) {
that.getElem (). find (". Title .Items div"). eq (data ["índice"]). fadein (function () {
que._saveorupdatestatus (datos, "1");
});
}
demás{
alerta ("No se pueden agregar módulos, ¡actualmente es el número máximo!");
}
})
.appendto (raíz);
});
root.toggle ();
});
});
}
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._render = function (data) {
var que = esto;
var item = $ ("<Viv> </div>"). Text (Data ["Text"]). AppendTo (this.getElem (). Find (". Title .Items")));
datos ["índice"] = item.Index ();
elemento.on ("hacer clic", function () {
que._setCurrent ($ (this) .index ());
that._getContent (data ["url"]). Done (function (resultado) {
que._setContent (resultado);
})
.fail (function () {
arrojar un nuevo error ("¡Error neto!");
});
})
.data ("ítem", datos);
if ("2" == data ["status"]) {
item.phide ();
}
if ("1" == data ["showclose"]) {
$ ("<span class = 'del'> x </span>")
.on ("hacer clic", function () {
if (win.confirm ("¿se elimina este artículo?") {
que._deleteItem (item);
devolver falso; // detener burbujas
}
})
.AppendTo (ítem);
}
};
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.