IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Débutant. L’insertion de balises script est-elle possible ?


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Profil pro
    Inscrit en
    Août 2009
    Messages
    186
    Détails du profil
    Informations personnelles :
    Âge : 60
    Localisation : France

    Informations forums :
    Inscription : Août 2009
    Messages : 186
    Par défaut Débutant. L’insertion de balises script est-elle possible ?
    Bonjour,
    Voilà une de mes nouvelles aventures: Je travaille actuellement sur une perspective d'insertion de code, via l'instruction jQuery "before" (voir le code ci-dessous).
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    <html>
    <head>
    <title>Essai</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
     
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <script>
    //<![CDATA[
     
    	$(function(){
    		$("script[class='Repere']").before("<aaa class='Insertion'>alert('Bonjour !');</aaa>");
    	})
     
    //]]>
    </script>
     
    <script class="Repere">
    </script>
     
    </head>
    <body bgcolor="#FFFFFF">
     
    </body>
    </html>
    Ce code fonctionne très bien dans le sens où, effectivement, il me permet d'insérer juste avant <script class="Repere"> le code suivant:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <aaa class='Insertion'>alert('Bonjour !');</aaa>
    Maintenant, si je remplace 'aaa' par 'script' -> Aïe ! Là, il ne le prend plus !
    Est-ce que quelqu'un aurait une alternative à me proposer, en vue de me permettre ce genre d'insertion ?

    Par avance, Merci !

  2. #2
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    Bonjour.

    Un tag script ne possède pas d'attribut class !

    Vous testez des codes de la quatrième dimension !

    Un exemple de ce qui est possible, mais pas recommandé !

    Pour l'instant, l'utilité de ce code m'échappe totalement ! Auriez-vous l'amabilité de m'informer ?

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    <!doctype html>
    <html lang="fr">
    <head>
    	<meta charset="utf-8">
    	<meta name="Author" content="Daniel Hagnoul">
    	<meta name="description" content="Page type">
    	<title>Page type</title>
    	<style>
    		/* BASE */
    		body {
    			background-color:#ffffff;
    			color:#000000;
    			font-family:sans-serif;
    			font-size:medium;
    			font-style:normal;
    			font-weight:normal;
    			line-height:normal;
    			letter-spacing:normal;
    		}
    		h1,h2,h3,h4,h5 {
    			font-family:serif;
    		}
    		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
    			margin:0px;
    			padding:0px;
    		}
    		p {
    			padding:6px;
    			opacity:0.5;
    		}
    		ul,ol,dl {
    			list-style:none;
    			padding-left:6px;
    			padding-top:6px;
    		}
    		li {
    			padding-bottom:6px;
    		}
     
    		/* TEST */
    	</style>
    	<script charset="utf-8" src="../lib/jqueryui/js/jquery-1.4.2.min.js"></script>
     	<script>
    		$(function(){
    			$("#maDivID").prev().append("alert('Bonjour !');");
     
    			$("#maDivID").next().append("$('#maDivID').css('color','red'); function fou(){alert('C\\'est fou !');} fou();");
     
    			$("#maDivID").before("<script>alert('Astucieux ! Utilité ?');<\/script>");
    		});
    	</script>
    </head>
    <body>
        <div id="conteneur">
    		<script></script>
    		<div id="maDivID">
    			<p>Un mot pour remplir</p>
    		</div>
    		<script></script>
        </div> 
    </body>  
    </html>

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  3. #3
    Membre confirmé
    Profil pro
    Inscrit en
    Août 2009
    Messages
    186
    Détails du profil
    Informations personnelles :
    Âge : 60
    Localisation : France

    Informations forums :
    Inscription : Août 2009
    Messages : 186
    Par défaut
    Bon, évidemment,
    je comprends votre réaction... du fait que mon approche peut paraitre un peu "particulière", voire même carrément pas très "conforme"... Enfin, faute d'avoir trouvé une autre alternative sur l'instant, voilà où j'en étais arrivé !
    Sinon, pour répondre à votre intérêt manifeste... et à votre question si "avisée", voilà l'affaire:
    Je travaille depuis quelques temps sur un projet xml/xsl dont une des finalités est de parser chacune des informations <texte> du fichier xml pour l'afficher sous la forme d'une fenêtre qui s'ouvre quand on survole la région du titre correspondant (binôme particulier)... Ca, ça fonctionne très bien...
    Seulement, en situation réelle, sur une même page, je peux avoir facilement 20 ou 30 titres correspondant à autant de messages propres à afficher dans leur fenêtre particulière !
    * Pour m'éviter d'avoir à modifier manuellement, dans le code javascript, chaque ligne correspondant à chacun des binômes :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    $('#bouton1').mouseenter(descente1).mouseenter(tooltip)...
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    $('#bouton2').mouseenter(descente2).mouseenter(tooltip)...
    (...)
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    $('#bouton30').mouseenter(descente30).mouseenter(tooltip)...
    -> J'ai plus qu'envisagé de paramétrer tout cela, via une boucle javascript, qui, du fait "fabriquerait" (par concaténation) chacune de ces lignes... Bon, à priori, jusque là, c'est faisable... Après, chacune de ces lignes, il me faudra un moyen pour l'intégrer au javascript existant déjà D'où l'idée d'employer la fameuse instrucion "before", précédemment évoquée !
    * Voilà le principe qu'en pensez-vous ? Voyez-vous une autre alternative

    Ci-dessous le code utilisé (avec 10 lignes entrées... à la main):
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    <?xml version="1.0" encoding="UTF-8"?>
    <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output method="html" 
    encoding="utf-8" 
    doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN" 
    doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>
     
    <xsl:template match="/">
    	<html xmlns="http://www.w3.org/1999/xhtml">
    	<head>
    	<title>Audio</title>
     
    	<link type="text/css" rel="stylesheet" href="Audio/Audio_css.css" />
     
    	<script type="text/javascript" src="http://souffle56.fr/Site/1-Trouver_les_ressources/Ressources/js/jquery-1.4.2.min.js"></script>
    	<script type="text/javascript" src="http://souffle56.fr/Site/1-Trouver_les_ressources/Ressources/js/jquery-ui-1.8.1.custom.min.js"></script>
    	<script type='text/javascript' src="http://souffle56.fr/Site/1-Trouver_les_ressources/Ressources/js/jquery.timers.js"></script>
    	<script type='text/javascript'>
    	//<![CDATA[
    		$(function(){
     
    			// Paramétrage / CSS -> conformité / W3C (Via jQuery)
    			$(".Container").css("width", 400);
     
     
    			// Ouverture, blocage ou fermeture / fenêtre cachée, via survol ou click sur [+]
    			// (Effets sympas: 'easeInOutCirc', 'easeInOutQuart', 'easeInOutQuint' ou 'easeInOutCubic')
    			$('#bouton1')
    				.mouseenter(descente1)
    				.mouseenter(tooltip)
    				.mouseleave(reset_tempo)
    				.mouseleave(montee1)
    				.toggle( // Si click -> (dé)blocage / disparition / texte caché...
    					function(){
    						$(this).unbind('mouseleave',montee1); 
    					},
    					function(){
    						$(this).mouseleave(montee1);
    					}
    				);
    			function descente1() {
    				$('#bouton1')
    					.unbind('mouseenter',descente1); // Blocage anti-rebonds (si survol répété de l'image)
    				$('#message_numero1').animate({
    					height:'show'
    					},900,'easeInOutCirc',function(){$('#bouton1').mouseenter(descente1);}); // Annulation / Blocage anti-rebonds
    			};
    			function montee1() {
    				$('#message_numero1').animate({
    					height:'hide'
    					},900);
    			};
     
    $('#bouton2').mouseenter(descente2).mouseenter(tooltip).mouseleave(reset_tempo).mouseleave(montee2).toggle(function(){$(this).unbind('mouseleave',montee2);},function(){$(this).mouseleave(montee2);});function descente2(){$('#bouton2').unbind('mouseenter',descente2);$('#message_numero2').animate({height:'show'},900,'easeInOutCirc',function(){$('#bouton2').mouseenter(descente2);});};function montee2(){$('#message_numero2').animate({height:'hide'},900);};
    $('#bouton3').mouseenter(descente3).mouseenter(tooltip).mouseleave(reset_tempo).mouseleave(montee3).toggle(function(){$(this).unbind('mouseleave',montee3);},function(){$(this).mouseleave(montee3);});function descente3(){$('#bouton3').unbind('mouseenter',descente3);$('#message_numero3').animate({height:'show'},900,'easeInOutCirc',function(){$('#bouton3').mouseenter(descente3);});};function montee3(){$('#message_numero3').animate({height:'hide'},900);};
    $('#bouton4').mouseenter(descente4).mouseenter(tooltip).mouseleave(reset_tempo).mouseleave(montee4).toggle(function(){$(this).unbind('mouseleave',montee4);},function(){$(this).mouseleave(montee4);});function descente4(){$('#bouton4').unbind('mouseenter',descente4);$('#message_numero4').animate({height:'show'},900,'easeInOutCirc',function(){$('#bouton4').mouseenter(descente4);});};function montee4(){$('#message_numero4').animate({height:'hide'},900);};
    $('#bouton5').mouseenter(descente5).mouseenter(tooltip).mouseleave(reset_tempo).mouseleave(montee5).toggle(function(){$(this).unbind('mouseleave',montee5);},function(){$(this).mouseleave(montee5);});function descente5(){$('#bouton5').unbind('mouseenter',descente5);$('#message_numero5').animate({height:'show'},900,'easeInOutCirc',function(){$('#bouton5').mouseenter(descente5);});};function montee5(){$('#message_numero5').animate({height:'hide'},900);};
    $('#bouton6').mouseenter(descente6).mouseenter(tooltip).mouseleave(reset_tempo).mouseleave(montee6).toggle(function(){$(this).unbind('mouseleave',montee6);},function(){$(this).mouseleave(montee6);});function descente6(){$('#bouton6').unbind('mouseenter',descente6);$('#message_numero6').animate({height:'show'},900,'easeInOutCirc',function(){$('#bouton6').mouseenter(descente6);});};function montee6(){$('#message_numero6').animate({height:'hide'},900);};
    $('#bouton7').mouseenter(descente7).mouseenter(tooltip).mouseleave(reset_tempo).mouseleave(montee7).toggle(function(){$(this).unbind('mouseleave',montee7);},function(){$(this).mouseleave(montee7);});function descente7(){$('#bouton7').unbind('mouseenter',descente7);$('#message_numero7').animate({height:'show'},900,'easeInOutCirc',function(){$('#bouton7').mouseenter(descente7);});};function montee7(){$('#message_numero7').animate({height:'hide'},900);};
    $('#bouton8').mouseenter(descente8).mouseenter(tooltip).mouseleave(reset_tempo).mouseleave(montee8).toggle(function(){$(this).unbind('mouseleave',montee8);},function(){$(this).mouseleave(montee8);});function descente8(){$('#bouton8').unbind('mouseenter',descente8);$('#message_numero8').animate({height:'show'},900,'easeInOutCirc',function(){$('#bouton8').mouseenter(descente8);});};function montee8(){$('#message_numero8').animate({height:'hide'},900);};
    $('#bouton9').mouseenter(descente9).mouseenter(tooltip).mouseleave(reset_tempo).mouseleave(montee9).toggle(function(){$(this).unbind('mouseleave',montee9);},function(){$(this).mouseleave(montee9);});function descente9(){$('#bouton9').unbind('mouseenter',descente9);$('#message_numero9').animate({height:'show'},900,'easeInOutCirc',function(){$('#bouton9').mouseenter(descente9);});};function montee9(){$('#message_numero9').animate({height:'hide'},900);};
    $('#bouton10').mouseenter(descente10).mouseenter(tooltip).mouseleave(reset_tempo).mouseleave(montee10).toggle(function(){$(this).unbind('mouseleave',montee10);},function(){$(this).mouseleave(montee10);});function descente10(){$('#bouton10').unbind('mouseenter',descente10);$('#message_numero10').animate({height:'show'},900,'easeInOutCirc',function(){$('#bouton10').mouseenter(descente10);});};function montee10(){$('#message_numero10').animate({height:'hide'},900);};
     
     
    			// y = coordonnée verticale de la souris
    			document.onmousemove = function(e){
    				if(!e){
    					e = window.event;
    				}
    				y = e.clientY;
    			};
    			i=1; // Nombre d'affichages du tooltip
     
    			function tooltip() {
    				if (i==1) {
    					// $("#tooltip").css("left", -125).css("top", 3); // Ajustement y du tooltip à la coordonnéee verticale de l'image [+]
    					document.getElementById('tooltip').style.top=y-25+"px";// Ajustement y du tooltip à la coordonnéee verticale y de la souris (précédemment définie)
    					$("#tooltip").oneTime("1s", function() { // Si le survol de l'image est > à 5 sec-> le Tooltips apparait (oneTime -> http://plugins.jquery.com/project/timers)
    						$("#tooltip").fadeIn(2500).delay(2500).fadeOut(1000);
    						i++; // Pour empêcher que le tooltip s'affiche plus d'une fois
    					});
    				}
    			};	
    			function reset_tempo() {
    				$("#tooltip").stopTime(); // Arrêt de la tempo oneTime() si on quitte l'image (stopTime -> http://plugins.jquery.com/project/timers)
    				$("#tooltip").clearQueue();
    				$("#tooltip").fadeOut(1000);
    			};	
     
    		})
    	//]]>
    	</script>
     
    	</head>
    	<body bgcolor="#FFFFFF">
     
    	<div class="Container">
    		<!-- Appel procédure permettant d'afficher chaque bloc de lignes -->
    		<xsl:apply-templates select="enregistrements/auteur/ressource/regroupement" />
    	</div>
     
    	<!-- Image s'affichant 1 fois (quelques secondes) pour proposer de cliquer sur [+] si on le survole -->
    	<div><img id="tooltip" src="Audio/images/Cliquez ici.png"  alt="" /></div>
     
    	</body>
    	</html>
    </xsl:template>
     
    <xsl:template match="regroupement">
        <xsl:apply-templates select="ligne">
    		<!-- "plusCount" -> Comptage du nombre de "cousins" précédant la balise <plus> à partir de la balise courante <regroupement> 
    		pour l'ajouter ensuite au nombre de "frères" précédant chaque balise <plus> concernée 
    		afin de gérer,via les fonctions JQUERY situées dans le <Head> (et le paramétrage des id "message_numero...") 
    		l'affichage des boutons [+] (et du contenu caché correspondant) selon leur ordre d'apparition : -->
    		<xsl:with-param name="plusCount" select="count(preceding-sibling::*/*/plus)"/> 
    		<!-- "imageCount" -> Comptage du nombre de "cousins" précédant la balise <image> à partir de la balise courante <regroupement> 
    		pour l'ajouter ensuite au nombre de "frères" précédant chaque balise <image> concernée 
    		afin de gérer,via les fonctions JQUERY situées dans le <Head> (et le paramétrage des id "message_numero...") 
    		l'affichage des boutons [+] (et du contenu caché correspondant) selon leur ordre d'apparition : -->		
    		<xsl:with-param name="imageCount" select="count(preceding-sibling::*/*/image)"/> 
    	</xsl:apply-templates>
    	<div class="Espace" style="width:389px"></div> <!-- Le "+2" sert à prolonger l'effet d'ombré sur la droite -->
    </xsl:template>
     
     
    <xsl:template match="ligne">
    	<xsl:param name="plusCount"/>
    	<!-- Test si il y a une balise encastrée "<plus>" -->
    	<xsl:if test="plus">
    		<!-- Calcul du numéro d'apparition de la balise encastrée "<plus>" concernée 
    		( =f(nombre de cousins précédents + nombre de frères précédents) ) -->
    		<xsl:variable name="compteur_de_lignes"><xsl:value-of select="$plusCount+count(preceding-sibling::*/plus)+1" /></xsl:variable>
    		<xsl:variable name="bouton"><xsl:value-of select="concat('bouton', $compteur_de_lignes)" /></xsl:variable>
    		<img id="{$bouton}" class="Bouton_plus" src="Audio/images/Plus_mini_2.gif"  alt=""/>
     
    	</xsl:if>
    	<xsl:if test="not(plus or image)"> <!-- Sinon... -->
    		<div class="Bouton_rien">
    		</div>
    	</xsl:if>
     
    	<!-- GESTION PARTIE TEXTE / LA BALISE <ligne> -->
     
    	<xsl:if test="(not(name(following-sibling::*[position()=1]) = 'extrait')) and (not(name(following-sibling::*[position()=1]) = 'surf'))">
    		<div class="Texte" style="width:367px">
    			<xsl:value-of select="text()"/> <!-- Affiche le contenu de la balise actuelle (<ligne>) sans afficher celui de sa balise enfant (<petit>) -->
    		    <xsl:apply-templates select="petit"/>
    		</div>
    	</xsl:if>	
     
     
    	<div class="Ombre_ligne_d"></div>
     
    	<xsl:if test="plus"> <!-- Balise encastrée "<plus>" ? -->
    		<!-- Numérotation / id "message_numero..." -->
    		<xsl:variable name="compteur_de_lignes"><xsl:value-of select="$plusCount+count(preceding-sibling::*/plus)+1" /></xsl:variable>
    		<xsl:variable name="message_numero"><xsl:value-of select="concat('message_numero', $compteur_de_lignes)" /></xsl:variable>
    		<xsl:variable name= "texte_style"><xsl:value-of select= "plus/@style"/></xsl:variable> <!-- Exemple: si @texte="fluo" -->
     
    		<xsl:variable name= "texte_recu"><xsl:value-of select= "plus/text()"/></xsl:variable>
    		<xsl:variable name= "info_complete"><xsl:value-of select="concat($texte_recu, '
    ')" /></xsl:variable>
    		<!-- Gestion / texte caché -->
     
    		<div id="{$message_numero}" class="Texte_caché" style="display:none; width:375px">
    			<span class="{$texte_style}"><xsl:value-of select="$info_complete"/></span> <!-- Affichage éventuel du texte caché -->
    			 <!-- Permet de faire un "retour chariot" pour afficher une ligne vide juste après le texte du xml -->
    		</div>
     
    	</xsl:if>	
     
    </xsl:template>
     
    </xsl:stylesheet>
    Si besoin, je peux retirer toute la partie XSLT pour le rendre plus "accessible", façon HTML !

  4. #4
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    Bonsoir.

    Je n'ai pas tous les éléments pour réaliser un test, mais pourquoi ne pas utiliser les classes disponibles :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    <script>
    		function descente1(elem){
    			// Blocage anti-rebonds (si survol répété de l'image)
    			$(elem).unbind('mouseenter',descente1(elem));
     
    			$(elem).next('.Texte_caché').animate({height:'show'},900,'easeInOutCirc',function(){
    				$(elem).mouseenter(descente1(elem));
    			}); // Annulation / Blocage anti-rebonds
    		};
     
    		function montee1(elem){
    			$(elem).next('.Texte_caché').animate({height:'hide'},900);
    		};
     
    		function tooltip() {
    			if (i==1) {
    				// $("#tooltip").css("left", -125).css("top", 3); // Ajustement y du tooltip à la coordonnéee verticale de l'image [+]
    				document.getElementById('tooltip').style.top=y-25+"px";// Ajustement y du tooltip à la coordonnéee verticale y de la souris (précédemment définie)
    				$("#tooltip").oneTime("1s", function() { // Si le survol de l'image est > à 5 sec-> le Tooltips apparait (oneTime -> http://plugins.jquery.com/project/timers)
    					$("#tooltip").fadeIn(2500).delay(2500).fadeOut(1000);
    					i++; // Pour empêcher que le tooltip s'affiche plus d'une fois
    				});
    			}
    		};
     
    		function reset_tempo() {
    			$("#tooltip").stopTime(); // Arrêt de la tempo oneTime() si on quitte l'image (stopTime -> http://plugins.jquery.com/project/timers)
    			$("#tooltip").clearQueue();
    			$("#tooltip").fadeOut(1000);
    		};
     
    	$(function(){
    		$('.Bouton_plus').mouseenter(function(){
    			descente1(this);
    			tooltip();
    		}).mouseleave(function(){
    			reset_tempo();
    			montee1(this);
    		}).toggle( // Si click -> (dé)blocage / disparition / texte caché...
    			function(){
    				var self = this;
     
    				$(this).unbind('mouseleave',montee1(self)); 
    			},
    			function(){
    				var self = this;
     
    				$(this).mouseleave(montee1(self));
    			}
    		);
    	});
    </script>

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  5. #5
    Membre confirmé
    Profil pro
    Inscrit en
    Août 2009
    Messages
    186
    Détails du profil
    Informations personnelles :
    Âge : 60
    Localisation : France

    Informations forums :
    Inscription : Août 2009
    Messages : 186
    Par défaut
    Merci danielhagnoul,
    pour le code que vous m'avez proposé... Effectivement, ça m'ouvre à une alternative incomparablement plus "soft" que la forme de concaténation que j'avais envisagé... Du fait, j'ai fait quelques essais, en simplifiant au plus possible sur une base html (avant d'essayer en XSLT), notamment / la fonction ".next" que vous avez intégré au code Voici ce que ça donne :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
     
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     
    <title>Audio</title>
     
    <script type="text/javascript" src="http://souffle56.fr/Site/1-Trouver_les_ressources/Ressources/js/jquery-1.4.2.min.js"></script>
    <script type='text/javascript'>
     
    	elem='#bouton1';
     
    	function descente1(elem) {
    		$(elem).next('.Texte_cache').hide("slow"); // Annulation / Blocage anti-rebonds
    	};
     
    	$(function(){
    		$(elem)
    			.mouseenter(function(){
    				descente1(elem);
    			});
    	})
     
    </script>
     
    </head>
     
    <body bgcolor="#FFFFFF">
     
    <div class="Container" style="width:400px">
     
    	<div id="bouton1" class="Bouton_plus">[+]</div>
    	<div>Div intermédiaire</div>
    	<div id="message_numero1" class="Texte_cache" style="width:375px">
    		<span class="">Je suis plutôt content... Je suis plutôt content... Je suis plutôt content... Je suis plutôt content... Je suis plutôt content... 
    		</span>
    	</div>
     
    	<div id="bouton2" class="Bouton_plus">[+]</div>
    	<div class="Texte" style="width:367px">Mon 2ème texte</div>
    	<div id="message_numero2" class="Texte_cache" style="width:375px">
    		<span class="">Je suis super content... Je suis super content... Je suis super content... Je suis super content... Je suis super content... 
    		</span>
    	</div>
     
    	<div id="bouton3" class="Bouton_plus">[+]</div>
    	<div class="Texte" style="width:367px">Mon 3ème texte</div>
    	<div id="message_numero3" class="Texte_cache" style="width:375px">
    		<span class="">Je suis super content... Je suis super content... Je suis super content... Je suis super content... Je suis super content... 
    		</span>
    	</div>
     
    </div>
     
    </body>
    </html>
    * Si je survole [+], rien ne se passe
    Mais si je retire la partie
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <div>Div intermédiaire</div>
    -> le texte d'après s'efface bien correctement !

    Est-ce à dire que la fonction ".next" ne sait prendre en compte une classe que si celle-ci est placée juste après l'élément concerné
    A priori, il semblerait -> Du fait, j'ai opté pour cette fonction jQuery ->
    En remplaçant
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    $(elem).next('.Texte_cache').hide("slow");
    par
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    $("div+.Texte_cache").hide("slow");
    Voilà ce que ça me donne:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
     
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     
    <title>Audio</title>
     
    <script type="text/javascript" src="http://souffle56.fr/Site/1-Trouver_les_ressources/Ressources/js/jquery-1.4.2.min.js"></script>
    <script type='text/javascript'>
     
    	elem='#bouton1';
     
    	function descente1(elem) {
    		$("div+.Texte_cache").hide("slow"); // Annulation / Blocage anti-rebonds
    	};
     
    	$(function(){
    		$(elem)
    			.mouseenter(function(){
    				descente1(elem);
    			});
    	})
     
    </script>
     
    </head>
     
    <body bgcolor="#FFFFFF">
     
    <div class="Container" style="width:400px">
     
    	<div id="bouton1" class="Bouton_plus">[+]</div>
    	<div>Div intermédiaire</div>
    	<div id="message_numero1" class="Texte_cache" style="width:375px">
    		<span class="">Je suis plutôt content... Je suis plutôt content... Je suis plutôt content... Je suis plutôt content... Je suis plutôt content... 
    		</span>
    	</div>
     
    	<div id="bouton2" class="Bouton_plus">[+]</div>
    	<div class="Texte" style="width:367px">Mon 2ème texte</div>
    	<div id="message_numero2" class="Texte_cache" style="width:375px">
    		<span class="">Je suis super content... Je suis super content... Je suis super content... Je suis super content... Je suis super content... 
    		</span>
    	</div>
     
    	<div id="bouton3" class="Bouton_plus">[+]</div>
    	<div class="Texte" style="width:367px">Mon 3ème texte</div>
    	<div id="message_numero3" class="Texte_cache" style="width:375px">
    		<span class="">Je suis super content... Je suis super content... Je suis super content... Je suis super content... Je suis super content... 
    		</span>
    	</div>
     
    </div>
     
    </body>
    </html>
    Là, ça marche bien... sauf que là, ça n'est pas qu'une fenêtre qui est fermée... mais toutes les suivantes qui sont concernées !

    * N'y aurait-il pas un moyen pour demander à ce que seule la 1ère occurence rencontrée soit prise en compte
    * Du fait de ma modif, l'élément "$(elem)" de
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    $(elem).next('.Texte_cache').hide("slow");
    a disparu -> Comment peut-on l'inclure à nouveau

    Par avance Merci pour toute suggestion à ce propos !

  6. #6
    Membre expérimenté Avatar de sayari.dev
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mai 2010
    Messages
    142
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Algérie

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mai 2010
    Messages : 142
    Par défaut
    Bonsoir,


    Si j'ai bien compris ton problème, voivi un script que je pense fonctionnel

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
     
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     
    <title>Audio</title>
     
    <script type="text/javascript" src="http://souffle56.fr/Site/1-Trouver_les_ressources/Ressources/js/jquery-1.4.2.min.js"></script>
    <script type='text/javascript'>
     
    	elem='.Bouton_plus';
     
    	function descente1(el) {
    		$(el).next('div').next(".Texte_cache").hide("slow"); // Annulation / Blocage anti-rebonds
    	};
     
    	$(function(){
    		$(elem)
    			.mouseenter(function(e){
    				descente1(e.target);
    			});
    	})
     
    </script>
     
    </head>
     
    <body bgcolor="#FFFFFF">
     
    <div class="Container" style="width:400px">
     
    	<div id="bouton1" class="Bouton_plus">[+]</div>
    	<div>Div intermédiaire</div>
    	<div id="message_numero1" class="Texte_cache" style="width:375px">
    		<span class="">Je suis plutôt content... Je suis plutôt content... Je suis plutôt content... Je suis plutôt content... Je suis plutôt content... 
    		</span>
    	</div>
     
    	<div id="bouton2" class="Bouton_plus">[+]</div>
    	<div class="Texte" style="width:367px">Mon 2ème texte</div>
    	<div id="message_numero2" class="Texte_cache" style="width:375px">
    		<span class="">Je suis super content... Je suis super content... Je suis super content... Je suis super content... Je suis super content... 
    		</span>
    	</div>
     
    	<div id="bouton3" class="Bouton_plus">[+]</div>
    	<div class="Texte" style="width:367px">Mon 3ème texte</div>
    	<div id="message_numero3" class="Texte_cache" style="width:375px">
    		<span class="">Je suis super content... Je suis super content... Je suis super content... Je suis super content... Je suis super content... 
    		</span>
    	</div>
     
    </div>
     
    </body>
    </html>

Discussions similaires

  1. la balise fieldset est elle spécifiquement pour les balises form
    Par razily dans le forum Balisage (X)HTML et validation W3C
    Réponses: 1
    Dernier message: 03/03/2012, 22h52
  2. Réponses: 3
    Dernier message: 19/09/2011, 12h35
  3. Sortie en XML et balises encastrées : Est-ce possible ?
    Par souffle56 dans le forum Développement de jobs
    Réponses: 3
    Dernier message: 18/04/2011, 17h42
  4. javascript dans le src de la balise script, est-ce possible?
    Par dam_moreyllo dans le forum Général JavaScript
    Réponses: 13
    Dernier message: 13/01/2006, 17h18
  5. une interpolation de forme est elle possible
    Par tetsuo chima dans le forum Flash
    Réponses: 3
    Dernier message: 07/10/2003, 16h31

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo