[jQuery UI 1.8.17] Lien externe ouvrant un onglet et accordéon [Résolu]

djibril · 19/01/2012, 10h03

Bonjour,

J'ai ma page sur laquelle j'ai des onglets et à l'intérieur d'un onglet, j'ai un menu accordéon. Tout fonctionne correctement.

Je souhaiterais taper dans l'URL ceci par exemple : www.mon-site.fr#TOTO et qu'ainsi, la page se positionne dans un onglet spécifique et ouvre l'accordéon dont le lien est #TOTO.

Mon code jQuery perso est le suivant :

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
// JavaScript Document
$(function(){
 
  $( "button", ".ma-jquery" ).button();
 
  // Accordion
	$( "#mon-accordeon" ).accordion({ 
    header: "h3",
    collapsible: true,
    fillSpace: true,
    navigation: true
  });
 
  // Tabs
	$('#id-tpl-tabs').tabs({ 
    fx: { opacity: 'toggle' },
    event: "mouseover", 
  });
 
});
 
$(function() {
		$( "#accordionResizer" ).resizable({
			minHeight: 300,
			minWidth: 400,
			resize: function() {
				$( "#mon-accordeon" ).accordion( "resize" );
			}
		});
});

Le HTML

Code html :

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
  <div id="id-tpl-tabs-2">
 
    <!-- Accordéons-->
    <div id="accordionResizer" style="padding:10px; width:600px; height:350px;" class="ui-widget-content">
    <div id="mon-accordeon">
 
      			<div>
      				<h3><a href="#TOTO">Articles Linux</a></h3>
      				<div>
            	  <ul>
 
                  <li><a href="http://djibril.developpez.com/tutoriels/perl/ecrire-facilement-plugin-nagios-perl/" title="Plugins Nagios en Perl">Écrire facilement un plugin Nagios en Perl</a> (Date de publication : 05/03/2011)</li>
              	  <li><a href="http://djibril.developpez.com/tutoriels/linux/nagios-pour-debutant/" title="Nagios et debutants">Installation et configuration de Nagios pour d&eacute;butants</a> (Date de publication : 26/01/2011)</li>
                </ul>
              </div>
...

En Entête de mon HTML, j'ai mis ceci pour faire un test :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
	<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
	<script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script>
 
	<script type="text/javascript" src="js/perso/jquery.js"></script>
<script type="text/javascript">
$( "#mon-accordeon" ).accordion({ active: 2 });
$( "#id-tpl-tabs" ).tabs({ selected: 1 });
</script>

Mais j'ai l'impression que le code javascript n'est pas pris en compte. L'onglet n°1 n'est pas ouvert au chargement de la page et l'accordéon 2 non plus.

si dans mon fichier js, je mets ceci :

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
  // Accordion
	$( "#mon-accordeon" ).accordion({ 
    header: "h3",
    collapsible: true,
    fillSpace: true,
    navigation: true
    active: 2
  });
 
  // Tabs
  $('#id-tpl-tabs').tabs({ 
    fx: { opacity: 'toggle' },
    event: "mouseover", 
   selected: 1
  });

ça fonctionnera, mais ce n'est pas ce que je veux car ce sera figé. Moi le but final est de pouvoir via un lien externe activer l'accordéon 1, ou 2 ou 3...

danielhagnoul · 19/01/2012, 12h43

Bonjour

Voici un exemple (testé avec F et C), lire les commentaires dans le code.

