ancre javascript vers autre page

**nomdunepipe** · 01/09/2011, 08h14

Bonjour à tous

Voici mon problème:

Une première page "page_1.html" dispose de 4 boutons qui sont des liens d'ancres.
Chacune de ces ancres pointe vers une balise <H1> qui se trouve dans un panneau à onglets (x4) javascript
qui lui-même est situé dans la deuxième page "page_2.html".

Avec un système d'ancre HTML comme suit...

Code :

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

1
2
3
 
<a href="page_2.html#ancre_1"></a><!--bouton ancre appelant 1 de la page_1-->
<h1 id="ancre_1">Onglet 1</h1><!--ancre appelée 1 de la page_2-->

...cela ne fonctionne pas car le HTML ne peut pas ouvrir de panneau à onglet javascript.

Ma question est la suivante:
Comment créer un lien d'ancre pour mes boutons qui ouvrent l'ancre des balises H1 se trouvant dans les onglets du panneau javascript?

Merci pour votre aide

**SpaceFrog** · 01/09/2011, 08h28

qui se trouve dans un panneau à onglets

un panneau à onglet ? c'est quoi comme balise ça ?

**RomainVALERI** · 01/09/2011, 09h21

Envoyé par SpaceFrog

un panneau à onglet ? c'est quoi comme balise ça ?

(je suis vraiment désolé mais il m'était impensable en ce matin jovial de m'interdire cette stupide allusion

)

**nomdunepipe** · 01/09/2011, 10h22

wwwooOOWWW, c'est surprenant de voir des réponses aussi précises et constructives. Continuez comme ça, je vais peut être réussir à résoudre mon pb...qui sait

**RomainVALERI** · 01/09/2011, 11h18

Envoyé par nomdunepipe

wwwooOOWWW, c'est surprenant de voir des réponses aussi précises et constructives. Continuez comme ça, je vais peut être réussir à résoudre mon pb...qui sait

Allez trève de plaisanteries

>>> montre-nous la partie JS qui crée ton fameux panneau et on verra ce qu'on peut faire. Mais si tu espères qu'on devine...

**SpaceFrog** · 01/09/2011, 11h35

c'est tout aussi surprenant de voir des question aussi précises !
Nous ne sommes pas devins.
N'ayant aucun espèce d'idée de comment sont balancés tes onglets, comment veux tu quel l'on puisse ne serait-ce qu'esquisser une réponse qui puisse t'orienter ?

Commence plutot par nous montre le code html de ta page2 ...

**nomdunepipe** · 01/09/2011, 13h52

Excusez moi, je ne connais pas le langage js du coup je pensais que ça aurait été suffisant pour qu'on puisse m'aider mais ce n'étai pas le cas. Je rectifie donc le tir en vous faisant parvenir le code complet cette fois

HTML page 1 contenant les boutons avec liens d'ancre:

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
 
<!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>Document sans nom</title>
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css">
</head>
 
<body>
<a href="page.html#ancre1">bouton 1</a>
<a href="page.html#ancre2">bouton 2</a>
</body>
</html>

HTML page 2 contenant les balises H1 avec l'ancre réceptrice:

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
 
<!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>Document sans nom</title>
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css">
</head>
 
<body>
<div id="TabbedPanels1" class="TabbedPanels">
	<ul class="TabbedPanelsTabGroup">
		<li class="TabbedPanelsTab" tabindex="0">Onglet 1</li>
		<li class="TabbedPanelsTab" tabindex="0">Onglet 2</li>
	</ul>
	<div class="TabbedPanelsContentGroup">
		<div class="TabbedPanelsContent"><h1 id="ancre1">Contenu onglet 1</h1></div>
		<div class="TabbedPanelsContent"><h1 id="ancre2">Contenu onglet 2</h1></div>
	</div>
</div>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
</body>
</html>

Code javascript du module Spry panneau à onglets:

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
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
 
