Effet d'onglet en jquery.

Version imprimable

Bonjour à tous, je suis en train de finir un formulaire avec une sorte d'onglet afin de découper mon formulaire en plusieurs "bouts". Je me suis inspirer de ce tuto que j'ai trouvé sur le net:
http://stilbuero.de/jquery/tabs/
http://stilbuero.de/jquery/tabs_3/nested.html

Donc voila mon problème:
J'ai un peu peur que de mettre ce système soit un mal compris pas les futurs utilisateurs, donc je souhaiterais ajouter un bouton qui me permette d'afficher l'étape suivant. Cependant je ne vois pas comment faire.
Voici mon code HTML:

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
30
31
 
<form action="inscription.html" method="post" name="form_contact" onsubmit="return verifinscription(this.form)">
<div id="inscription">
	<div id="inscriptionposition">
            <ul>
                <li><a href="#partie-1"><span>Donn&eacute;es sur l'entreprise</span></a></li>
                <li><a href="#partie-2"><span>Information utilisateur</span></a></li>
                <li><a href="#partie-3"><span>Authentification pour acc&eacute;der aux sites</span></a></li>
            </ul>
	</div>
            <div id="partie-1">
<a name="partie-1"></a>Blabla
              <a name="partie-2">  Mon bouton suivant</a>
</div>
            <div id="partie-2"><a name="partie-2"></a>
<a name="partie-1">Précédente</a>
<a name="partie-3">  Mon bouton suivant</a>
            </div>
            <div id="partie-3"><a name="partie-3"></a>
 <a name="partie-2">  Précédent</a>
<p align="center">
Voulez-vous recevoir notre newsletter ?
<input type="radio" name="newsletter_pro" value="oui" id="oui" /><b style="color:#d43e84;">OUI</b>
<input type="radio" name="newsletter_pro" value="non" id="non" />
NON
</p>
<center><input type="submit" style="background-color: #f9f9f9; color:#b4a9ab; padding-top:-1px; border:0; height:21px;" name="inscription" value="S'enregistrer" class="bouton"/></center>
            </div>
        </a>					
 
</form>

En gros, je veux que l'utilisateur qui clique sur le premier bouton suivant accède au contenu du second onglet.
Pouvez vous m'aidé svp?
Merci d'avance.

et mon code JS:

Code:

1
2
3
4
$(document).ready(function(){
     $("#inscription > #inscriptionposition > ul").tabs();
 
  });

07/02/2009, 11h25
Sourrisseau

Jquery ui

Je te conseille de passer par jquery ui. Tu as une fonction 'tabs' qui dispose d'un grand nombres d'options.

la page pour telecharcher jquery ui est : http://ui.jquery.com/download (tu composes ton propre jquery ui , utilise une fois dezippe le fichier js non compresse , l'autre peux poser problème)

La page de doc d'accueil est : http://docs.jquery.com/UI/Tabs#Example

et la fonction spécifique que tu recherches est sur la page :

http://docs.jquery.com/UI/Tabs/tabs#.22select.22index

et dans cette doc tu devra utiliser : tabs( "select", index )

Si tu as une autre question n'hésite pas.

Bonjour,
J'aurais une p'tite question j'utilise ce menu mais des que j'actualise ma page il repart au premier est ce qu'il y a un moyen qu'il reste sur l'onglet sélectionner ???

Voici mon code du menu

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
 $this->_html .= ' 
 
	 <div id="content_tabs">
	<ul  id="flowtabs">
	<li ><a href="#" title="General" class="tab_general" >'.$this->l('General').'</a></li> 
	<li ><a href="#" title="Category" class="tab_on tab_lang_default" >'.$this->l('Category').'</a></li> 
	 <li ><a href="#" title="Flash" class="tab_on " >'.$this->l('Flash Sales').'</a></li>     
      <li><a href="#" title="Countant" class="tab_on " >'.$this->l('Coutant Price').'</a></li>     
	  <li ><a href="#" title="stocks" class="tab_on " >'.$this->l('clearance').'</a></li>
      <li ><a href="#" title="Promotion" class="tab_on " >'.$this->l('Promotion').'</a></li>     
      <li ><a href="#" title="Sale" class="tab_on " >'.$this->l('On sale !').'</a></li>
      <li ><div class="tab_void"></div></li>	  
	  </ul>
 
 
 
	  ';

Et ma fonction jquery

Citation:

$this->_html .= '<script type="text/javascript">
$(function() {
$("#flowtabs").tabs("#flowpanes > div").history();
});</script> </div>';