Adán Biggs
Me gustaría escribir un complemento jQuery simple que muestre modales en línea en elementos específicos. Mi idea es que el script se inicie automáticamente en función de los atributos de datos especificados en los elementos.
Un ejemplo muy básico:
<p data-modal-target>Hover over me for an inline modal!</p>
<div data-modal-content data-modal-align="right" data-modal-trigger="hover" data-modal-offset="10px"><!-- any desired syntax can go here --></div>
solo me pregunto si data-modal-target en el ejemplo anterior es válido, o tiene que ser data-modal-target="true"? No me importa nada más malo que IE9, etc., mi único requisito es que sea HTML válido.
lloyd
Sí, perfectamente válido. En tu caso, data-modal-target representaría un atributo booleano:
2.4.2 Atributos booleanos
La presencia de un atributo booleano en un elemento representa el valor verdadero y la ausencia del atributo representa el valor falso.
-
¡Lindo! Gracias por el enlace, normalmente no tengo la paciencia para leer w3.org 🙂
-Adam Biggs
15 de marzo de 2012 a las 23:04
-
No sé, omitir el valor “lo convierte en” un atributo booleano; parece que los atributos booleanos no son arbitrarios; Creo que hay una lista de ellos. Tal vez no importe si el navegador/secuencia de comandos lo trata como un dato booleano o personalizado; pero tal vez depende del guión que lo lea.
– buen ojo
15 de mayo de 2013 a las 1:40
-
Creo que esto ha cambiado. Ciertamente, el ejemplo que estoy usando en mi código no se trata como un booleano sino como una cadena vacía. Entonces, probando
if ($('p').data('modal-target'))no funcionará: stackoverflow.com/questions/16864999/….–Derek Henderson
20 de diciembre de 2013 a las 13:56
-
parece que esto no es cierto
element.dataset.modalTargetproduciría una cadena vacía que es falsa (Chrome 32) mismo resultado con jQuery– H1D
22 de enero de 2014 a las 16:32
-
Esto parece ser una mala interpretación de la especificación. La sección a la que se vincula describe los atributos booleanos, pero no dice si los atributos de datos personalizados poder ser atributos booleanos.
– BoltClock
20 de junio de 2015 a las 2:11
usuario
Válidos, pero no son booleanos.
Especificación de atributos de datos personalizados no menciona ningún cambio en el manejo de atributos vacíos, por lo que el reglas generales sobre atributos vacíos aplicar aquí:
Ciertos atributos se pueden especificar proporcionando solo el nombre del atributo, sin valor.
En el siguiente ejemplo, el
disabledEl atributo se proporciona con la sintaxis de atributo vacía:<input disabled>Tenga en cuenta que la sintaxis de atributos vacíos es exactamente equivalente a especificar la cadena vacía como el valor del atributo, como en el siguiente ejemplo.
<input disabled="">
Por lo tanto, puede usar atributos de datos personalizados vacíos, pero se necesita un manejo especial para usarlos como booleanos.
Cuando accede a un atributo vacío, su valor es "". Dado que es un valor falso, no puede simplemente usar if (element.dataset.myattr) para comprobar si un atributo está presente.
Deberías usar element.hasAttribute('myattr') o if (element.dataset.myattr !== undefined) en cambio.
La respuesta de Lloyd es incorrecta. Menciona el enlace a la microsintaxis de atributos booleanos, pero data-* los atributos no se especifican como booleanos en la especificación.
-
“Tenga en cuenta que la sintaxis de atributos vacíos es exactamente equivalente a especificar la cadena vacía como el valor del atributo, como en el siguiente ejemplo”. es exactamente lo que estaba buscando. Específicamente, jQuery
scriptAttrsa la configuración no le gusta una llanuradefervalor, pero undefer: ""debería hacer el truco. ¡Gracias!– sfarbota
31 de julio de 2020 a las 19:09
-
Si desea obtener una propiedad booleana en HTMLElement, puede definir un captador personalizado utilizando hasAttribute. desarrollador.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
– usuario3579536
16 de junio de 2021 a las 23:24
Sí, es una sintaxis válida para omitir el valor de un atributo de datos personalizado.
“Los atributos se pueden especificar de cuatro maneras diferentes:
Sintaxis de atributo vacía Solo el nombre del atributo. El valor es implícitamente la cadena vacía.
[…]”
https://developers.whatwg.org/syntax.html#attributes-0
-
También dice justo antes de “Los atributos tienen un nombre y un valor”. No dice “Los atributos tienen un nombre y un valor OPCIONAL”.
– Antonio
2 de octubre de 2020 a las 9:06
-
El valor no es opcional: “El valor es implícitamente la cadena vacía”.
– Jim U.
23 de febrero de 2022 a las 20:50
Por un lado pasa el validador 16.5.7 https://validator.w3.org/nu/#textarea :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>a</title>
</head>
<body data-asdf>
</body>
</html>
Por otro lado, HTML5 no dice en la especificación de data- atributos que son booleanos: https://www.w3.org/TR/html5/dom.html#atributo-de-datos-personalizados mientras que dice eso muy claramente para otros atributos booleanos como checked https://www.w3.org/TR/html5/forms.html#attr-input-checked
No pude encontrar dónde los atributos de datos personalizados requieren un valor o no; y todavía no estoy seguro de si omitir el valor o simplemente incluirlo para estar seguro. La especificación W3C es confusa (no sorprende). Creo que puede depender del script que usa los valores. (El ejemplo de comentario continúa a continuación, debido al límite de longitud).
– buen ojo
15 de mayo de 2013 a las 1:39
por ejemplo, estoy usando un complemento que tiene atributos de datos personalizados con valores predeterminados: algunas cadenas, algunos booleanos (lo que me lleva a buscar esta pregunta). Los datos booleanos tienen una combinación de si el valor predeterminado es verdadero o falso; está haciendo la verificación para ver si existe o tiene un valor. Está comprobando si el valor es verdadero o vacío (para verdadero), o falso. Pero la verificación de vacío es explícita en el código; no es “incorporado”. Y no está comprobando el nombre del atributo, como data-abc=”data-abc” como requiere un atributo booleano; esto provoca un error.
– buen ojo
15 de mayo de 2013 a las 1:40