Les activations doivent être dans une fonction qui sera appelée après le chargement de la page ou être dans $(window).load(function(){ ... });

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
175
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/humanity/jquery-ui.css">
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/lib/jPicker/css/jPicker.dvjh-1.1.6.min.css" />
	<style>
		/* Base */
		html {font-size:62.5%; } /* Pour 62.5% 1rem =~ 10px */
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {margin:0; padding:0; }
		body {background-color:rgb(122, 79, 79); color:#000000; font-family:sans-serif; font-size:1.4rem; font-style:normal; font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 {font-family:'Redressed', cursive; padding:0.6rem; }
		p, div, td {word-wrap:break-word; }
		pre, code {white-space:pre-wrap; word-wrap:break-word; }
		img, input, textarea, select {max-width:100%; }
        img {border:none; }
		h1 {font-size:2.4rem; text-shadow: 0.4rem 0.4rem 0.4rem #bbbbbb; text-align:center; }
		p {padding:0.6rem; }
		.conteneur {width:95%; min-width:80rem; min-height:30rem; margin:1.2rem auto; background-color:#ffffff; color:#000000; border:0.1rem solid #666666; }
		footer {margin-left:3.6rem; }
 
		/* -- */
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<section class="conteneur">
 
<div id="id-tpl-tabs">
	<ul>
		<li><a href="#id-tpl-tabs-1">Nunc tincidunt</a></li>
		<li><a href="#id-tpl-tabs-2">Proin dolor</a></li>
		<li><a href="#id-tpl-tabs-3">Aenean lacinia</a></li>
	</ul>
	<div id="id-tpl-tabs-1">
		<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
	</div>
	<div id="id-tpl-tabs-2">				
		<div id="accordionResizer" style="padding:10px; width:600px; height:350px;" class="ui-widget-content">
			<div id="mon-accordeon">
				<h3><a href="#">Section 1</a></h3>
				<div>
					<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
				</div>
				<h3><a href="#TOTO">Articles Linux</a></h3>
				<div>
					<ul>
						<li>
							<a href="http://djibril.developpez.com/tutoriels/perl/ecrire-facilement-plugin-nagios-perl/" title="Plugins Nagios en Perl">Écrire facilement un plugin Nagios en Perl</a> (Date de publication : 05/03/2011)
						</li>
						<li>
							<a href="http://djibril.developpez.com/tutoriels/linux/nagios-pour-debutant/" title="Nagios et debutants">Installation et configuration de Nagios pour d&eacute;butants</a> (Date de publication : 26/01/2011)
						</li>
					</ul>
				</div>
				<h3><a href="#">Section 3</a></h3>
				<div>
					<ul>
						<li>List item one</li>
						<li>List item two</li>
						<li>List item three</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<div id="id-tpl-tabs-3">
		<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
		<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
	</div>
</div>
 
	</section>
	<footer itemscope itemtype="http://data-vocabulary.org/Person">
		<time datetime="2012-01-19T12:40:51.000+01:00" pubdate>2012-01-19</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
	</footer>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
	<script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/i18n/jquery-ui-i18n.min.js"></script>
	<script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>
	<script charset="utf-8" src="http://danielhagnoul.developpez.com/lib/jPicker/jpicker-1.1.6.min.js"></script>
	<script>	
		"use strict";
 
		// Date ISO format long US
		Date.prototype.formatISO = function(){
			this._nowFormat = 'aaaa-mm-jjThh:ii:ss.000Szz:00';
			this._toLen2 = function(_nowStr){
				_nowStr = _nowStr.toString();
				return ('0'+_nowStr).substr(-2,2);
			};
			this._nowFormat = this._nowFormat.replace(/j+/, this._toLen2(this.getDate()));
			this._nowFormat = this._nowFormat.replace(/m+/, this._toLen2(this.getMonth()+1));
			this._nowFormat = this._nowFormat.replace(/a+/, this.getFullYear());
			this._nowFormat = this._nowFormat.replace(/h+/, this._toLen2(this.getHours()));
			this._nowFormat = this._nowFormat.replace(/i+/, this._toLen2(this.getMinutes()));
			this._nowFormat = this._nowFormat.replace(/s+/, this._toLen2(this.getSeconds()));
			this._nowFormat = this._nowFormat.replace(/S+/, (this.getTimezoneOffset() < 0) ? ("+") : ("-"));
			this._nowFormat = this._nowFormat.replace(/z+/, this._toLen2(Math.abs(this.getTimezoneOffset()/60)));
			return this._nowFormat;
		};
 
		$(function(){
			/* Base */
			console.log(new Date().formatISO());
 
			/* -- */
			$('#id-tpl-tabs').tabs({ 
				//fx: { opacity: 'toggle' }, // ?? pas compatible avec active sur accordion
				event: "mouseover" //, ?
			});
 
			$( "#mon-accordeon" ).accordion({
				header: "h3",
				autoHeight: false,
				//fillSpace: true, // provoque un débordement du tab !
				collapsible: true,
				navigation: true
			});
 
			$( "#accordionResizer" ).resizable({
				minHeight: 300,
				minWidth: 400,
				resize: function() {
					$( "#mon-accordeon" ).accordion( "resize" );
				}
			});
 
			/*
			 * jPicker : http://www.digitalmagicpro.com/jPicker/,
			 * est un outil pour choisir rapidement une couleur
			 *
			 * Sue Firefox, avec Web Developper, cette version
			 * de jPicker provoque des avertissements CSS !
			 *
			 * Mais il est très pratique !
			 */
			$.fn.jPicker.defaults.images.clientPath="http://danielhagnoul.developpez.com/lib/jPicker/images/";
 
			$(".conteneur").jPicker({
				window: {
					expandable : true,
					title : "jPicker : choissisez une couleur :",
					alphaSupport : true,
					position : {
						x : 'screenCenter',
						y : 'top'
					}
				},
				color : {
					active : new $.jPicker.Color({
						r : 210,
						g : 214,
						b : 98,
						a : 128
					})
				}
			}, function( color, context ){
				var c = color.val("all");
				if ( c ){
					$( "body" ).css( "background-color", "rgba(" + c.r + "," + c.g + "," + c.b + "," + (c.a/255).toFixed(2) + ")" );
				}
			});
		});
 
		$(window).load(function(){
			$( "#id-tpl-tabs" ).tabs({ selected: 1 });
			$( "#mon-accordeon" ).accordion({ active: 1 });
		});
	</script>
</body>  
</html>

djibril · 19/01/2012, 13h53

Merci pour ta réponse,

Là, tu l'as mis en dur. Mais en dur, chez moi c'était aussi ok. D'ailleurs, pour tester, voici ce que j'ai fait via ton code.

Code html :

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
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/humanity/jquery-ui.css">
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/lib/jPicker/css/jPicker.dvjh-1.1.6.min.css" />
	<style>
		/* Base */
		html {font-size:62.5%; } /* Pour 62.5% 1rem =~ 10px */
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {margin:0; padding:0; }
		body {background-color:rgb(122, 79, 79); color:#000000; font-family:sans-serif; font-size:1.4rem; font-style:normal; font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 {font-family:'Redressed', cursive; padding:0.6rem; }
		p, div, td {word-wrap:break-word; }
		pre, code {white-space:pre-wrap; word-wrap:break-word; }
		img, input, textarea, select {max-width:100%; }
        img {border:none; }
		h1 {font-size:2.4rem; text-shadow: 0.4rem 0.4rem 0.4rem #bbbbbb; text-align:center; }
		p {padding:0.6rem; }
		.conteneur {width:95%; min-width:80rem; min-height:30rem; margin:1.2rem auto; background-color:#ffffff; color:#000000; border:0.1rem solid #666666; }
		footer {margin-left:3.6rem; }
 
		/* -- */
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<section class="conteneur">
 
<div id="id-tpl-tabs">
	<ul>
		<li><a href="#id-tpl-tabs-1">Nunc tincidunt</a></li>
		<li><a href="#id-tpl-tabs-2">Proin dolor</a></li>
		<li><a href="#id-tpl-tabs-3">Aenean lacinia</a></li>
	</ul>
	<div id="id-tpl-tabs-1">
		<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
	</div>
	<div id="id-tpl-tabs-2">				
		<div id="accordionResizer" style="padding:10px; width:600px; height:350px;" class="ui-widget-content">
			<div id="mon-accordeon">
				<h3><a href="#TOTO">Section 1</a></h3>
				<div>
					<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
				</div>
				<h3><a href="#TATA">Articles Linux</a></h3>
				<div>
					<ul>
						<li>
							<a href="http://djibril.developpez.com/tutoriels/perl/ecrire-facilement-plugin-nagios-perl/" title="Plugins Nagios en Perl">Écrire facilement un plugin Nagios en Perl</a> (Date de publication : 05/03/2011)
						</li>
						<li>
							<a href="http://djibril.developpez.com/tutoriels/linux/nagios-pour-debutant/" title="Nagios et debutants">Installation et configuration de Nagios pour d&eacute;butants</a> (Date de publication : 26/01/2011)
						</li>
					</ul>
				</div>
				<h3><a href="#TUTU">Section 3</a></h3>
				<div>
					<ul>
						<li>List item one</li>
						<li>List item two</li>
						<li>List item three</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<div id="id-tpl-tabs-3">
		<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
		<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
	</div>
</div>
 
	</section>
	<footer itemscope itemtype="http://data-vocabulary.org/Person">
		<time datetime="2012-01-19T12:40:51.000+01:00" pubdate>2012-01-19</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
	</footer>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
	<script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/i18n/jquery-ui-i18n.min.js"></script>
	<script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>
	<script charset="utf-8" src="http://danielhagnoul.developpez.com/lib/jPicker/jpicker-1.1.6.min.js"></script>
	<script>
		// JavaScript Document
$(function(){
 
  $( "button", ".ma-jquery" ).button();
 
  // Accordion
	$( "#mon-accordeon" ).accordion({ 
    header: "h3",
    collapsible: true,
    fillSpace: true,
    navigation: true,
    active: 2
  });
 
  // Tabs
	$('#id-tpl-tabs').tabs({ 
    fx: { opacity: 'toggle' },
    event: "mouseover",
    selected: 1 
  });
 
});
 
$(function() {
		$( "#accordionResizer" ).resizable({
			minHeight: 300,
			minWidth: 400,
			resize: function() {
				$( "#mon-accordeon" ).accordion( "resize" );
			}
		});
});
 
 
 
 
	</script>
</body>  
</html>

Maintenant, ce que je voudrai, c'est ne pas mettre en dur active: 2 et selected: 1.
Je voudrai que lorsque tu mets l'url fichier.html#TUTU ou fichier.php?id=TUTU => la page s'ouvre sur l'onglet proin dolor et la section 3.
Mon prog est du PHP, donc je peux récupérer l'argument passé à l'URL. Mon souci est que je ne sais pas comment dire à jquery de se mettre dans tel onglet et ouvrir tel accordéon (comme cela peut être fait à l'initialisation en dur).

Comment lancer ce code :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<script type="text/javascript">
$( "#mon-accordeon" ).accordion({ active: 2 });
$( "#id-tpl-tabs" ).tabs({ selected: 1 });
</script>

Sachant que 2 et 1 sont variables.

Merci

Bovino · 19/01/2012, 14h09

Il faudrait connaitre le lien entre tes libellés et les indices, mais en gros, tu pourrais essayer un truc du genre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<script type="text/javascript">
var page = ['TOTO', 'TITI', 'TATA'].indexOf(location.hash);
$( "#mon-accordeon" ).accordion({ active: page+1 });
$( "#id-tpl-tabs" ).tabs({ selected: page });
</script>

EDIT : Arf... non, ça ne marchera pas avec IE < 9

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var references = {'toto': 1, 'titi': 2, 'tata': 3};
var page = reference[location.hash)];

djibril · 19/01/2012, 14h51

J'ai rien compris

!

djibril · 19/01/2012, 14h55

Voici un code simplifié

Code html :

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
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>TEST jQuery</title>
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/humanity/jquery-ui.css">
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/lib/jPicker/css/jPicker.dvjh-1.1.6.min.css" />
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
	<script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/i18n/jquery-ui-i18n.min.js"></script>
	<script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>
	<script charset="utf-8" src="http://danielhagnoul.developpez.com/lib/jPicker/jpicker-1.1.6.min.js"></script>
	<script>
		// JavaScript Document
$(function(){
 
  $( "button", ".ma-jquery" ).button();
 
  // Accordion
	$( "#mon-accordeon" ).accordion({ 
    header: "h3",
    collapsible: true,
    fillSpace: true,
    navigation: true,
  });
 
  // Tabs
	$('#id-tpl-tabs').tabs({ 
    fx: { opacity: 'toggle' },
    event: "mouseover", 
  });
 
});
 
$(function() {
		$( "#accordionResizer" ).resizable({
			minHeight: 300,
			minWidth: 400,
			resize: function() {
				$( "#mon-accordeon" ).accordion( "resize" );
			}
		});
});
 
 
 
 
	</script>
  </head>
<body>
	<h1>TEST jQuery</h1>
 
<div id="id-tpl-tabs">
	<ul>
		<li><a href="#id-tpl-tabs-1">Nunc tincidunt</a></li>
		<li><a href="#id-tpl-tabs-2">Proin dolor</a></li>
		<li><a href="#id-tpl-tabs-3">Aenean lacinia</a></li>
	</ul>
	<div id="id-tpl-tabs-1">
		<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
	</div>
	<div id="id-tpl-tabs-2">				
		<div id="accordionResizer" style="padding:10px; width:600px; height:350px;" class="ui-widget-content">
			<div id="mon-accordeon">
				<h3><a href="#TOTO">Section 1</a></h3>
				<div>
					<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
				</div>
				<h3><a href="#TATA">Articles Linux</a></h3>
				<div>
					<ul>
						<li>
							<a href="http://djibril.developpez.com/tutoriels/perl/ecrire-facilement-plugin-nagios-perl/" title="Plugins Nagios en Perl">Écrire facilement un plugin Nagios en Perl</a> (Date de publication : 05/03/2011)
						</li>
						<li>
							<a href="http://djibril.developpez.com/tutoriels/linux/nagios-pour-debutant/" title="Nagios et debutants">Installation et configuration de Nagios pour d&eacute;butants</a> (Date de publication : 26/01/2011)
						</li>
					</ul>
				</div>
				<h3><a href="#TUTU">Section 3</a></h3>
				<div>
				<p>Bonjour section 3</p>
					<ul>
						<li>List item one</li>
						<li>List item two</li>
						<li>List item three</li>
					</ul>
				</div>
			</div>
<span class="ui-icon ui-icon-grip-dotted-horizontal" style="margin:2px auto;"></span>
</div><!-- End accordionResizer -->
 
	</div>
	<div id="id-tpl-tabs-3">
		<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
		<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
	</div>
</div>
 
<script type="text/javascript">
var references = {'toto': 1, 'titi': 2, 'tata': 3};
var page = reference[location.hash)];
$( "#mon-accordeon" ).accordion({ active: page+1 });
$( "#id-tpl-tabs" ).tabs({ selected: page });
</script>
</body>  
</html>

Voici l'url pour accéder à cette page : http://djibril.developpez.com/temp/testquery.html

Bovino · 19/01/2012, 15h19

Citation:

Envoyé par djibril

J'ai rien compris

!

Ce que je voulais dire, c'est que ton lien (dans ton premier message) est du style : www.mon-site.fr#TOTO et que cette URL doit permettre de déterminer des valeurs numériques :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
$( "#mon-accordeon" ).accordion({ active: 2 });
$( "#id-tpl-tabs" ).tabs({ selected: 1 });

il faut donc une table de conversion entre les libellés et les valeurs numériques associées.

djibril · 19/01/2012, 15h22

Sans même parler de liens, le problème Bovino, c'est que le code suivant ne fait rien :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
$( "#mon-accordeon" ).accordion({ active: 2 });
$( "#id-tpl-tabs" ).tabs({ selected: 1 });

si je le mets en dehors de l'entête, il ne produit rien et rien ne se passe.

danielhagnoul · 19/01/2012, 20h22

Bonsoir

C'est la partie la plus simple, il suffit de comparer le "hash" avec les "href".

Pour mon exemple de code :

[Edit, utilisation des setter et une bogue]

Il y a un problème lorsque i == 0 (pout #TOTO), le volet s'ouvre et se referme. Pour les autres valeurs de i le fonctionnement est correct. C'est peut-être une bogue de UI Accordion, les bogues sur les widgets ne sont pas rares il suffit de voir l'historique des mises à jour de la branche 1.8.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
$(window).load(function(){
	var hash = "#TOTO"; // window.location.hash;
 
	$( "#mon-accordeon" ).find("h3 > a").each( function( i, item ){
 
		// console.log( i, hash, $( item ).attr( "href" ) );
 
		if ( $( item ).attr( "href" ) === hash ){
			$( "#id-tpl-tabs" ).tabs( "option", "selected", 1 );
			$( "#mon-accordeon" ).accordion( "option", "active", i );				
		}
	});
});

danielhagnoul · 19/01/2012, 21h20

Bogue résolu ! Il faut utiliser l'option "active : false" en même temps que "collapside : true" lorsque l'on veut programmer l'activation des volets.

Mon exemple complet et 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
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
175
176
177
178
179
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/humanity/jquery-ui.css">
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/lib/jPicker/css/jPicker.dvjh-1.1.6.min.css" />
	<style>
		/* Base */
		html {font-size:62.5%; } /* Pour 62.5% 1rem =~ 10px */
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {margin:0; padding:0; }
		body {background-color:rgb(122, 79, 79); color:#000000; font-family:sans-serif; font-size:1.4rem; font-style:normal; font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 {font-family:'Redressed', cursive; padding:0.6rem; }
		p, div, td {word-wrap:break-word; }
		pre, code {white-space:pre-wrap; word-wrap:break-word; }
		img, input, textarea, select {max-width:100%; }
        img {border:none; }
		h1 {font-size:2.4rem; text-shadow: 0.4rem 0.4rem 0.4rem #bbbbbb; text-align:center; }
		p {padding:0.6rem; }
		.conteneur {width:95%; min-width:80rem; min-height:30rem; margin:1.2rem auto; background-color:#ffffff; color:#000000; border:0.1rem solid #666666; }
		footer {margin-left:3.6rem; }
 
		/* -- */
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<section class="conteneur">
 
<div id="id-tpl-tabs">
	<ul>
		<li><a href="#id-tpl-tabs-1">Nunc tincidunt</a></li>
		<li><a href="#id-tpl-tabs-2">Proin dolor</a></li>
		<li><a href="#id-tpl-tabs-3">Aenean lacinia</a></li>
	</ul>
	<div id="id-tpl-tabs-1">
		<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
	</div>
	<div id="id-tpl-tabs-2">				
		<div id="accordionResizer" style="padding:10px; width:600px; height:350px;" class="ui-widget-content">
			<div id="mon-accordeon">
					<h3><a href="#TOTO">Section 1</a></h3>
					<div>
							<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
					</div>
					<h3><a href="#TATA">Articles Linux</a></h3>
					<div>
							<ul>
									<li>
											<a href="http://djibril.developpez.com/tutoriels/perl/ecrire-facilement-plugin-nagios-perl/" title="Plugins Nagios en Perl">Écrire facilement un plugin Nagios en Perl</a> (Date de publication : 05/03/2011)
									</li>
									<li>
											<a href="http://djibril.developpez.com/tutoriels/linux/nagios-pour-debutant/" title="Nagios et debutants">Installation et configuration de Nagios pour d&eacute;butants</a> (Date de publication : 26/01/2011)
									</li>
							</ul>
					</div>
					<h3><a href="#TUTU">Section 3</a></h3>
					<div>
							<ul>
									<li>List item one</li>
									<li>List item two</li>
									<li>List item three</li>
							</ul>
					</div>
			</div>
		</div>
	</div>
	<div id="id-tpl-tabs-3">
		<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
		<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
	</div>
</div>
 
	</section>
	<footer itemscope itemtype="http://data-vocabulary.org/Person">
		<time datetime="2012-01-19T12:40:51.000+01:00" pubdate>2012-01-19</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
	</footer>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
	<script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/i18n/jquery-ui-i18n.min.js"></script>
	<script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>
	<script charset="utf-8" src="http://danielhagnoul.developpez.com/lib/jPicker/jpicker-1.1.6.min.js"></script>
	<script>	
		"use strict";
 
		// Date ISO format long US
		Date.prototype.formatISO = function(){
			this._nowFormat = 'aaaa-mm-jjThh:ii:ss.000Szz:00';
			this._toLen2 = function(_nowStr){
				_nowStr = _nowStr.toString();
				return ('0'+_nowStr).substr(-2,2);
			};
			this._nowFormat = this._nowFormat.replace(/j+/, this._toLen2(this.getDate()));
			this._nowFormat = this._nowFormat.replace(/m+/, this._toLen2(this.getMonth()+1));
			this._nowFormat = this._nowFormat.replace(/a+/, this.getFullYear());
			this._nowFormat = this._nowFormat.replace(/h+/, this._toLen2(this.getHours()));
			this._nowFormat = this._nowFormat.replace(/i+/, this._toLen2(this.getMinutes()));
			this._nowFormat = this._nowFormat.replace(/s+/, this._toLen2(this.getSeconds()));
			this._nowFormat = this._nowFormat.replace(/S+/, (this.getTimezoneOffset() < 0) ? ("+") : ("-"));
			this._nowFormat = this._nowFormat.replace(/z+/, this._toLen2(Math.abs(this.getTimezoneOffset()/60)));
			return this._nowFormat;
		};
 
		$(function(){
			/* Base */
			console.log(new Date().formatISO());
 
			/* -- */
			$('#id-tpl-tabs').tabs({ 
				event: "mouseover"
			});
 
			$( "#mon-accordeon" ).accordion({
				header: "h3",
				autoHeight: false,
				active : false,
				collapsible: true
			});
 
			$( "#accordionResizer" ).resizable({
				minHeight: 300,
				minWidth: 400,
				resize: function() {
					$( "#mon-accordeon" ).accordion( "resize" );
				}
			});
 
			/*
			 * jPicker : http://www.digitalmagicpro.com/jPicker/,
			 * est un outil pour choisir rapidement une couleur
			 *
			 * Sue Firefox, avec Web Developper, cette version
			 * de jPicker provoque des avertissements CSS !
			 *
			 * Mais il est très pratique !
			 */
			$.fn.jPicker.defaults.images.clientPath="http://danielhagnoul.developpez.com/lib/jPicker/images/";
 
			$(".conteneur").jPicker({
				window: {
					expandable : true,
					title : "jPicker : choissisez une couleur :",
					alphaSupport : true,
					position : {
						x : 'screenCenter',
						y : 'top'
					}
				},
				color : {
					active : new $.jPicker.Color({
						r : 210,
						g : 214,
						b : 98,
						a : 128
					})
				}
			}, function( color, context ){
				var c = color.val("all");
				if ( c ){
					$( "body" ).css( "background-color", "rgba(" + c.r + "," + c.g + "," + c.b + "," + (c.a/255).toFixed(2) + ")" );
				}
			});
		});
 
		$(window).load(function(){
			var hash = window.location.hash;
 
			$( "#mon-accordeon" ).find("h3 > a").each( function( i, item ){
				if ( $( item ).attr( "href" ) === hash ){
					$( "#id-tpl-tabs" ).tabs( "option", "selected", 1 );
					$( "#mon-accordeon" ).accordion( "option", "active", i );
				}
			});
		});
	</script>
</body>  
</html>

djibril · 19/01/2012, 23h35

Je me suis basé sur ton programme pour faire cette page avec un code très simplifié que voici :

Code html :

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
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>TEST jQuery</title>
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/humanity/jquery-ui.css">
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/lib/jPicker/css/jPicker.dvjh-1.1.6.min.css" />
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
	<script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/i18n/jquery-ui-i18n.min.js"></script>
	<script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>
	<script charset="utf-8" src="http://danielhagnoul.developpez.com/lib/jPicker/jpicker-1.1.6.min.js"></script>
	<script>
		// JavaScript Document
    $(function(){
 
      $( "button", ".ma-jquery" ).button();
 
      // Accordion
    	$( "#mon-accordeon" ).accordion({ 
    				header: "h3",
    				active : false,
    				collapsible: true
      });
 
      // Tabs
    	$('#id-tpl-tabs').tabs({ 
        fx: { opacity: 'toggle' },
        event: "mouseover", 
      });
 
    });
 
    // Gestion du redimensionnement avec scrollbar
    $(function() {
    		$( "#accordionResizer" ).resizable({
    			minHeight: 300,
    			minWidth: 400,
    			resize: function() {
    				$( "#mon-accordeon" ).accordion( "resize" );
    			}
    		});
    });
 
    // Permet de mettre un lien externe pointant dans un accordéon
    $(window).load(function(){
    			var hash = window.location.hash;
 
    			$( "#mon-accordeon" ).find("h3 > a").each( function( i, item ){
    				if ( $( item ).attr( "href" ) === hash ){
    					$( "#id-tpl-tabs" ).tabs( "option", "selected", 1 );
    					$( "#mon-accordeon" ).accordion( "option", "active", i );
    				}
    			});
    });
 
 
	</script>
  </head>
<body>
	<h1>TEST jQuery - Onglets, accordéons et liens externe</h1>
 
<div id="id-tpl-tabs">
	<ul>
		<li><a href="#id-tpl-tabs-1">Onglet 1</a></li>
		<li><a href="#id-tpl-tabs-2">Onglet 2</a></li>
		<li><a href="#id-tpl-tabs-3">Onglet 3</a></li>
	</ul>
	<div id="id-tpl-tabs-1">
		<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
	</div>
	<div id="id-tpl-tabs-2">				
		<div id="accordionResizer" style="padding:10px; width:600px; height:350px;" class="ui-widget-content">
			<div id="mon-accordeon">
				<h3><a href="#section1">Section 1</a></h3>
				<div>
					<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
				</div>
				<h3><a href="#section2">Section 2</a></h3>
				<div>
					<p>
Developpez.com est un groupe international de bénévoles dont la motivation est l'entraide au sens large. 
Il y a une petite présence publicitaire (en haut à droite) destinée à rembourser les coûts liés aux activités 
du Club, qui sont très majoritairement les coûts d'hébergement des serveurs dédiés qui proposent tous ces services 
gratuits. Nous sommes heureux de pouvoir faire bénéficier tous les informaticiens gratuitement de toutes ces ressources, 
sans même demander la moindre cotisation aux visiteurs ou aux membres du Club ou même aux membres de la rédaction. 
Vous pouvez donc bénéficier de tous ces services gratuitement sans payer la moindre cotisation. 					
          </p>
				</div>
				<h3><a href="#section3">Section 3</a></h3>
				<div>
				<p>Bonjour section 3</p>
					<ul>
						<li>List item one</li>
						<li>List item two</li>
						<li>List item three</li>
					</ul>
				</div>
			</div>
    <span class="ui-icon ui-icon-grip-dotted-horizontal" style="margin:2px auto;"></span>
    </div><!-- End accordionResizer -->
 
	</div>
	<div id="id-tpl-tabs-3">
		<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
		<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
	</div>
</div>
 
 
</body>  
</html>

Le rendu est le suivant : http://djibril.developpez.com/temp/jqueryok.html.
si vous mettez l'URL

Citation:

http://djibril.developpez.com/temp/j....html#section1 ou
http://djibril.developpez.com/temp/j....html#section2 ou http://djibril.developpez.com/temp/j....html#section3

Vous tomberez directement au bon endroit.

Peux-tu me dire si mon code te convient aussi ? Je n'ai rajouté que ton code suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
    // Permet de mettre un lien externe pointant dans un accordéon
    $(window).load(function(){
    			var hash = window.location.hash;
 
    			$( "#mon-accordeon" ).find("h3 > a").each( function( i, item ){
    				if ( $( item ).attr( "href" ) === hash ){
    					$( "#id-tpl-tabs" ).tabs( "option", "selected", 1 );
    					$( "#mon-accordeon" ).accordion( "option", "active", i );
    				}
    			});
    });

Puis active : false, (important).
Peux-tu me commenter ton code ci-dessus car je n'ai pas tout saisie.

danielhagnoul · 20/01/2012, 10h18

Bonjour

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
$(window).load(function(){
	/*
	 * Ici le code est exécuté après le chargement complet de la page.
	 *
	 * On ouvre le volet de l'UI Accordion pour lequel le contenu de
	 * la partie hash de l'URL correspondons au contenu de l'attribut
	 * href du tag a contenu dans le titre h3 du volet.
	 */
 
	// La partie hash de l'URL
	var hash = window.location.hash;
 
	/*
	 * $( "#mon-accordeon" ) = dans l'UI Accordion.
	 * find("h3 > a") = trouve les tags a fils de h3.
	 * each = pour chaque tag a.
	 * function( i, item ) = i le numéro du volet de 0 à n,
	 *                   item contient le tag a (l'élément du DOM).
	 * $( item ).attr( "href" ) = le contenu de l'attribut href.
	 * S'il correspond au contenu du paramètre hash, on active
	 * le volet portant le numéro contenu dans i.
	 */
	$( "#mon-accordeon" ).find("h3 > a").each( function( i, item ){
		if ( $( item ).attr( "href" ) === hash ){
			$( "#id-tpl-tabs" ).tabs( "option", "selected", 1 );
			$( "#mon-accordeon" ).accordion( "option", "active", i );
		}
	});
});

djibril · 20/01/2012, 10h22

19/01/2012, 14h51	#5
djibril Responsable Perl et Outils Inscription : avril 2004 Messages : 9 359 Détails du profil Informations personnelles : Sexe : Âge : 32 Localisation : France Informations forums : Inscription : avril 2004 Messages : 9 359 Points : 13 732 Points : 13 732	J'ai rien compris ! __________________ Pensez toujours aux cours, FAQ Perl et la fonction recherchez!!!!!!!! Lisez les règles du forum Perl. Aucun problème par MP, merci de poster vos questions dans les sous forums dédiés et rendez vos codes sources lisibles
	00

20/01/2012, 10h22	#13
djibril Responsable Perl et Outils Inscription : avril 2004 Messages : 9 359 Détails du profil Informations personnelles : Sexe : Âge : 32 Localisation : France Informations forums : Inscription : avril 2004 Messages : 9 359 Points : 13 732 Points : 13 732	__________________ Pensez toujours aux cours, FAQ Perl et la fonction recherchez!!!!!!!! Lisez les règles du forum Perl. Aucun problème par MP, merci de poster vos questions dans les sous forums dédiés et rendez vos codes sources lisibles
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email