Link naar tab bij SpryTabbedPanels
Ik zoek me suf naar een oplossing voor het creeren van een link van een pagina naar andere pagina met SpryTabbedPanels waarbij ik een specifieke tab direct wil openen.
De tutorial die ik heb gevonden lijkt niet te werken, maar wellicht zie ik iets over het hoofd?
In mijn pagina staat het o.a. volgende;
Code (php)
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
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
<?php
<head>
<script src="../SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../SpryAssets/SpryURLUtils.js"></script>
<script type="text/javascript">
var params = Spry.Utils.getLocationParamsAsObject();
</script>
</head>
<body>
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Tab1</li>
<li class="TabbedPanelsTab" tabindex="0">Tab2</li>
<li class="TabbedPanelsTab" tabindex="0">Tab3</li>
<li class="TabbedPanelsTab" tabindex="0">Tab4</li>
<li class="TabbedPanelsTab" tabindex="0">Tab5</li>
<li class="TabbedPanelsTab" tabindex="0">Tab6</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">inhoud van Tab1</div>
<div class="TabbedPanelsContent">inhoud van Tab2</div>
<div class="TabbedPanelsContent">inhoud van Tab3</div>
<div class="TabbedPanelsContent">inhoud van Tab4</div>
<div class="TabbedPanelsContent">inhoud van Tab5</div>
<div class="TabbedPanelsContent">inhoud van Tab6</div>
</div>
</div>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1", {defaultTab: params.tab ? params.tab : 0});
</script>
?>
<head>
<script src="../SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../SpryAssets/SpryURLUtils.js"></script>
<script type="text/javascript">
var params = Spry.Utils.getLocationParamsAsObject();
</script>
</head>
<body>
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Tab1</li>
<li class="TabbedPanelsTab" tabindex="0">Tab2</li>
<li class="TabbedPanelsTab" tabindex="0">Tab3</li>
<li class="TabbedPanelsTab" tabindex="0">Tab4</li>
<li class="TabbedPanelsTab" tabindex="0">Tab5</li>
<li class="TabbedPanelsTab" tabindex="0">Tab6</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">inhoud van Tab1</div>
<div class="TabbedPanelsContent">inhoud van Tab2</div>
<div class="TabbedPanelsContent">inhoud van Tab3</div>
<div class="TabbedPanelsContent">inhoud van Tab4</div>
<div class="TabbedPanelsContent">inhoud van Tab5</div>
<div class="TabbedPanelsContent">inhoud van Tab6</div>
</div>
</div>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1", {defaultTab: params.tab ? params.tab : 0});
</script>
?>
Als ik vanaf een andere pagina wil linken naar bijvoorbeeld tab 4 doe ik dat via de url; pagina.php?tab=3#TabbedPanels1&OVerigevar1=waarde1&overigevar2=waarde2 waarin ik ook nog wat andere info mee stuur.
Mijn probleem is nu nog het volgende;
1. De info van de tabs wordt nu onder elkaar weergegeven (waarschijnlijk als gevolg van een probleem met params)
2. De pagina geeft foutmelding: Fout: "'Spry.Widget.TabbedPanels' is leeg of geen object"
Wat doe ik hier verkeerd?
Toevoeging op 26/01/2011 20:17:39:
Allen,
Ik heb het probleem op kunnen lossen dankzij een post op een Adobe forum (Adobe Forums > Adobe Labs > Spry Framework for Ajax > Discussions).
Het probleem blijkt te zitten in de regel die onderaan de pagina staat... deze moet alsvolgt zijn:
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1", {defaultTab:(params.panel ? params.panel : 0)});
--------------------------------
De link naar de 3e (!) tab kan dan alsvolgt zijn:
<a href="pagename.html?panel=2">LinkName</a>
Merk hierbij dus op dat de tabs 0-based zijn, kortom de eerste tab is 0, de tweede 1, enz.
Gewijzigd op 26/01/2011 18:23:35 door Marco V
Er zijn nog geen reacties op dit bericht.