(function() { // BeginSpryComponent
 
if (typeof Spry == "undefined") window.Spry = {}; if (!Spry.Widget) Spry.Widget = {};
 
Spry.Widget.TabbedPanels = function(element, opts)
{
	this.element = this.getElement(element);
	this.defaultTab = 0; // Show the first panel by default.
	this.tabSelectedClass = "TabbedPanelsTabSelected";
	this.tabHoverClass = "TabbedPanelsTabHover";
	this.tabFocusedClass = "TabbedPanelsTabFocused";
	this.panelVisibleClass = "TabbedPanelsContentVisible";
	this.focusElement = null;
	this.hasFocus = false;
	this.currentTabIndex = 0;
	this.enableKeyboardNavigation = true;
	this.nextPanelKeyCode = Spry.Widget.TabbedPanels.KEY_RIGHT;
	this.previousPanelKeyCode = Spry.Widget.TabbedPanels.KEY_LEFT;
 
	Spry.Widget.TabbedPanels.setOptions(this, opts);
 
	// If the defaultTab is expressed as a number/index, convert
	// it to an element.
 
	if (typeof (this.defaultTab) == "number")
	{
		if (this.defaultTab < 0)
			this.defaultTab = 0;
		else
		{
			var count = this.getTabbedPanelCount();
			if (this.defaultTab >= count)
				this.defaultTab = (count > 1) ? (count - 1) : 0;
		}
 
		this.defaultTab = this.getTabs()[this.defaultTab];
	}
 
	// The defaultTab property is supposed to be the tab element for the tab content
	// to show by default. The caller is allowed to pass in the element itself or the
	// element's id, so we need to convert the current value to an element if necessary.
 
	if (this.defaultTab)
		this.defaultTab = this.getElement(this.defaultTab);
 
	this.attachBehaviors();
};
 
Spry.Widget.TabbedPanels.prototype.getElement = function(ele)
{
	if (ele && typeof ele == "string")
		return document.getElementById(ele);
	return ele;
};
 
Spry.Widget.TabbedPanels.prototype.getElementChildren = function(element)
{
	var children = [];
	var child = element.firstChild;
	while (child)
	{
		if (child.nodeType == 1 /* Node.ELEMENT_NODE */)
			children.push(child);
		child = child.nextSibling;
	}
	return children;
};
 
Spry.Widget.TabbedPanels.prototype.addClassName = function(ele, className)
{
	if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) != -1))
		return;
	ele.className += (ele.className ? " " : "") + className;
};
 
Spry.Widget.TabbedPanels.prototype.removeClassName = function(ele, className)
{
	if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) == -1))
		return;
	ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
};
 
Spry.Widget.TabbedPanels.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
{
	if (!optionsObj)
		return;
	for (var optionName in optionsObj)
	{
		if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
			continue;
		obj[optionName] = optionsObj[optionName];
	}
};
 
Spry.Widget.TabbedPanels.prototype.getTabGroup = function()
{
	if (this.element)
	{
		var children = this.getElementChildren(this.element);
		if (children.length)
			return children[0];
	}
	return null;
};
 
Spry.Widget.TabbedPanels.prototype.getTabs = function()
{
	var tabs = [];
	var tg = this.getTabGroup();
	if (tg)
		tabs = this.getElementChildren(tg);
	return tabs;
};
 
Spry.Widget.TabbedPanels.prototype.getContentPanelGroup = function()
{
	if (this.element)
	{
		var children = this.getElementChildren(this.element);
		if (children.length > 1)
			return children[1];
	}
	return null;
};
 
Spry.Widget.TabbedPanels.prototype.getContentPanels = function()
{
	var panels = [];
	var pg = this.getContentPanelGroup();
	if (pg)
		panels = this.getElementChildren(pg);
	return panels;
};
 
Spry.Widget.TabbedPanels.prototype.getIndex = function(ele, arr)
{
	ele = this.getElement(ele);
	if (ele && arr && arr.length)
	{
		for (var i = 0; i < arr.length; i++)
		{
			if (ele == arr[i])
				return i;
		}
	}
	return -1;
};
 
Spry.Widget.TabbedPanels.prototype.getTabIndex = function(ele)
{
	var i = this.getIndex(ele, this.getTabs());
	if (i < 0)
		i = this.getIndex(ele, this.getContentPanels());
	return i;
};
 
Spry.Widget.TabbedPanels.prototype.getCurrentTabIndex = function()
{
	return this.currentTabIndex;
};
 
Spry.Widget.TabbedPanels.prototype.getTabbedPanelCount = function(ele)
{
	return Math.min(this.getTabs().length, this.getContentPanels().length);
};
 
Spry.Widget.TabbedPanels.addEventListener = function(element, eventType, handler, capture)
{
	try
	{
		if (element.addEventListener)
			element.addEventListener(eventType, handler, capture);
		else if (element.attachEvent)
			element.attachEvent("on" + eventType, handler);
	}
	catch (e) {}
};
 
