1. Análise de abertura
Olá, você ainda se lembra do artigo anterior? Ele diz principalmente como um plug-in "guia" organiza o código e o implementa, e como o design do processo é combinado com o design de pensamento orientado a objetos
Como projetar um plug-in? Os dois métodos têm suas próprias vantagens e desvantagens para aprender com os pontos fortes e fracos um do outro. Esta série de artigos é orientada para o aprendizado e todos decidem como usar os cenários específicos. A partir deste artigo, ainda focamos nessa instância "tab".
Continue a expandir as funções relacionadas. Hehehe, diga menos bobagem, chegue ao ponto. Diretamente nas renderizações reais:
Você já viu, e um novo recurso foi adicionado. Se o número de entradas do nosso item de informação de configuração do módulo quando estamos inicializando for maior do que especificarmos, ele será exibido em "mais módulos"
Na lista oculta de itens de operação, nossa configuração de parâmetros de inicialização também foi recém -ajustada, como um "DisplayMax" adicional para especificar o número de entradas na inicialização e um atributo de item, "status"
Durante a inicialização, nenhuma configuração é necessária. A configuração dinâmica é gerada no programa, o que aumenta a flexibilidade do programa. Vamos analisá -lo em detalhes abaixo.
(Ii), análise de casos
(1) Primeiro, determine o que este plugin faz. Vamos dar uma olhada no método de chamada do plug-in e na descrição do parâmetro de configuração. O seguinte código:
A cópia do código é a seguinte:
{
ButtonText: "Adicionar módulo",
Resultado: [
{
Texto: "Prompt de assistente",
URL: "Help.html",
showclose: "0"
},
{
Texto: "Informação do aluno",
url: "info.html",
ShowClose: "1"
},
{
Texto: "Classificação do aluno",
URL: "category.html",
ShowClose: "1"
},
{
Texto: "Big Bear {{bb}}",
url: "bb.html",
ShowClose: "1"
},
{
texto: "módulo de teste beta",
url: "test.html",
ShowClose: "1"
},
{
texto: "três homens gordurosos",
URL: "Help.html",
ShowClose: "1"
},
{
texto: "quatro homens carecas",
URL: "Help.html",
ShowClose: "1"
}
],
DisplayMax: 5 // itens máximos de exibição
}
"bigbear.ui.createTab" contém dois parâmetros. O primeiro é o objeto DOM Node e o segundo é a opção de parâmetro plug-in. "ButtonText" representa a descrição do texto do botão de operação no plug-in "da guia".
"Resultado" é uma matriz que contém as propriedades do item da guia, incluindo a descrição do texto, o URL usado para solicitá -lo ao clicar no item da guia "ShowClose" representa se a opção TAB exibe o botão Fechar.
"Status" também é removido durante a inicialização e não requer configuração, e a configuração é gerada dinamicamente no programa. Pode haver um estado fechado, que é expresso como: exibição de 1 padrão, status de 0 off e 2-o que o número padrão de entradas.
(2) As funções são introduzidas nas etapas
1 ---, inicialize o plug-in através dos parâmetros opcionais:
A cópia do código é a seguinte:
$ (function () {
bigbear.ui.createTab ($ ("#tab"), {
ButtonText: "Adicionar módulo",
Resultado: [
{
Texto: "Prompt de assistente",
URL: "Help.html",
showclose: "0"
},
{
Texto: "Informação do aluno",
url: "info.html",
ShowClose: "1"
},
{
Texto: "Classificação do aluno",
URL: "category.html",
ShowClose: "1"
},
{
Texto: "Big Bear {{bb}}",
url: "bb.html",
ShowClose: "1"
},
{
texto: "módulo de teste beta",
url: "test.html",
ShowClose: "1"
},
{
texto: "três homens gordurosos",
URL: "Help.html",
ShowClose: "1"
},
{
texto: "quatro homens carecas",
URL: "Help.html",
ShowClose: "1"
}
],
DisplayMax: 5 // itens máximos de exibição
});
});
2 ---, renderizar e encadear o tempo e a lógica de negócios relacionada, como a verificação do número de entradas durante a inicialização.
A cópia do código é a seguinte:
tabproto.init = function () {
if (this._isemptyResult ()) {
this._setContent ("Sem módulo ainda!");
}
var que = this;
this.getElem (). Find (". Título .Adder")
.Text (" +" + this.getOpts () ["ButtonText"]))
.on ("clique", function () {
that.getElem (). encontre (".
that._renderConsolePanel ("0");
});
});
$ .ECH (this.getOpts () ["resultado"], função (i, item) {
if (that._isDisplayMax (i + 1)) {
that._saveorupdatestatus (item, "1");
}
outro{
that._saveorupdatestatus (item, "2");
}
that._render (item);
});
if (! that._isDisplayMax (this.getOpts () ["resultado"]. comprimento)) {
this.getElem (). encontre (".
$ (this) .find (". tag"). on ("clique", function () {
var root = $ (this) .Next ();
root.Empty ();
$ .ECH (that._getItemListByStatus ("2"), function (i, dados) {
$ ("<div> </div>"). Texto (dados ["texto"]))
.on ("clique", function () {
if (that._getItemListByStatus ("1"). Comprimento <that.getOpts () ["DisplayMax"]) {
that.getElem (). encontre (". title .items div"). Eq (dados ["index"]). Fadein (function () {
that._saveorupdatestatus (dados, "1");
});
}
outro{
alerta ("nenhum módulo pode ser adicionado, atualmente é o número máximo!");
}
})
.AppendTo (raiz);
});
root.toggle ();
});
});
}
this.getElem (). Find (". Title .items div")
.eq (0)
.trigger ("clique"); // Suponha que deve haver um, caso contrário, o plug-in não fará muito sentido!
};
3 ---, comutação de guias e operações de renderização de conteúdo de dados.
A cópia do código é a seguinte:
tabproto._setCurrent = function (index) {
var itens = this.getElem (). find (". title .items div"). removeclass ("ativo");
items.eq (index) .addclass ("ativo");
var contents = this.getElem (). find (". Content .c"). hide ();
contents.eq (index) .show ();
};
A cópia do código é a seguinte:
item.on ("clique", function () {
that._setCurrent ($ (this) .Index ());
that._getContent (dados ["url"]).
that._setContent (resultado);
})
.Fail (function () {
lançar um novo erro ("Erro líquido!");
});
})
A cópia do código é a seguinte:
tabproto._setContent = function (html) {
this.getElem (). encontre (". Content"). html (html);
};
tabproto._getContent = function (url) {
retornar $ .ajax ({
URL: URL
});
};
4 ---, o método de operação de dados auxiliares do núcleo não envolve DOM.
A cópia do código é a seguinte:
/ * Atualizar tempo de 2015 1/26 15:36 */
tabproto._isDisplaymax = function (size) {
var displayMax = this.getOpts () ["DisplayMax"] || 5;
return (tamanho <= displaymax)? Verdadeiro: falso;
};
tabproto._isemptyResult = function () {
if (! this.getOpts () ["resultado"]. comprimento) {
retornar falso;
}
retornar true;
};
TabProto._SaveorupDatestatus = function (item, status) {
item ["status"] = status;
};
tabproto._getItemListByStatus = function (status) {
var lista = [];
var resultado = this.getOpts () ["resultado"];
$ .ECH (resultado, função (i, item) {
if (status == item ["status"]) {
list.push (item);
}
});
lista de retorno;
};
tabproto._getStatusByIndex = function (index) {
Var Status = nulo;
var resultado = this.getOpts () ["resultado"];
$ .ECH (resultado, função (i, item) {
if (index == item ["index"]) {
status = item ["status"];
}
});
status de retorno;
};
(Iii), código completo para aprendizado , este código foi testado, incluindo estrutura de diretório e arquivos relacionados.
1, html
A cópia do código é a seguinte:
<Body>
<div>
Grande urso {{bb}}-dxj ui ------ tab
</div>
<div>
<div id = "tab">
<div>
<div>
+ Adicionar informações do aluno
</div>
<div>
<!-<div> <mpan> x </span> página de boas-vindas </div>
<div> <pan> x </span> Gerenciamento de usuário </div>
<div> <pan> x </span> bigbear </div>->
</div>
<div>
<div> Mais módulos </div>
<div>
</div>
</div>
</div>
<div>
</div>
<div>
<!-<div>
<div> <pan> Nome: </span> <input type = "text"/> </div>
<div> <pan> Nota: </span> <xexeeea> </sexttarea> </div>
</div> <div> <input type = "button" value = "salvar"/> </div>
->
</div>
</div>
</div>
</body>
2, CSS
A cópia do código é a seguinte:
.dxj-ui-hd {
preenchimento: 0px;
margem: 0 automático;
Margin-top: 30px;
Largura: 780px;
Altura: 60px;
altura da linha: 60px;
Antecedentes: #3385FF;
Cor: #ffff;
Fonte-família: "Microsoft Yahei";
Size de fonte: 28px;
Alinhamento de texto: centro;
Peso da fonte: negrito;
}
.dxj-ui-bd {
preenchimento: 0px;
margem: 0 automático;
Largura: 778px;
Top-top: 30px;
Botting-Bottom: 30px;
estouro: oculto;
Fronteira: 1px Solid #3385FF;
}
.dxj-ui-bd #tab {
preenchimento: 0px;
margem: 0 automático;
Largura: 720px;
estouro: oculto;
Posição: relativa;
}
.dxj-ui-bd #tab .title {
Largura: 720px;
estouro: oculto;
fundo de borda: 2px Solid #3385FF;
}
.dxj-ui-bd #tab .title .adder {
Largura: 160px;
Altura: 32px;
altura da linha: 32px;
Antecedentes: #DC143C;
Cor: #ffff;
Fonte-família: "Microsoft Yahei";
Size da fonte: 14px;
Alinhamento de texto: centro;
Peso da fonte: negrito;
flutuar: esquerda;
Cursor: Ponteiro;
}
.dxj-ui-bd #tab .title .more-mod {
estouro: oculto;
borda: 1px sólido #dc143c;
Largura: 70px;
Posição: Absoluto;
Direita: 0;
Margem-direita: 6px;
Exibir: Nenhum;
}
.dxj-ui-bd #tab .title .more-mod .tag {
Altura: 32px;
altura da linha: 32px;
Largura: 70px;
Antecedentes: #DC143C;
Cor: #ffff;
Fonte-família: Arial;
tamanho de fonte: 12px;
Alinhamento de texto: centro;
Cursor: Ponteiro;
}
.dxj-ui-bd #tab .title .more-mod .mods {
estouro: oculto;
Largura: 70px;
Exibir: Nenhum;
}
.dxj-ui-bd #tab .title .more-mod .mods div {
Altura: 24px;
altura da linha: 24px;
Largura: 62px;
Fonte-família: Arial;
tamanho de fonte: 12px;
Cursor: Ponteiro;
preenchimento-esquerda: 10px;
}
.dxj-ui-bd #tab .title .items {
Altura: 32px;
Largura: 480px;
estouro: oculto;
flutuar: esquerda;
}
.dxj-ui-bd #tab .title .items div {
preenchimento: 0px;
margem-esquerda: 10px;
Largura: 84px;
Altura: 32px;
altura da linha: 32px;
Antecedentes: #3385FF;
Cor: #ffff;
Fonte-família: Arial;
tamanho de fonte: 12px;
Alinhamento de texto: centro;
Posição: relativa;
flutuar: esquerda;
Cursor: Ponteiro;
}
.dxj-ui-bd #tab .title .items div span.del {
Largura: 16px;
Altura: 16px;
altura da linha: 16px;
exibição: bloco;
Antecedentes: #DC143C;
Posição: Absoluto;
Direita: 0;
topo: 0;
Cursor: Ponteiro;
}
.dxj-ui-bd #tab .content {
Largura: 716px;
Top-top: 30px;
estouro: oculto;
Fronteira: 2px Solid #3385FF;
Top de borda: 0px;
Min-altura: 130px;
Alinhamento de texto: centro;
}
.dxj-ui-bd #tab. Tabela decontent {
margem: 0 automático;
}
.dxj-ui-bd #tab .content div.c {
Top-top: 20px;
Potding-Left: 20px;
Antecedentes: #eee;
Altura: 140px;
}
.dxj-ui-bd #tab .content div.c .input-content {
Margin-top: 10px;
Fonte-família: Arial;
tamanho de fonte: 12px;
}
.dxj-ui-bd #tab .console-panel {
Largura: 716px;
Top-top: 20px;
Botting-Bottom: 20px;
estouro: oculto;
Fronteira: 2px Solid #3385FF;
Top de borda: 0px;
fundo de borda: 2px Solid #3385FF;
Antecedentes: #FFF;
Exibir: Nenhum;
}
.Active {
Peso da fonte: negrito;
}
3, bigbear.js
A cópia do código é a seguinte:
(função ($) {
var win = janela;
var bb = win.bigbear = win.bigbear || {
UI: {}
};
var ui = bb.ui = {};
var tab = função (elem, opts) {
this.Elem = elem;
this.opts = opts;
};
var tabproto = tab.prototype;
/ * Atualizar tempo de 2015 1/26 15:36 */
tabproto._isDisplaymax = function (size) {
var displayMax = this.getOpts () ["DisplayMax"] || 5;
return (tamanho <= displaymax)? Verdadeiro: falso;
};
tabproto._isemptyResult = function () {
if (! this.getOpts () ["resultado"]. comprimento) {
retornar falso;
}
retornar true;
};
TabProto._SaveorupDatestatus = function (item, status) {
item ["status"] = status;
};
tabproto._getItemListByStatus = function (status) {
var lista = [];
var resultado = this.getOpts () ["resultado"];
$ .ECH (resultado, função (i, item) {
if (status == item ["status"]) {
list.push (item);
}
});
lista de retorno;
};
tabproto._getStatusByIndex = function (index) {
Var Status = nulo;
var resultado = this.getOpts () ["resultado"];
$ .ECH (resultado, função (i, item) {
if (index == item ["index"]) {
status = item ["status"];
}
});
status de retorno;
};
tabproto._renderconsolePanel = function (status) {
var que = this;
var root = that.getElem (). Find (". Console-pain");
this._resetConsolePanel ();
$ .ECH (that._getItemListByStatus (status), função (i, item) {
var elem = $ ("<div estilo = 'float: esquerda';> </div>"). Appendto (root);
$ ("<Tipo de entrada = 'Radio' Nome = 'addMod' />")
.data ("item", item)
.Appendto (elem);
$ ("<span> </span>"). texto (item ["text"]). Appendto (elem);
});
if (root.find ("div"). size ()) {
$ ("<Tipo de entrada = 'Button' Value = 'Adicionar módulo' estilo = 'margem-esquerda: 20px'/>")
.on ("clique", function () {
var dados = root.find ("input [type = radio]: verificado"). data ("item");
if (that._getItemListByStatus ("1"). Comprimento <that.getOpts () ["DisplayMax"]) {
that.getElem (). encontre (". title .items div"). Eq (dados ["index"]). Fadein (function () {
that._saveorupdatestatus (dados, "1");
})
.trigger ("clique");
}
outro{
that._saveorupdatestatus (dados, "2");
}
that.getElem (). encontre (". título .Adder"). Trigger ("clique");
})
.AppendTo (raiz);
}
outro{
root.text ("Não há itens a serem adicionados ainda!");
}
};
/ * Atualizar tempo de 2015 1/26 15:36 */
tabproto._setCurrent = function (index) {
var itens = this.getElem (). find (". title .items div"). removeclass ("ativo");
items.eq (index) .addclass ("ativo");
var contents = this.getElem (). find (". Content .c"). hide ();
contents.eq (index) .show ();
};
tabproto.getElem = function () {
devolver isso.Elem;
};
TabProto.getOpts = function () {
devolver este.Opts;
};
tabproto._resetContent = function () {
this.getElem (). encontre (". Content"). html ("");
};
tabproto._setContent = function (html) {
this.getElem (). encontre (". Content"). html (html);
};
tabproto._getContent = function (url) {
retornar $ .ajax ({
URL: URL
});
};
tabproto._deleteItem = function (elem) {
var que = this;
this.getElem (). Find (". Title .items div")
.eq (elem.index ())
.Fadeout (function () {
that._resetContent ();
that._saveorupdatestatus (elem.data ("item"), "0");
that._triggerItem (elem.index () + 1);
});
};
TabProto._triggerItem = function (Next) {
var nextStatus = this._getStatusByIndex (Next);
var itens = this.getElem (). encontre (". title .items div");
próximo = items.eq (próximo);
if (next.size () && "1" == nextStatus) {// O nó DOM subsequente existe
next.Trigger ("Clique");
}
outro{
items.eq (0) .trigger ("clique");
}
};
TabProto._ResetConsolePanel = function () {
this.getElem (). encontre (".
};
tabproto.init = function () {
if (this._isemptyResult ()) {
this._setContent ("Sem módulo ainda!");
}
var que = this;
this.getElem (). Find (". Título .Adder")
.Text (" +" + this.getOpts () ["ButtonText"]))
.on ("clique", function () {
that.getElem (). encontre (".
that._renderConsolePanel ("0");
});
});
$ .ECH (this.getOpts () ["resultado"], função (i, item) {
if (that._isDisplayMax (i + 1)) {
that._saveorupdatestatus (item, "1");
}
outro{
that._saveorupdatestatus (item, "2");
}
that._render (item);
});
if (! that._isDisplayMax (this.getOpts () ["resultado"]. comprimento)) {
this.getElem (). encontre (".
$ (this) .find (". tag"). on ("clique", function () {
var root = $ (this) .Next ();
root.Empty ();
$ .ECH (that._getItemListByStatus ("2"), function (i, dados) {
$ ("<div> </div>"). Texto (dados ["texto"]))
.on ("clique", function () {
if (that._getItemListByStatus ("1"). Comprimento <that.getOpts () ["DisplayMax"]) {
that.getElem (). encontre (". title .items div"). Eq (dados ["index"]). Fadein (function () {
that._saveorupdatestatus (dados, "1");
});
}
outro{
alerta ("nenhum módulo pode ser adicionado, atualmente é o número máximo!");
}
})
.AppendTo (raiz);
});
root.toggle ();
});
});
}
this.getElem (). Find (". Title .items div")
.eq (0)
.trigger ("clique"); // Suponha que deve haver um, caso contrário, o plug-in não fará muito sentido!
};
tabproto._render = function (dados) {
var que = this;
var item = $ ("<div> </div>"). text (dados ["text"]). Appendto (this.getElem (). find (". title .items")));
dados ["index"] = item.index ();
item.on ("clique", function () {
that._setCurrent ($ (this) .Index ());
that._getContent (dados ["url"]).
that._setContent (resultado);
})
.Fail (function () {
lançar um novo erro ("Erro líquido!");
});
})
.data ("item", dados);
if ("2" == dados ["status"]) {
item.hide ();
}
if ("1" == dados ["showclose"]) {
$ ("<span class = 'del'> x </span>")
.on ("clique", function () {
if (win.confirm ("Este item é excluído?")) {
that._deleteItem (item);
retornar falso; // Pare de bolhas
}
})
.AppendTo (item);
}
};
ui.createTab = function (elem, opts) {
var tab = nova guia (elem, opts);
tab.init ();
guia de retorno;
};
}) (jQuery);
(Iv), resumo final
(1) Uma análise razoável dos requisitos funcionais de uma maneira orientada a objetos.
(2), organize nossa lógica plug-in de uma maneira de classe.
(3) reconstruir continuamente os exemplos acima, como reconstruir isso razoavelmente? Não designe demais, fique à vontade. O método recomendado é combinar o design do processo com o design de pensamento orientado a objetos.