1. Análise de abertura
Nos dois artigos anteriores, conversamos principalmente sobre como desenvolver plug-ins no jQuery e como combinar o design do processo 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. Portanto, a partir deste artigo hoje, usaremos exemplos para desenvolver nossa própria biblioteca plug-in, de rasos ao profundo. Hehehe, diga menos bobagem, chegue ao ponto. Diretamente nas renderizações reais:
Você pode ver isso. Este é um plug -in de guia. Podemos encontrá-lo quando fazemos aplicativos de uma página ("spa") todos os dias. Vamos dar o exemplo de hoje.
Construímos um sistema baseado na estrutura BS, que consistirá em vários módulos, que são todos os componentes do sistema de construção. Através deste plug-in, podemos gerenciar efetivamente nossos módulos
Vamos analisar o formulário de experiência e a interatividade do usuário 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:
bigbear.ui.createTab ($ ("#tab"), {
ButtonText: "Adicionar módulo",
Resultado: [
{
Texto: "Prompt de assistente",
URL: "Help.html",
showclose: "0",
Status: "1"
},
{
Texto: "Informação do aluno",
url: "info.html",
showclose: "1",
Status: "1"
},
{
Texto: "Classificação do aluno",
URL: "category.html",
showclose: "1",
Status: "1"
},
{
Texto: "Big Bear {{bb}}",
url: "bb.html",
showclose: "1",
Status: "1"
},
{
texto: "módulo de teste beta",
url: "test.html",
showclose: "1",
Status: "1"
}
]
});
"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" representa o status da opção, que é o estado no padrão por padrão, e pode haver um estado fechado, que é expresso como: 1-aberto e 0-Open, respectivamente.
(2) Quais são as funções envolvidas?
Por meio de parâmetros opcionais, as entradas de opções relevantes são geradas dinamicamente, como segue:
A cópia do código é a seguinte:
bigbear.ui.createTab ($ ("#tab"), {
ButtonText: "Adicionar módulo",
Resultado: [
{
Texto: "Análise do código -fonte do jQuery",
URL: "Help.html",
showclose: "0",
Status: "1"
},
{
Texto: "Big Bear {{bb}}}",
url: "bb.html",
showclose: "1",
Status: "1"
}
]
});
O efeito é o seguinte:
Você pode adicionar e excluir livremente as opções de entradas, conforme mostrado no seguinte efeito:
A figura acima mostra uma dessas situações. Quando não houver módulo, uma mensagem será solicitada.
Este é o segundo caso, e os que foram excluídos anteriormente podem ser restaurados.
(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>
</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), código de arquivo 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;
}
.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 .items {
Altura: 32px;
margem-esquerda: 20px;
Largura: 540px;
estouro: oculto;
flutuar: esquerda;
}
.dxj-ui-bd #tab .title .items div {
preenchimento: 0px;
margem-esquerda: 10px;
Largura: 96px;
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), o código JS é o seguinte:
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",
Status: "1"
},
{
Texto: "Informação do aluno",
url: "info.html",
showclose: "1",
Status: "1"
},
{
Texto: "Classificação do aluno",
URL: "category.html",
showclose: "1",
Status: "1"
},
{
Texto: "Big Bear {{bb}}",
url: "bb.html",
showclose: "1",
Status: "1"
},
{
texto: "módulo de teste beta",
url: "test.html",
showclose: "1",
Status: "1"
}
]
});
});
(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;
tabproto._deleteItem = function (item) {
var que = this;
this.getElem (). Find (". Title .items div")
.eq (item ["index"])
.Fadeout (function () {
that._resetContent ();
that._updatestatus (item);
that._triggerItem (item ["index"] + 1);
that.getElem (). encontre (". título .Adder"). Trigger ("clique");
});
};
TabProto._triggerItem = function (Next) {
var nextStatus = this._getStatus (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._getStatus = function (index) {
var status = "";
$ .ECH (this.getOpts () ["resultado"], função (i, item) {
if (index == item ["index"]) {
status += item ["status"];
retornar falso;
}
});
status de retorno;
};
tabproto._updatestatus = function (item) {
var status = item ["status"];
item ["status"] = ("1" == status)? "0": "1";
};
tabproto.init = function () {
var que = this;
this.getElem (). Find (". Título .Adder")
.Text (" +" + this.getOpts () ["ButtonText"]))
.on ("clique", function () {
that._toggleconsolePanel (function () {
var root = that.getElem (). find (". Console-pain"). vazio ();
$ .ECH (that.getOpts () ["resultado"], função (i, item) {
if ("0" == item ["status"]) {
var elem = $ ("<Div Style = 'Float: Left';> </div>")
.data ("item", item)
.AppendTo (raiz);
$ ("<Tipo de entrada = 'Radio' Nome = 'addMod' />").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"). Parent (). Data ("Item");
that._updatestatus (dados);
that.getElem (). encontre (". title .items div"). Eq (dados ["index"]). Fadein (). Trigger ("Click");
that.getElem (). encontre (". título .Adder"). Trigger ("clique");
})
.AppendTo (raiz);
}
outro{
root.text ("Não há itens a serem adicionados ainda!");
}
});
});
$ .ECH (this.getOpts () ["resultado"], função (i, item) {
item ["index"] = i;
that._render (item);
});
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._toggleconsolePanel = function (retorno de chamada) {
this.getElem (). encontre (".
$ .isfunction (retorno de chamada) && retorno de chamada ();
});
};
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._render = function (dados) {
var que = this;
var item = $ ("<div> </div>")
.text (dados ["text"])
.on ("clique", function () {
that._setCurrent (dados ["index"]);
that._getContent (dados ["url"]).
that._setContent (resultado);
})
.Fail (function () {
lançar um novo erro ("Erro líquido!");
});
})
.AppendTo (this.getElem (). Find (". Title .items")));
if ("1" == dados ["showclose"]) {
$ ("<span class = 'del'> x </span>")
.on ("clique", function () {
if (win.confirm ("Este item é excluído?")) {
that._deleteItem (dados);
retornar falso; // Pare de bolhas
}
})
.AppendTo (item);
}
};
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;
};
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.
(4) Pense se as opções na guia podem ser classificadas de forma independente em classes separadas no exemplo acima? Por exemplo, "Item", como modificar a classe "Tab"? Pense com perguntas. . .
O acima é o conteúdo inteiro deste artigo. Continuaremos a melhorar esse plug-in no futuro. Se você gosta deste artigo, me dê um polegar para cima.