1. Análise de abertura
Oi pessoal! Nos dois primeiros artigos, conversamos principalmente sobre como desenvolver plug-ins em "JQuery's Way" e como projetar um plug-in combinando o design do processo com o design de pensamento orientado a objetos. Ambos os métodos têm seus prós e contras para aprender com seus pontos fortes e fracos. Hehehe, vamos falar menos bobagens e chegar ao ponto. Diretamente nas renderizações reais:
Você pode ver isso. Este é um plug-in menu suspenso. Em nosso desenvolvimento diário, o sistema às vezes pode nos fazer sentir que não é muito bonito e tem funções limitadas, fazendo com que os usuários
O formulário de experiência e a interatividade do usuário não são muito bons, então hoje simulei um hehehehehe. 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:
$ (function () {
var itemSelector = new ItemSelector ($ ("#item-seletor"), {
CurrentText: "Por favor, escolha o item",
Unid: [
{
Texto: "JavaScript",
valor: "js",
desativado: "1"
},
{
texto: "css",
Valor: "CSS",
desativado: "0"
},
{
texto: "html",
valor: "html",
desativado: "0"
}
],
Modo: "0", // Quando "1", ele suporta o modo de seleção múltipla de seleção
Alterar: função (valor) {
// Coloque seu código aqui
}
});
itemSelector.init ();
setTimeout (function () {
console.log (itemSelector.getCurrentValue ()); // teste para obter o item selecionado primeiro
}, 2000);
"var itemSelector = new ItemSelector ()" contém dois parâmetros. O primeiro é o objeto DOM Node e o segundo é a opção de parâmetro plug-in. "CurrentText" representa a descrição do texto da área de exibição de texto no plug-in "ItemSelector".
"Itens" é uma matriz que contém as propriedades do item "ItemSelector", incluindo descrição de texto, valor da opção, "desativado" representa a visibilidade da entrada da lista, 0 representa a tela e 1 representa a não ser exibida.
"Alterar" representa a função de retorno de chamada da operação quando selecionado e os dados da opção serão retornados na forma de parâmetros.
(2) Quais são as funções envolvidas?
As renderizações que podem ser exibidas são as seguintes:
As renderizações que não podem ser exibidas são as seguintes:
A diferença entre os dois é: os dados do estado não revelados não serão retornados e não haverá efeito ao flutuar.
3) O código completo é para aprender. 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 ------ ItemSelector
</div>
<div>
<div id = "item-seletor">
<div>
<div> </div> <pan> ↓ </span>
</div>
<div>
<div>
</div>
</div>
</div>
</div>
</body>
(2), CSS
A cópia do código é a seguinte:
/ * item-seletor */
#item-seletor {
margem: 0 automático;
Largura: 220px;
estouro: oculto;
Fronteira: 2px sólido #ccc;
}
#item-seletor .título {
fundo de borda: 1px sólido #ccc;
estouro: oculto;
}
#item-seletor .Título div {
Largura: 190px;
borda: 0px;
Cor:#999;
Fonte-família: Arial;
Size da fonte: 14px;
Altura: 28px;
altura de linha: 28px;
flutuar: esquerda;
Cursor: Ponteiro;
}
#item-seletor.
exibição: bloco;
Altura: 30px;
altura de linha: 30px;
Largura: 29px;
flutuar: esquerda;
Alinhamento de texto: centro;
Border-Ift: 1px Solid #CCC;
Cursor: Ponteiro;
}
#item-seletor .Content {
Largura: 220px;
estouro: oculto;
}
#item-seletor .Content .items {
estouro: oculto;
}
#item-seletor .Content .items div {
Potding-Left: 20px;
Largura: 200px;
Altura: 32px;
altura da linha: 32px;
Fonte-família: "Microsoft Yahei";
Size da fonte: 14px;
Peso da fonte: negrito;
Cursor: Ponteiro;
}
.item hover {
Antecedentes:#3385FF;
Cor: #ffff;
}
(3), "ItemSelector.js"
A cópia do código é a seguinte:
Função ItemSelector (Elem, Opts) {
this.Elem = elem;
this.opts = opts;
};
var isproto = itemSelector.prototype;
Isproto.getElem = function () {
devolver isso.Elem;
};
Isproto.getOpts = function () {
devolver este.Opts;
};
/* Manip de dados*/
Isproto._setCurrent = function (atual) {
this.getOpts () ["Current"] = Current;
};
Isproto.getCurrentValue = function (atual) {
return this.getOpts () ["Current"];
};
/* Manip de dados*/
Isproto.init = function () {
var que = this;
this.getOpts () ["Current"] = null; // Cursor de dados
this._setItemValue (this.getOpts () ["currentText"]);
var itemselem = that.getElem (). find (". Content .items");
this.getElem (). encontre (". Title div"). on ("clique", function () {
itemselem.toggle ();
});
this.getElem (). encontre (".
itemselem.toggle ();
});
$ .ECH (this.getOpts () ["itens"], função (i, item) {
item ["id"] = (new Date (). getTime ()). ToString ();
that._render (item);
});
};
Isproto._setItemValue = function (value) {
this.getElem (). encontre (". title div"). Texto (valor)
};
Isproto._render = function (item) {
var que = this;
var itemElem = $ ("<div> </div>")
.text (item ["text"])
.attr ("id", item ["id"]);
if ("0" == item ["desativado"]) {
itemElem.on ("clique", function () {
var onchange = that.getOpts () ["alteração"];
that.getElem (). encontre (". Content .items"). hide ();
that._setItemValue (item ["text"]);
that._setCurrent (item);
OnChange && onchange (item);
})
.mouseOver (function () {
$ (this) .Addclass ("Itemping");
})
.mouseout (function () {
$ (this) .RemoveClass ("Aviso de item");
});
}
outro{
itemElem.css ("color", "#ccc"). on ("clique", function () {
that.getElem (). encontre (". Content .items"). hide ();
that._setItemValue (item ["text"]);
});
}
itemElem.AppendTo (this.getElem (). Find (". Content .items")));
};
(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) O artigo a seguir expandirá funções relacionadas, como a propriedade "Modo". Quando é "1", suporta o modo de seleção de múltiplas seleções, mas agora é apenas o modo suspenso padrão.
Este artigo está aqui primeiro, e continuaremos discutindo mais tarde. Espero que você possa aproveitar esta série de artigos.