Spry.Widget.TabbedPanels.prototype.cancelEvent = function(e)
{
	if (e.preventDefault) e.preventDefault();
	else e.returnValue = false;
	if (e.stopPropagation) e.stopPropagation();
	else e.cancelBubble = true;
 
	return false;
};
 
Spry.Widget.TabbedPanels.prototype.onTabClick = function(e, tab)
{
	this.showPanel(tab);
	return this.cancelEvent(e);
};
 
Spry.Widget.TabbedPanels.prototype.onTabMouseOver = function(e, tab)
{
	this.addClassName(tab, this.tabHoverClass);
	return false;
};
 
Spry.Widget.TabbedPanels.prototype.onTabMouseOut = function(e, tab)
{
	this.removeClassName(tab, this.tabHoverClass);
	return false;
};
 
Spry.Widget.TabbedPanels.prototype.onTabFocus = function(e, tab)
{
	this.hasFocus = true;
	this.addClassName(tab, this.tabFocusedClass);
	return false;
};
 
Spry.Widget.TabbedPanels.prototype.onTabBlur = function(e, tab)
{
	this.hasFocus = false;
	this.removeClassName(tab, this.tabFocusedClass);
	return false;
};
 
Spry.Widget.TabbedPanels.KEY_UP = 38;
Spry.Widget.TabbedPanels.KEY_DOWN = 40;
Spry.Widget.TabbedPanels.KEY_LEFT = 37;
Spry.Widget.TabbedPanels.KEY_RIGHT = 39;
 
 
 
Spry.Widget.TabbedPanels.prototype.onTabKeyDown = function(e, tab)
{
	var key = e.keyCode;
	if (!this.hasFocus || (key != this.previousPanelKeyCode && key != this.nextPanelKeyCode))
		return true;
 
	var tabs = this.getTabs();
	for (var i =0; i < tabs.length; i++)
		if (tabs[i] == tab)
		{
			var el = false;
			if (key == this.previousPanelKeyCode && i > 0)
				el = tabs[i-1];
			else if (key == this.nextPanelKeyCode && i < tabs.length-1)
				el = tabs[i+1];
 
			if (el)
			{
				this.showPanel(el);
				el.focus();
				break;
			}
		}
 
	return this.cancelEvent(e);
};
 
Spry.Widget.TabbedPanels.prototype.preorderTraversal = function(root, func)
{
	var stopTraversal = false;
	if (root)
	{
		stopTraversal = func(root);
		if (root.hasChildNodes())
		{
			var child = root.firstChild;
			while (!stopTraversal && child)
			{
				stopTraversal = this.preorderTraversal(child, func);
				try { child = child.nextSibling; } catch (e) { child = null; }
			}
		}
	}
	return stopTraversal;
};
 
Spry.Widget.TabbedPanels.prototype.addPanelEventListeners = function(tab, panel)
{
	var self = this;
	Spry.Widget.TabbedPanels.addEventListener(tab, "click", function(e) { return self.onTabClick(e, tab); }, false);
	Spry.Widget.TabbedPanels.addEventListener(tab, "mouseover", function(e) { return self.onTabMouseOver(e, tab); }, false);
	Spry.Widget.TabbedPanels.addEventListener(tab, "mouseout", function(e) { return self.onTabMouseOut(e, tab); }, false);
 
	if (this.enableKeyboardNavigation)
	{
		// XXX: IE doesn't allow the setting of tabindex dynamically. This means we can't
		// rely on adding the tabindex attribute if it is missing to enable keyboard navigation
		// by default.
 
		// Find the first element within the tab container that has a tabindex or the first
		// anchor tag.
 
		var tabIndexEle = null;
		var tabAnchorEle = null;
 
		this.preorderTraversal(tab, function(node) {
			if (node.nodeType == 1 /* NODE.ELEMENT_NODE */)
			{
				var tabIndexAttr = tab.attributes.getNamedItem("tabindex");
				if (tabIndexAttr)
				{
					tabIndexEle = node;
					return true;
				}
				if (!tabAnchorEle && node.nodeName.toLowerCase() == "a")
					tabAnchorEle = node;
			}
			return false;
		});
 
		if (tabIndexEle)
			this.focusElement = tabIndexEle;
		else if (tabAnchorEle)
			this.focusElement = tabAnchorEle;
 
		if (this.focusElement)
		{
			Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "focus", function(e) { return self.onTabFocus(e, tab); }, false);
			Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "blur", function(e) { return self.onTabBlur(e, tab); }, false);
			Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "keydown", function(e) { return self.onTabKeyDown(e, tab); }, false);
		}
	}
};
 
