2009-05-19 15 views
5

Je souhaite ajouter des fonctionnalités jQuery à nos sites où un segment de balisage aura un gestionnaire de clics qui devra déclencher une action sur un autre balisage, par exemple A est un déclencheur pour l'action de B. Il n'y a aucune garantie sur la structure relative de A et B, donc je ne peux pas compter sur un sélecteur jQuery, et chaque unique A devra se rapporter uniquement à son homologue unique B.Sur jQuery, les métadonnées et la conformité XHTML

Quelle est la consensus général sur la meilleure façon de procéder dans une telle situation?

Option 1: Qui se soucie de la conformité XHTML, il est surfait de toute façon. Nous avons des producteurs de contenu web non formés capables d'injecter du balisage sur notre site de toute façon, donc une stricte conformité au XHTML serait une chimère. Créez simplement des attributs de balises et lisez leurs valeurs avec jQuery.

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

Option 2: Utiliser les attributs qui ressemblent à HTML, mais ne devrait pas vraiment être utilisés à cette fin.

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

Option 3: Utilisez namespaces comme ASP.NET 4.0 est ÉNONÇANT faire.

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

Si vous voulez recommander l'option 3, je vous serais reconnaissant un lien vers ce qui est nécessaire pour obtenir que cela fonctionne comme je l'ai vraiment aucune idée si une DTD doit être fait ou comment lier dans.

Option 4: La communauté Stack Overflow a une meilleure idée ... ???

Répondre

8

Vous pouvez étudier la jQuery Metadata plugin, qui peut stocker les métadonnées JSON dans l'attribut class (ou d'autres endroits). Exemple:

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

Il s'agit essentiellement de l'option 2 – kizzx2

1

Est-il possible de stocker les informations dans la méthode de données jQuery? Enregistre qui encombrent le balisage

Pour voir un exemple ici

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

ou la documentation directe

de docs.jquery. com/Core/data # nom

Je l'ai utilisé quelques fois pour stocker des informations sur mes éléments, fonction très utile qui ne semble pas être largement connue!

Désolé ne peut pas poster des liens que je suis un nouvel utilisateur :(

1

Essayez ceci:

<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> 

J'ai donc décidé de donner la cible divs l'id « cible x » et donner le déclencheur divs l'id « x ». de cette façon, lorsque vous cliquez sur la gâchette x affecte la cible « cible x ».

Notez la ligne qui va

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

à ce point que vous obtenez l'ID du div cliqué et le concaténer sur "target-" et qui devient l'ID de la div cible.

0

Et qu'en est-il de mettre dans vos entrées cachées div avec des noms et des identifiants appropriés? De cette façon, vous gardez XHTML clair. Donc vous utiliserez comme ça:

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

Je ne sais pas exactement ce que vous faites, mais serait-il possible de faire le déclencheur soit une balise d'ancrage, puis donner la cible d'un id? Comme ceci:

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

Ensuite, vous pouvez utiliser jQuery pour trouver l'identifiant de la cible en regardant l'attribut href.

Si le déclencheur 1 masque ou affiche la cible 1 ou la fait défiler vers le bas, cette méthode aurait l'avantage de continuer à faire quelque chose si JavaScript était désactivé.

6

J'utiliser data- attributes pour cela maintenant, malgré le respect XHTML, comme ceci:

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

Ce sont une caractéristique HTML5, mais ne causent pas de problèmes dans HTML4/XHTML autres que ne pas être valide attributs dans le validateur ... mais aucun problème réel ne résulte de cela.

jQuery également has added built-in support for these since jQuery 1.4.3 dans les méthodes .data().

+0

Voir aussi [HTML 5 data-Attributes] (http://ejohn.org/blog/html-5-data-attributes/) par John Resig –