Prefacio: Recientemente, cuando estaba usando el componente Bootstrap, encontré un problema de facilidad de uso. Mucha inicialización simple de componentes requiere escribir una gran cantidad de código de inicialización en JS, como una etiqueta de selección simple. Debido a que solo necesita obtener datos de fondo y llenarlos en la opción, pero obtener datos de los antecedentes requiere una inicialización JS, por lo que causa mucho código duplicado en el código de inicialización JS cuando la página se inicializa, lo que parece muy molesto. Así que recordé el atributo de datos en la tabla Bootstrap. Sería muy genial si pudiera usar datos-* para inicializar componentes simples directamente en el HTML. Primero veamos la documentación de la tabla Bootstrap:
Puede ver que casi todas las propiedades y eventos en la tabla Bootstrap se pueden usar en datos:*, lo que se siente bastante bien. Entonces el blogger comenzará a investigar. Datos-*¿De dónde viene esto?
1. Un estudio preliminar sobre JQuery Data ()
Después de buscar en línea, finalmente encontré la fuente de datos:*. Resultó ser de jQuery y HTML5. Cosas buenas, cosas realmente buenas! Echemos un vistazo a la API jQuery
El uso original es el siguiente:
La función es realmente muy obvia, que es agregar ciertos atributos y datos al elemento, o tomar valores.
Echemos un vistazo a la combinación del método Data () y el atributo HTML5:*
Jaja, esto es bueno. El valor establecido por HTML5 Data-* se puede obtener utilizando el método Data () de JQuery. Las reglas aquí son las siguientes:
1) Todos los atributos de datos deben comenzar con "datos-",
2) Los atributos están separados por "-",
3) Al tomar atributos en jQuery, simplemente elimine los "datos" y "-".
Con esto como base, sabemos cómo establecer propiedades en la etiqueta y luego tomar las propiedades correspondientes en JS. Expliquemos a continuación en combinación con el ejemplo de la última encapsulación de Combobox.
2. JQuery Data () Implementa Datos-* Componente de inicialización
Recuerde la serie de componentes JS anteriores: encapsulando sus propios componentes JS. También puede encapsular un Combobox simple en este artículo, que puede obtener datos del backend a través de la URL. Entonces, a continuación, seguiremos nuestro mejor esfuerzo para la base de este componente y agregaremos directamente el atributo de datos:* a la etiqueta Seleccionar para inicializar el componente del cuadro desplegable.
1. Código de encapsulación de componentes JS
(function ($) {// 1. Define el método de extensión jQuery ComboBox $ .fn.combobox = function (options, param) {if (typeof options == 'string') {return $ .fn.combobox.methods [opciones] (this, param);} // 2 fusione los parámetros pasados cuando llaman y predeterminados opciones de parámetros = $ .extend ({{},,,, $ .fn.comBobox.Defaults, Opciones || opción.text (option.placeholder); options.onbeforLoad.call (Target, Options.Param); (i, elemento) (OPTION.onChange) {$ .getjson (url, function (data) {jq.empty (); var option = $ ('<pection> </option>); opción.attr (' valor ',' '); opción Elemento [JQ.ATTR ('Valorfield')]); }}; // 6. Lista de parámetros predeterminada $ .fn.combobox.defaults = {url: null, param: null, data: null, valuefield: 'value', textField: 'text', posteholder: 'por favor seleccione', onborLoad: function (param) {}, onloadSuccess: function () {}, OnChange: function (value) {}}; // Este párrafo está recientemente agregado, y el método de inicialización $ (documento) .Ready (function () {$ ('. ComboBox'). Cada (function () {var $ comboBox = $ (this); $ .fn.combobox.call ($ comboBox, $ comboBox.data ());})}); }) (jQuery);La mayoría de los códigos no son diferentes de los últimos. Centrémonos en el siguiente párrafo
// Este párrafo está recién agregado. Después de completar la inicialización de la página, el método de inicialización $ (documento) .Ready (function () {$ ('. ComboBox'). Cada (function () {var $ comboBox = $ (this); $ .fn.combobox.call ($ comboBox, $ comboBox.data ();})});Es obvio que después de completar la inicialización de la página, el componente se inicializa a través del selector de estilo. Cada uno se usa, si hay múltiples estilos .comboBox, desitializa cada uno a su vez. Llame al método de llamada para llamar a la inicialización de ComboBox a través de $ .fn.combobox.call ($ comboBox, $ comboBox.data ());. Los dos parámetros en el método de llamada corresponden a:
1) El objeto jQuery inicializado actualmente
2) Lista de parámetros. Aquí, los atributos de datos* obtenidos a través de $ comboBox.Data () son todos los atributos de datos HTML-*. Pase todos los atributos de datos:* como parámetros en el método de inicialización de Combobox.
2. Inicializar en HTML a través de datos-*
<select id = "search_" name = "search_province" data-url = "/home/getProvince" data-param = '{"type": "0"}' data-text-field = "name" data-value-field = "id"> </select>Especifique el atributo de datos-*. De lo anterior sabemos que la inicialización aquí es inicializar el componente a través del selector de estilo.combobox, por lo que se requiere que si desea usar datos-* para inicializar el componente, debe establecer un estilo de class = "comboBox" para que el fondo pueda obtener las etiquetas que deben ser inicializadas.
3. Método de backend c#
public class HomeController : Controller { public List<string> lstProvince = new List<string>() { "Beijing", "Tianjin", "Chongqing", "Shanghai", "Hebei", "Shanxi", "Liaoning", "Jilin", "Heilongjiang", "Jiangsu", "Zhejiang", "" Anhui "," fujiano "," jiangxi "," shandong "," henan "," hubei "," hunan "," guangdong "," hainan "," sichuan "," guizhou "," yunnan "," yannan "," shaanxi "," gansu "," qinghai province ",", provincia ",", ", provincia", "Provincon", "," Provincon ". Mongolia Región autónoma "," Región autónoma Guangxi Zhuang "," Región autónoma del Tíbet "," Región Autónoma Ningxia Hui "," Región autónoma de Xinxia Uygur "," Región administrativa especial de Hong Kong "," Región administrativa especial de Macao "}; public jsonResult getProvince (tipo de cadena) {var lStres = new List <Province> (); for (var i = 0; i <10; i ++) {var omodel = new Province (); omodel.id = i; omodel.name = lstProvince [i]; lstres.add (omodel); } return json (lstres, jsonRequestBehavior.Anlowget); }} Public Class Province {public int id {get; colocar; } nombre de cadena pública {get; colocar; }}No hay nada que decir sobre probar el código.
4. Efecto de depuración
Obtener el efecto
Esto básicamente completa la inicialización del componente a través de datos-*.
3. Resumen
Lo anterior demuestra brevemente el uso del método jQuery Data () combinado con el atributo HTML5 Data-*. Básicamente puede satisfacer las necesidades de los bloggers: no necesita escribir una línea más de código JS para inicializar la etiqueta directamente. Al usarlo, simplemente consulte los archivos jQuery.js y jquery.extension.js. Pero sabemos que dado que es una característica en HTML5, debe haber ciertos requisitos para el navegador. Por supuesto, esta función de uso es relativamente básica, pero es suficiente para la inicialización de algunos componentes simples.
Si hay alguna comprensión incorrecta en el artículo, por favor, indíquelo, y el blogger estará muy agradecido.
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.