Bonjour,
Je commence le JS et jquery, je cherche à faire une interface avec des onglets qui vont appeler des pages externes.
J'ai choisi tabs index (voir ici : www.asual.com/jquery/address/samples/tabs/) pour permettre l'utilisation du bouton avant arriere du navigateur
Voici le code de la page principale :
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
| <!DOCTYPE html>
<html>
<head>
<title>jQuery Address Tabs 2</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link type="text/css" href="jquery-ui-1.8.1.custom.css" rel="stylesheet">
<link type="text/css" href="styles.css" rel="stylesheet">
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.custom.min.js"></script>
<script type="text/javascript" src="jquery.address-1.2.min.js?wrap=true"></script>
<script type="text/javascript">
var tabs;
// Address handler
$.address.init(function(event) {
// Tabs setup
tabs = $('#tabs')
.tabs({
// Content filter
load: function(event, ui) {
$(ui.panel).html($('#tabs div:first', ui.panel).html());
},
selected: $('#tabs ul:first a').index($('a').filter('[rel=address:' + event.value + ']')),
fx: { opacity: 'toggle' }
})
.css('display', 'block');
}).change(function(event) {
// Sets the page title
$.address.title($.address.title().split(' | ')[0] + ' | ' + $('a').filter('[rel=address:' + event.value + ']').text());
}).externalChange(function(event) {
// Select the proper tab
tabs.tabs('select', $('a').filter('[rel=address:' + event.value + ']').attr('href'));
});
// Hides the tabs during initialization
document.write('<style type="text/css"> #tabs { display: none; } </style>');
</script>
</head>
<body>
<div class="page">
<div id="tabs" >
<ul>
<li ><a href="#Overview" title="Overview" rel="address:/">Accueil</a></li>
<li ><a href="./home.php" title="Home" rel="address:/home.php">Présentation</a></li>
<li ><a href="./agenda.php" title="Agenda" rel="address:/agenda.php">Agenda</a></li>
<li ><a href="./galerie.php" title="Galerie" rel="address:/galerie.php">Galerie</a></li>
</ul>
<div id="Overview" class="ui-tabs-panel ui-widget-content">
<p>C'est l'accueil</p>
</div>
</div>
</div>
</body>
</html> |
Tout me convient, mis-à-part la page galerie.php qui interroge une base de données qui retournent des pages du type : galerie.php?galerie=5
Mais impossible d'afficher cette page dans la "frame" à cause de son URL
Cette URL générée par la BDD, si elle ne figure pas en "dur" dans le menu (commun à toutes les onglets), n'affichera pas la galerie dans la "frame".
en test cela donne ça ...
si j'ai ça dans mon menu :
<li ><a href="galerie.php?galerie=5" title="Test" rel="address:/galerie.php?galerie=5">Test</a></li>
ça marche; si je le retire, il ne retrouve pas l'onglet et cela ne s'affiche pas.
J'ai fait plein de topics, mais mon niveau en Jquery me permet pas de bien cerner mon problème.
Merci à celui qui passera par là car je suis bloqué...
arno
cherche solution avec jQuery Address Tabs
Répondre avec citation
Partager