Discussion :

[bruce-willis]

Bonjour,

Existe-t-il un composant jquery ui de type onglet mais cette fois-ci un survol (mouseover) de la souris le met en focus mais pas un clic? J'ai immédiatement pensé au carrousel du fait que je cherche aussi un effet lors de la transition.

Dommage que j'utilise jCarousel Liste et les seuls effets sont vertical ou horizontal, en fait le but ce n'est pas un défilement automatique mais par bouton! De plus, il n'y a pas d'accès direct à un index comme au carrousel de prototype ui.

Actuellement, je fais comme ceci avec 4 onglets:

Code javascript :

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
         jQuery(document).ready(function() {
             jQuery('#tab1').mouseover(function() {
                 jQuery('#container4').hide();
                 jQuery('#container3').hide();
                 jQuery('#container1').hide();
                 jQuery('#container2').show();
             });
             jQuery('#tab2').mouseover(function() {
                 jQuery('#container4').hide();
                 jQuery('#container3').show();
                 jQuery('#container1').hide();
                 jQuery('#container2').hide();
             });
             jQuery('#tab3').mouseover(function() {
                 jQuery('#container4').show();
                 jQuery('#container3').hide();
                 jQuery('#container1').hide();
                 jQuery('#container2').hide();
             });

La page d'onglet dans des <div> dont au départ les 3 en display:none
Comme j'ai dit, je cherche à introduire un effet lors de la transition comme dans certains carrousels

[danielhagnoul]

Bonsoir.

Il existe une option dans UI Tabs :

Code :

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

$("#tabs").tabs({event: 'mouseover'});

Voir: http://jqueryui.com/demos/tabs/#mouseover

[bruce-willis]

Merci pour l'info

En fait, pour les onglets, on peut mettre tout entre les <li></li>, des div, une cellule de tableau? Quel CSS modifie-t-on pour avoir par exemple 4 onglets qui couvre toute la longueur?

[danielhagnoul]

Bonjour.

Exemple :

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
		<div id="tabs" style="width:800px;">
			<ul>
				<li style="width:300px;"><a href="#tabs-1">Nunc tincidunt</a></li>
				<li style="width:300px;"><a href="#tabs-2">Proin dolor</a></li>
				<li style="width:176px;"><a href="#tabs-3">Aenean lacinia</a></li>
			</ul>
			<div id="tabs-1">
				<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus.</p>
			</div>
			<div id="tabs-2">
				<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis.</p>
			</div>
			<div id="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.</p>
				<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna.</p>
			</div>
		</div>

[bruce-willis]

Il suffit donc d'ajouter du width et du height. Et jQuery les placera toujour cote à cote
On peut donc tout mettre dans <li><a href="#tabs-1">TO_PUT_HERE</a></li>

Si c'est ça, donc OK, il faut essayer

[Edit]
Le syntaxe général des onglets est donc <li><a href="#tabX"></a></li>
On peut mettre tout ce qu'on veut entre <a></a>: image, tableau, <div></div> avec son width et heigth mais pas touche à la <li>
Mon soucis c'est que pour une longueur de page de 1000px on ne peut pas mettre 333px pour chacun de 3 onglets ni même 300px car il y a des bordures d'onglets => je crois qu'il faut modifier le CSS si on veut changer cela?

Je crois qu'on peut accéder directement à un onglet? tabtrigger?