Javascript Girl
  1. Javascript Girl
  3. Créer une simple fenêtre pop-up modale dans XSLT
Intereting Posts
Comment puis-je utiliser BeautifulSoup ou Slimit sur un site pour afficher l'adresse e-mail à partir d'une variable javascript Appel de l'API Microsoft Graph à partir des fonctions Azure Comment personnaliser l'égalité des objets pour le jeu JavaScript Comprendre l'héritage prototypique en JavaScript Le plugin choisi ne semble pas fonctionner sur les navigateurs mobiles Comment puis-je obtenir la valeur de la liste dans un composant? Comment vérifier si un élément est vraiment visible avec JavaScript? Passez des paramètres supplémentaires à la fonction callback WebSQL? Test Protractor: Comment définir la valeur des éléments de texte dans un formulaire de connexion? Comment implémenter l'événement "DOM Ready" dans un script GreaseMonkey? Que font les opérateurs << et >>? GWT – Impossible de trouver des classes de points d'entrée Filtrer les paramètres de passe de paginée aux demandes de relation de données de braises asynchrones Comment trouver un noeud dans un arbre avec JavaScript Possibilité d'obtenir la valeur précédente de l'objet dans Parse Cloud Code AfterSave?

Créer une simple fenêtre pop-up modale dans XSLT

Je construis une feuille de style qui a quelques membres dans la table. Ce que je veux, c'est quand je clique sur chaque membre une fenêtre de mode pop-up pour ouvrir avec les données de ce membre qui se trouvent dans le fichier XML (je peux utiliser l'ID du membre pour référence). J'ai essayé d'utiliser fancybox ( http://fancybox.net/ ), mais le problème est que ces Membres sont peuplés dynamiquement du XML et lorsque je clique sur un Membre, il ouvre une fenêtre contextuelle avec des données provenant d'un autre Membre.

XML 

<Members> <Member Name = “John Smith” MemberNumber = “JS001” DateofBirth = “09/01/1978” Gender = “Male”/> <Member Name = “Andy Rodrigues” ” MemberNumber = “AR001” DateofBirth = “05/01/1970” Gender = “Male”/> <Member Name = “Julie Dean” ” MemberNumber = “JD001” DateofBirth = “05/01/1970” Gender = “Male”/> </Members> **Stylesheet** Member Name Member Number [John Smith][1] JS001 [Andy Rodriguez][1] AR001 [Julie Dean][1] JD001 **Pop-up** Member John Smith Date of Birth 09/01/1978 Gender Male

Les noms des membres sur la feuille de style sont des liens qui devraient ouvrir des popups avec des informations membres, comme la date de naissance et le genre.

Mon exemple de code à l'aide de FancyBox: 

  <xsl:for-each select="Members/Member"> <tr> <td> <div class="indicator bck-belize-hole brd-peter-river"> <xsl:element name="a"> <xsl:attribute name="href">#inline_DTRXMLInfo</xsl:attribute> <xsl:attribute name="class">various moreinfo whiteicon</xsl:attribute> <xsl:value-of select="@Name"/> </xsl:element> </div> <xsl:value-of select="@Name"/> </td> <td > <font face="Arial" size="2" color="black"> <b> <xsl:value-of select="@MemberNumber"/> </b> </font> </td> </tr> </xsl:for-each> <div class="fancynone"> <div id="inline_DTRXMLInfo" class="fancysize"> <xsl:call-template name="DTRXMLInfo"> <xsl:with-param name="Date Of Birth" select="DateofBirth"></xsl:with-param> </xsl:call-template> </div>

Solution:

Étant donné que les membres sont ajoutés à la feuille de style à la volée, nous devons donner <div> inline_DTRXMLInfo une ID unique qui peut être obtenue en ajoutant MemberNumber à l'ID <div> .

Code: 

  <xsl:attribute name="href">#inline_DTRXMLInfo_<xsl:value-of select="@MemberNumber"/></xsl:attribute> <div id="inline_DTRXMLInfo_{$MemberNumber}" class="fancysize"> <xsl:call-template name="DTRXMLInfo"> <xsl:with-param name="Date Of Birth" select="DateofBirth"></xsl:with-param> </xsl:call-template> </div>