Prefácio: Recentemente, quando eu estava usando o componente Bootstrap, encontrei um problema de facilidade de uso. Muita inicialização simples de componentes requer a gravação de muito código de inicialização no JS, como uma tag simples de seleção. Como ele só precisa obter dados do plano de fundo e preenchê -los na opção, mas obter dados do plano de fundo requer a inicialização do JS, por isso causa muito código duplicado no código de inicialização do JS quando a página é inicializada, que parece muito irritante. Por isso, lembrei -me do atributo de dados na tabela de bootstrap. Seria tão legal se eu pudesse usar dados-* para inicializar componentes simples diretamente no HTML. Vamos primeiro olhar para a documentação da tabela de bootstrap:
Você pode ver que quase todas as propriedades e eventos na tabela de bootstrap podem ser usados em dados*, o que parece muito bom. Então o blogueiro começará a pesquisar. Dados-*De onde isso vem?
1. Um estudo preliminar sobre dados jQuery ()
Depois de pesquisar on-line, finalmente encontrei a fonte de dados*. Acabou sendo de jQuery e html5. Coisas boas, coisas realmente boas! Vamos dar uma olhada na API jQuery
O uso original é o seguinte:
A função é realmente muito óbvia, o que é adicionar certos atributos e dados ao elemento ou receber valores.
Vamos dar uma olhada na combinação do método Data () e do atributo html5-*
Haha, essa coisa é boa. O valor definido pelo html5 dados-* pode ser obtido usando o método JQuery's Data (). As regras aqui são as seguintes:
1) Todos os atributos de dados devem começar com "dados-",
2) Os atributos são separados por "-",
3) Ao tomar atributos no jQuery, basta remover "dados" e "-".
Com isso como base, sabemos como definir propriedades na tag e depois pegar as propriedades correspondentes no JS. Vamos explicar abaixo em combinação com o exemplo do último encapsulamento do ComboBox.
2. JQuery Data () implementa dados-* Componente de inicialização
Lembre -se da série anterior de componentes JS - encapsulando seus próprios componentes JS. Você também pode encapsular um ComboBox simples neste artigo, que pode buscar dados do back -end através do URL. Portanto, abaixo, ainda faremos o possível para a base deste componente e adicionaremos diretamente o atributo de dados* à tag Selecionar para inicializar o componente da caixa suspensa.
1. Código de encapsulamento do componente JS
(function ($) {// 1. Definir método de extensão jQuery combnoBox $ .fn.comBOBOX = function (opções, param) {if (typeof opções == 'string') {return $ .fn.comBOBOX.Methods [options] (this, param);} // 2. Merge os parameters passados quando chamados e params. . Option.Text (Opção.Place); OptionSeLoD.Call (OptionS.Ponse); (Item) {varejo (Opções.OnChan) $ .getjson (url, function (dados) {jq.empty (); var option = $ ('<pution> </option>'); option.attr ('value', ''); option.text ('por favor selecione'); jq.append (option); $ .each (data, i, itens) {var = $ (' item [JQ.attr ('Valuefield')); }}; // 6. Lista de parâmetros padrão $ .fn.comBobox.Defaults = {url: null, param: null, dados: nulo, valuefield: 'value', textfield: 'text', placeholder: 'selecione', onBeForEload: function (param) {}, onloadsuccess: function {}}, wonthange; // Este parágrafo é adicionado recentemente e o método de inicialização $ (documento) .ready (function () {$ ('. ComboBox'). Cada (function () {var $ ComboBox = $ (this); $ .fn.comBobox.Call ($ ComboBox, $ ComboBox.data ());})}); }) (jQuery);A maioria dos códigos não é diferente do último. Vamos nos concentrar no seguinte parágrafo
// Este parágrafo é adicionado recentemente. Após a inicialização da página ser concluída, o método de inicialização $ (documento) .ready (function () {$ ('. ComboBox'). Cada (function () {var $ ComboBox = $ (this); $ .fn.comBobox.Call ($ ComboBox, $ ComboBox.data ());})});É óbvio que, após a conclusão da inicialização da página, o componente é inicializado através do seletor de estilo. Cada um é usado, se houver vários estilos .combobox, desinacionalizam cada um por sua vez. Ligue para o método de chamada para chamar a inicialização do ComboBox através de $ .fn.comBobox.Call ($ ComboBox, $ ComboBox.data ());. Os dois parâmetros no método de chamada correspondem a:
1) O objeto jQuery atualmente inicializado
2) Lista de parâmetros. Aqui, os atributos de dados obtidos através de $ combox.data () são todos os atributos HTML Data-*. Passe todos os dados-* atributos como parâmetros para o método de inicialização do ComboBox.
2. Inicialize em html através de dados-*
<select id = "search_" name = "search_province" data-url = "/home/getProvince" data-param = '{"type": "0"}' data-text-field = "name" data-value-field = "id"> </leclect>Especifique o atributo Data-*. Pelo exposto, sabemos que a inicialização aqui é inicializar o componente através do seletor de estilo.comBoBox; portanto, é necessário que, se você deseja usar dados-* para inicializar o componente, você deva definir um estilo "ComboBox" para que o plano de fundo possa obter as tags que precisam ser inicializadas.
3. Método de back -end C#
public class HomeController : Controller { public List<string> lstProvince = new List<string>() { "Beijing", "Tianjin", "Chongqing", "Shanghai", "Hebei", "Shanxi", "Liaoning", "Jilin", "Heilongjiang", "Jiangsu", "Zhejiang", "Anhui", "Fujian", "Jiangxi", "Shandong", "Henan", "Hubei", "Hunan", "Guangdong", "Hainan", "Sichuan", "Guizhou", "Yunnan", "Yannan", "Shaanxi", "Gansu", "Qinghai Province", "Taiwan Province", "Região Autônoma da" Mongólia Interior "," Região Autônoma de Guangxi Zhuang "," Região Autônoma do Tibete "," Região Autônoma de Ningxia Hui "," Região Autônoma de Xinxia Uygur "," Região Administrativa Especial de Hong Kong "," Região Administrativa Especial "}}; public jsonResult getProvince (tipo de string) {var lSTes = new List <vounce> (); for (var i = 0; i <10; i ++) {var omodel = nova província (); omodel.id = i; omodel.name = lstProvince [i]; LSTES.Add (Omodel); } retornar JSON (LSTES, JSONREQUESTBEHAVIRIOR.OLLOWGET); }} Província de classe pública {public int id {get; definir; } nome da string pública {get; definir; }}Não há nada a dizer sobre como testar o código.
4. Efeito de depuração
Obtenha o efeito
Isso basicamente completa a inicialização do componente através dos dados*.
3. Resumo
O acima demonstra brevemente o uso do método jQuery Data () combinado com o atributo html5 dados. Ele pode basicamente atender às necessidades dos blogueiros: você não precisa escrever mais uma linha de código JS para inicializar a tag diretamente. Ao usá -lo, consulte os arquivos jQuery.js e jQuery.extension.js. Mas sabemos que, como é um recurso no HTML5, deve haver certos requisitos para o navegador. Obviamente, essa função de uso é relativamente básica, mas é suficiente para a inicialização de alguns componentes simples.
Se houver algum entendimento incorreto no artigo, aponte -o e o blogueiro ficará muito grato.
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.