Discussion :

[ranly]

Bonjour,

J'ai mis des tabs dans ma page, quand je lance ma page se charge, mais le javascript s'applique à la fin.
Du coup mes tabs(onglets) n'apparaissent qu'à la fin. C'est un peu moche.

Ca marche très bien qu'on je teste dans une page index sous wamp. Mais quand je passe sur mon appi(Application sous Strut1). J'ai un retard dans mon chargement.

D'avance mercii pour votre aide.

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
 
<script type="text/javascript">
	$(function() {
		$( "#tabs" ).tabs();
	});
</script>
 
<div id="tabs">
	<ul>
		<li><a href="#tabs-1">Nunc tincidunt</a></li>
		<li><a href="#tabs-2">Proin dolor</a></li>
		<li><a href="#tabs-3">Aenean lacinia</a></li>
	</ul>
	<div id="tabs-1">
		<p>Onglet 1</p>
	</div>
	<div id="tabs-2">
		<p>Onglet 2</p>
	</div>
	<div id="tabs-3">
		<p>Onglet 2</p>
		<p></p>
	</div>
</div>

[Bovino]

Une solution peut être d'initialiser le plugin juste après la création de la div sans attendre le chargement complet de la page :

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
<div id="tabs">
	<ul>
		<li><a href="#tabs-1">Nunc tincidunt</a></li>
		<li><a href="#tabs-2">Proin dolor</a></li>
		<li><a href="#tabs-3">Aenean lacinia</a></li>
	</ul>
	<div id="tabs-1">
		<p>Onglet 1</p>
	</div>
	<div id="tabs-2">
		<p>Onglet 2</p>
	</div>
	<div id="tabs-3">
		<p>Onglet 2</p>
		<p></p>
	</div>
</div>
<script type="text/javascript">
	$( "#tabs" ).tabs();
</script>

[ranly]

Merci, c'est déja mieux, et ca marche très bien quand je fais ça, !!

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
 
<div id="tabs">
<ul>
		<li><a href="#tabs-1">Nunc tincidunt</a></li>
		<li><a href="#tabs-2">Proin dolor</a></li>
	</ul>
	<div id="tabs-1">
 
	</div>
	<div id="tabs-2">
 
	</div>
</div>
<script type="text/javascript">
	$( "#tabs" ).tabs();
</script>
Code Content 1
Code Content 2

Par contre dès que j'introduis le code contenu dans les balises correspondantes , beh il y a du retard,

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">
<ul>
		<li><a href="#tabs-1">Nunc tincidunt</a></li>
		<li><a href="#tabs-2">Proin dolor</a></li>
	</ul>
	<div id="tabs-1">
	Code Content 1
	</div>
 
	<div id="tabs-2">	
       Code Content 2
	</div>
</div>
<script type="text/javascript">
	$( "#tabs" ).tabs();
</script>

[ticroch]

tu peux charger le code dynamiquement par ajax sinon, vu que les onglets sont vide au début c'est très rapide à afficher, et dès que l'utilisateur clique sur un onglet, son code sera généré.

[ms2003]

Bonjour,
Ajoute un "display:none" à votre tabs, et à la fin de la page ajoute ça :

Code :

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

1
2
3
4
 
$(document).ready(function() {
	$("#tabs").show();
});