Bonjour à tous
Tout d'abord je cite l'extrait de la doc jQuery UI sur lequel je m'appuie :
Citation:
Ajax mode
Tabs supports loading tab content via Ajax in an unobtrusive manner.
The HTML you need is slightly different from the one that is used for static tabs: A list of links pointing to existing resources (from where the content gets loaded) and no additional containers at all (unobtrusive!). The containers' markup is going to be created on the fly:
<div id="example">
<ul>
<li><a href="ahah_1.html"><span>Content 1</span></a></li>
<li><a href="ahah_2.html"><span>Content 2</span></a></li>
<li><a href="ahah_3.html"><span>Content 3</span></a></li>
</ul>
</div>
Obviously this degrades gracefully - the links, e.g. the content, will still be accessible with JavaScript disabled.
Note that if you wish to reuse an existing container, you could do so by matching a title attribute and the container's id:
<li><a href="hello/world.html" title="Todo Overview"> ... </a></li>
and a container like:
<div id="Todo_Overview"> ... </div>
(Note how white space is replaced with an underscore)
This is useful if you want a human readable hash in the URL instead of a cryptic generated one.
|
J'ai coloré en rouge la partie qui dit bien que l'on peut utiliser comme cible un conteneur existant.
Cela fonctionnait encore avec les versions
jQuery UI 1.8.6
jQuery 1.4.2
voir cet exemple :
http://docs.jquery.com/UI/Tabs#Ajax_mode qui utilise les anciennes versions
Cela permettait de présenter la page comme on le souhaitait.
Le problème étant que cela ne fonctionne plus depuis plusieurs versions
Voici un exemple qui utilise le même code mais avec les versions :
jQuery UI 1.8.15
jQuery 1.6.2
http://www.lesalpes.mobi/test/tabs/1.8.15/tabs.php
et voici le HTML généré :
Code :
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
| <body style="font-family:Arial, Helvetica, sans-serif; font-size:12px">
<div id="example" class="ui-tabs ui-widget ui-widget-content ui-corner-all" style="background:none">
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active">
<a title="cible" href="#cible">
<span>page 1</span>
</a>
</li>
<li class="ui-state-default ui-corner-top">
<a title="cible" href="#cible">
<span>page 2</span>
</a>
</li>
<li class="ui-state-default ui-corner-top">
<a title="cible" href="#cible">
<span>page 3</span>
</a>
</li>
</ul>
<div id="cible" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
<h2 align="center">Page 1</h2>
<div style="color:#0000FF"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec diam vitae est malesuada dictum vel egestas diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam faucibus, velit tempor elementum ultrices, justo enim dignissim erat, at venenatis diam ligula at lectus. Nullam nisl massa, fringilla et lacinia eget, condimentum id magna. Curabitur eu dolor velit. Nunc eu velit justo, vitae faucibus eros. Duis id metus massa. Ut lacinia urna pretium metus mollis congue. Donec nec posuere neque. Curabitur a quam dolor. Nunc elementum sapien ac tellus gravida at hendrerit massa consectetur. Sed nulla nunc, imperdiet vel condimentum aliquet, pharetra nec diam. Suspendisse velit metus, ullamcorper at viverra nec, scelerisque nec leo. Fusce at arcu orci. Aenean vitae ipsum eu nibh egestas auctor scelerisque eget turpis. </div>
</div>
</div>
<br>
<div align="right" style="width:90%;">
<div id="cible" class="ui-tabs-hide" align="left" style="background:none;overflow:auto; padding-right:10px; width:60%; border:#000000 thin solid"></div>
</div>
</body> |
Comme on peut le constater, je me retrouve avec 2 div portant le même id, car une div a été créée à la volée par jQuery (voir ligne 20 et 27 du code ci-dessus)
je ne peux plus présenter ma page comme je le souhaite.
Et, encore plus embêtant, je me retrouve avec 2 div ayant le même id...
Quelqu'un a-t-il une solution à me proposer ?
Bonne journée à tous.
17/08/2011, 09h09
UI 1.8.15 Tabs : plus possible d'afficher le contenu Ajax dans la div de mon choix
00
