2009-05-19 17 views
5

Quiero agregar algunas funcionalidades de jQuery a nuestros sitios donde un fragmento de marcado tendrá un manejador de clics que tendrá que provocar acción en otro elemento de marcado, es decir, A es un disparador para la acción de B. No hay garantía acerca de la estructura relativa de A y B, así que no puedo confiar en un selector jQuery, además cada A único tendrá que relacionarse solo con su contraparte única B.En jQuery, Metadata y XHTML Compliance

¿Qué es consenso general sobre la mejor manera de proceder en tal circunstancia?

Opción 1: A quién le importa el cumplimiento de XHTML, de todos modos está sobrevalorado. Tenemos productores de contenido web no capacitados capaces de inyectar marcas en nuestro sitio de todos modos, por lo que el cumplimiento estricto de XHTML sería una quimera. Simplemente invente atributos de etiqueta y lea sus valores con jQuery.

Example: 
<div class="jquery-feature-trigger" actson="targetID">Trigger</div> 

Opción 2: Usar atributos que se parecen a HTML, pero en realidad no debería usarse para ese propósito.

Example: 
<div class="jquery-feature-trigger" rel="targetID">Trigger</div> 

Opción 3: Use espacios de nombres como ASP.NET 4.0 se ha propuesto hacer.

Example: 
<div class="jquery-feature-trigger" custom:actson="targetID">Trigger</div> 

Si desea recomendar la opción 3, le agradecería un enlace a lo que se requiere para conseguir que esto funcione como realmente no tengo idea de si un DTD se tiene que hacer o cómo vincularlo en.

Opción 4: La comunidad de Stack Overflow tiene una mejor idea ... ???

Respuesta

8

Se podría investigar la jQuery Metadata plugin, que puede almacenar JSON metadatos en el atributo class (o varios otros lugares). Ejemplo:

<div class="jquery-feature-trigger { actson: 'targetID' }">Trigger</div> 
+0

Esto es básicamente la Opción 2 – kizzx2

1

¿Hay alguna manera de que pueda almacenar la información dentro del método de datos jQuery? Guarda abarrotar el marcado

Para ver un ejemplo aquí

snipplr.com/view/9715/the-jquery-data-store/~~V~~3rd

o la documentación directa

docs.jquery. com/Core/data # name

Lo he usado un par de veces para almacenar información sobre mis elementos, una función muy útil que no parece conocerse ampliamente.

En este momento no se puede publicar enlaces Soy un usuario nuevo :(

1

Prueba esto:

<html> 
<head> 


    <script src="scripts/jquery/jquery-1.2.6.min.js" type="text/javascript"></script> 
    <!--Using highlight effect to illustrate-->  
    <script src="scripts/jquery/jquery-ui-highlight.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
    $(document).ready(function(){ 
     $(".jquery-feature-trigger").click(function(){ 
      $("#target-" + $(this).attr("id")).effect("highlight", {}, 6000); 

     }); 
}); 
</script> 

</head> 

<body> 

<div class="jquery-feature-trigger" id="1">Trigger 1</div> 
<div class="jquery-feature-trigger" id="2">Trigger 2</div> 
<div class="jquery-feature-trigger" id="3">Trigger 3</div> 
<div class="jquery-feature-target" id="target-1">Target 1</div> 
<div class="jquery-feature-target" id="target-2">Target 2</div> 
<div class="jquery-feature-target" id="target-3">Target 3</div> 

</body> 
</html> 

Así que he decidido dar el objetivo DIVS el id "blanco-x" y dar el gatillo divs el id "x". de esta manera, cuando se hace clic en el gatillo x afecta objetivo "blanco-x".

Aviso la línea que va

$("#target-" + $(this).attr("id")) 

es en ese punto que obtienes la identificación del div clickeado y la concatenas en "target-" y se convierte en la identificación del div de destino.

0

¿Y qué hay de poner dentro de las entradas ocultas de div con nombres e ids apropiados? De esta manera, mantienes XHTML claro. Así que va a utilizar como esa:

$("div_name").find("hidden_input_name").val() 
0

No sé exactamente lo que está haciendo, pero ¿Es posible hacer que el gatillo sea una etiqueta de ancla y después dar el destino una identificación? De esta manera:

<a href="#target1">Trigger 1</a> 
<div id="target1">Target 1</div> 

Luego puede usar jQuery para encontrar la identificación del objetivo mirando el atributo href.

Si el disparador 1 oculta o muestra el objetivo 1 o se desplaza hacia abajo, este método tendría el beneficio adicional de seguir haciendo algo si se desactivara JavaScript.

6

me gustaría utilizar data- attributes para este momento, no obstante el cumplimiento de XHTML, así:

<div class="jquery-feature-trigger" data-actson="targetID">Trigger</div> 

Estos son una característica de HTML5, pero no causan ningún problema en HTML 4/XHTML otros que no ser válida atributos en el validador ... pero no hay problemas reales como resultado de esto.

jQuery también has added built-in support for these since jQuery 1.4.3 en los métodos .data().

+0

Ver también [Datos de HTML 5- Atributos] (http://ejohn.org/blog/html-5-data-attributes/) por John Resig –

Cuestiones relacionadas