Spry.Widget.TabbedPanels.prototype.showPanel = function(elementOrIndex)
{
	var tpIndex = -1;
 
	if (typeof elementOrIndex == "number")
		tpIndex = elementOrIndex;
	else // Must be the element for the tab or content panel.
		tpIndex = this.getTabIndex(elementOrIndex);
 
	if (!tpIndex < 0 || tpIndex >= this.getTabbedPanelCount())
		return;
 
	var tabs = this.getTabs();
	var panels = this.getContentPanels();
 
	var numTabbedPanels = Math.max(tabs.length, panels.length);
 
	for (var i = 0; i < numTabbedPanels; i++)
	{
		if (i != tpIndex)
		{
			if (tabs[i])
				this.removeClassName(tabs[i], this.tabSelectedClass);
			if (panels[i])
			{
				this.removeClassName(panels[i], this.panelVisibleClass);
				panels[i].style.display = "none";
			}
		}
	}
 
	this.addClassName(tabs[tpIndex], this.tabSelectedClass);
	this.addClassName(panels[tpIndex], this.panelVisibleClass);
	panels[tpIndex].style.display = "block";
 
	this.currentTabIndex = tpIndex;
};
 
Spry.Widget.TabbedPanels.prototype.attachBehaviors = function(element)
{
	var tabs = this.getTabs();
	var panels = this.getContentPanels();
	var panelCount = this.getTabbedPanelCount();
 
	for (var i = 0; i < panelCount; i++)
		this.addPanelEventListeners(tabs[i], panels[i]);
 
	this.showPanel(this.defaultTab);
};
 
})(); // EndSpryComponent

CSS du panneau :

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
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
 
.TabbedPanels {
	overflow: hidden;
	margin: 0px;
	padding: 0px;
	clear: none;
	width: 100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
}
 
/* This is the selector for the TabGroup. The TabGroup container houses
 * all of the tab buttons for each tabbed panel in the widget. This container
 * does not contribute anything visually to the look of the widget for our
 * default style.
 *
 * The name of the class ("TabbedPanelsTabGroup") used in this selector is not
 * necessary to make the widget function. You can use any class name you
 * want to style the TabGroup container.
 */
.TabbedPanelsTabGroup {
	margin: 0px;
	padding: 0px;
}
 
/* This is the selector for the TabbedPanelsTab. This container houses
 * the title for the panel. This is also the tab "button" that the user clicks
 * on to activate the corresponding content panel so that it appears on top
 * of the other tabbed panels contained in the widget.
 *
 * For our default style, each tab is positioned relatively 1 pixel down from
 * where it wold normally render. This allows each tab to overlap the content
 * panel that renders below it. Each tab is rendered with a 1 pixel bottom
 * border that has a color that matches the top border of the current content
 * panel. This gives the appearance that the tab is being drawn behind the
 * content panel.
 *
 * The name of the class ("TabbedPanelsTab") used in this selector is not
 * necessary to make the widget function. You can use any class name you want
 * to style this tab container.
 */
.TabbedPanelsTab {
	position: relative;
	top: 1px;
	float: left;
	padding: 4px 10px;
	margin: 0px 1px 0px 0px;
	font: bold 0.7em sans-serif;
	background-color: #DDD;
	list-style: none;
	border-left: solid 1px #CCC;
	border-bottom: solid 1px #999;
	border-top: solid 1px #999;
	border-right: solid 1px #999;
	-moz-user-select: none;
	-khtml-user-select: none;
	cursor: pointer;
}
 
/* This selector is an example of how to change the appearnce of a tab button
 * container as the mouse enters it. The class "TabbedPanelsTabHover" is
 * programatically added and removed from the tab element as the mouse enters
 * and exits the container.
 */
.TabbedPanelsTabHover {
	background-color: #CCC;
}
 
/* This selector is an example of how to change the appearance of a tab button
 * container after the user has clicked on it to activate a content panel.
 * The class "TabbedPanelsTabSelected" is programatically added and removed
 * from the tab element as the user clicks on the tab button containers in
 * the widget.
 *
 * As mentioned above, for our default style, tab buttons are positioned
 * 1 pixel down from where it would normally render. When the tab button is
 * selected, we change its bottom border to match the background color of the
 * content panel so that it looks like the tab is part of the content panel.
 */
.TabbedPanelsTabSelected {
	background-color: #EEE;
	border-bottom: 1px solid #EEE;
}
 
/* This selector is an example of how to make a link inside of a tab button
 * look like normal text. Users may want to use links inside of a tab button
 * so that when it gets focus, the text *inside* the tab button gets a focus
 * ring around it, instead of the focus ring around the entire tab.
 */
.TabbedPanelsTab a {
	color: black;
	text-decoration: none;
}
 
/* This is the selector for the ContentGroup. The ContentGroup container houses
 * all of the content panels for each tabbed panel in the widget. For our
 * default style, this container provides the background color and borders that
 * surround the content.
 *
 * The name of the class ("TabbedPanelsContentGroup") used in this selector is
 * not necessary to make the widget function. You can use any class name you
 * want to style the ContentGroup container.
 */
.TabbedPanelsContentGroup {
	clear: both;
	border-left: solid 1px #CCC;
	border-bottom: solid 1px #CCC;
	border-top: solid 1px #999;
	border-right: solid 1px #999;
	background-color: #EEE;
}
 
/* This is the selector for the Content panel. The Content panel holds the
 * content for a single tabbed panel. For our default style, this container
 * provides some padding, so that the content is not pushed up against the
 * widget borders.
 *
 * The name of the class ("TabbedPanelsContent") used in this selector is
 * not necessary to make the widget function. You can use any class name you
 * want to style the Content container.
 */
.TabbedPanelsContent {
	overflow: hidden;
	padding: 4px;
}
 
/* This selector is an example of how to change the appearnce of the currently
 * active container panel. The class "TabbedPanelsContentVisible" is
 * programatically added and removed from the content element as the panel
 * is activated/deactivated.
 */
.TabbedPanelsContentVisible {
}
 
/* Vertical Tabbed Panels
 *
 * The following rules override some of the default rules above so that the
 * TabbedPanels widget renders with its tab buttons along the left side of
 * the currently active content panel.
 *
 * With the rules defined below, the only change that will have to be made
 * to switch a horizontal tabbed panels widget to a vertical tabbed panels
 * widget, is to use the "VTabbedPanels" class on the top-level widget
 * container element, instead of "TabbedPanels".
 */
 
.VTabbedPanels {
	overflow: hidden;
	zoom: 1;
}
 
/* This selector floats the TabGroup so that the tab buttons it contains
 * render to the left of the active content panel. A border is drawn around
 * the group container to make it look like a list container.
 */
.VTabbedPanels .TabbedPanelsTabGroup {
	float: left;
	width: 10em;
	height: 20em;
	background-color: #EEE;
	position: relative;
	border-top: solid 1px #999;
	border-right: solid 1px #999;
	border-left: solid 1px #CCC;
	border-bottom: solid 1px #CCC;
}
 
/* This selector disables the float property that is placed on each tab button
 * by the default TabbedPanelsTab selector rule above. It also draws a bottom
 * border for the tab. The tab button will get its left and right border from
 * the TabGroup, and its top border from the TabGroup or tab button above it.
 */
.VTabbedPanels .TabbedPanelsTab {
	float: none;
	margin: 0px;
	border-top: none;
	border-left: none;
	border-right: none;
}
 
/* This selector disables the float property that is placed on each tab button
 * by the default TabbedPanelsTab selector rule above. It also draws a bottom
 * border for the tab. The tab button will get its left and right border from
 * the TabGroup, and its top border from the TabGroup or tab button above it.
 */
.VTabbedPanels .TabbedPanelsTabSelected {
	background-color: #EEE;
	border-bottom: solid 1px #999;
}
 
/* This selector floats the content panels for the widget so that they
 * render to the right of the tabbed buttons.
 */
.VTabbedPanels .TabbedPanelsContentGroup {
	clear: none;
	float: left;
	padding: 0px;
	width: 30em;
	height: 20em;
}
 
/* Styles for Printing */
@media print {
.TabbedPanels {
	overflow: visible !important;
}
.TabbedPanelsContentGroup {
	display: block !important;
	overflow: visible !important;
	height: auto !important;
}
.TabbedPanelsContent {
	overflow: visible !important;
	display: block !important;
	clear:both !important;
}
.TabbedPanelsTab {
	 overflow: visible !important;
	 display: block !important;
	 clear:both !important;
}
}

Voilà, tout est là, en espérant que vous pourrez m'aider à résoudre ce problème que je ne suis pas parvenu à comprendre.

Merci d'avance

**SpaceFrog** · 01/09/2011, 13h55

Tu as donc une fonction qui "gère" tes onglets...
il te faut sur le onlaod de la page 2 recupérer l'id de l'onglet à afficher et le faire afficher au moyen de la fonction qui gère les onglets il doit y avoir une méthode focus

**RomainVALERI** · 01/09/2011, 14h13

Envoyé par SpaceFrog

Tu as donc une fonction qui "gère" tes onglets...
il te faut sur le onlaod de la page 2 recupérer l'id de l'onglet à afficher et le faire afficher au moyen de la fonction qui gère les onglets il doit y avoir une méthode focus

+1

Je pencherais d'ailleurs pour celle-ci : Spry.Widget.TabbedPanels.prototype.showPanel ^^

Remarque : ...mais quand on utilise un module propriétaire développé par des professionnels, on se réfère en premier lieu à.... la documentation

**Eric2a** · 01/09/2011, 14h34

Salut,

Je pense qu'il faudrait initialiser la propriété defaultTab à partir du paramètre hash de l'URL.

The defaultTab property is supposed to be the tab element for the tab content
to show by default. The caller is allowed to pass in the element itself or the
element's id, so we need to convert the current value to an element if necessary.

On pourrait avoir (dans window.onload) un code du genre...

Code :

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

1
2
3
4
5
6
7
8
9
10
var
	url=document.location.href,
	tab=url.split('#'),
	elt;
 
if(tab.length==2){
	elt=document.getElementById(tab[1]);
	if(elt)
		Spry.Widget.defaultTab=elt;
}

**nomdunepipe** · 01/09/2011, 15h07

merci à vous pour vos suggestions malheureusement sans précision de modification du code je suis totalement incapable de savoir quoi faire du code que vous me proposez.
Comment puis je le placer et le modifier pour l'adapter à ma page sachant que le js m'est totalement inconnu?

Merci encore

**SpaceFrog** · 01/09/2011, 15h09

Nous ne somme pas là pour coder à ta place ...

Donc soit tu apprends le js ...
Soit tu attends qu'une âme charitable te file le code tout cuit ...

**Eric2a** · 01/09/2011, 16h06

C'est clair qu'il faut apprendre au moins les bases même si on utilise que des librairies...

Finalement en regardant le code dans la partie HTML, on voit qu'on peux faire plus simple à l'aide de la méthode TabbedPanels.

Remplacer les lignes en fin du fichier HTML...

Code :

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

1
2
3
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>

par...

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
<script type="text/javascript">
var
	id="TabbedPanels1"; // Panneau par défaut
 
(function(){
	var url=document.location.href,tab=url.split('#');
	if(tab.length==2){
		// Ancre touvée dans URL...
		if(document.getElementById(tab[1]))id=tab[1]; // associée à un élément HTML présent
	}
})();
 
// Initialisation objet
var TabbedPanels1=new Spry.Widget.TabbedPanels(id);
</script>

Là ça devrait le faire.

**nomdunepipe** · 02/09/2011, 03h45

@ SpaceFrog :
Je suis tout à fait d'accord avec toi, d'habitude je n'aime pas demander qu'on fasse tout le boulot pour moi mais j'ai utilisé un module Spry facile à utiliser dans DW certes mais difficilement modifiable si on ne connait pas le js dans mon cas.
Je me suis donc retrouvé piégé sans pouvoir me dépatouiller tout seul. En plus c'est pas un code simple quand on veut mettre les mains dedans.

@ Eric2a :
Un grand merci pour ton aide, ton code fonctionne à une chose près c'est que l'action du bouton "déroule" tout le contenu du panneau sur une page et les onglets ne possèdent plus leur fonction cliquable. Ce qui fait que quand je clique sur un bouton, je suis bien redirigé sur la bonne page dans la balise H1 correspondante mais on navigue alors sur une page et le panneau à onglets devient obsolète. C'est pas grave, merci quand même de m'avoir accordé du temps.

En tous les cas, je vous remercie et je m'excuse si j'ai abusé de votre aide pour me mâcher le travail. Je vais essayer de comprendre le code de Eric2a pour l'adapter afin d'arriver sur le titre situé dans un onglet sans "dérouler" le panneau. Si je trouve pas, alors j'opterai pour une solution totalement différente.

Encore un grand merci à vous

EDIT: Pour info si quelqu'un tombe sur le sujet et se trouve dans le même cas que moi,
voilà ce qu'Adobe nous dis: livedocs.adobe.com

ancre javascript vers autre page

JavaScript

Discussions similaires

Partager

Partager