Jquery ui tools - onglets affichant tous en même temps

Question

J'utilise les outils Jquery pour mes onglets - quelque chose ne va pas, je ne sais pas (tout fonctionnait) ... tous les panneaux sont affichés en même temps pour certains raison ... voici le code:

<div id="form"> 
    <ul class="tabs"> 
     <li><a href="#"><%= GetResourceString("TabHeaderBasic") %></a></li> 
     <li><a href="#"><%= GetResourceString("TabHeaderDetailed") %></a></li> 
    </ul> 

    <div class="panes">    
     <div class="pane"> 
      <h2><%= GetResourceString("PersonalInfoHeader") %></h2> 
      <%= this.TextBox(x => x.FirstName).LocalizedLabel().LocalizedTitle().Size(35).Required() %> 
      <%= this.TextBox(x => x.LastName).LocalizedLabel().LocalizedTitle().Size(35).Required() %> 
      <%= this.ValidationMessage(x => x.LastName) %> 
      <%= this 
       .Select(x => x.Gender) 
       .LocalizedLabel() 
       .LocalizedTitle() 
       .Options(ViewModel.GenderOptions) 
       .Selected(ViewModel.Gender.ToString()) 
       .FirstOption("", "Not Specified") 
       .Required() %><br /> 
      <%= this.DateTextBox(x => x.DateOfBirth).LocalizedLabel().LocalizedTitle().Required() %> 
      <%= this.ValidationMessage(x => x.DateOfBirth ) %> 

      <h2><%= GetResourceString("AccountDetailsHeader") %></h2> 
      <%= this.TextBox(x => x.EmailAddress).LocalizedLabel().LocalizedTitle().Size(35).Required() %> 

      <% if (ViewModel.IsExistingUser) { %> 
       <%= this.Password(x => x.OldPassword).LocalizedLabel().LocalizedTitle().Size(35)%> 
      <% } %> 

      <%= this.Password(x => x.Password).LocalizedLabel().LocalizedTitle().Size(35)%><br /> 
      <%= this.Password(x => x.PasswordConfirmation).LocalizedLabel().LocalizedTitle().Size(35)%><br /> 
      <span class="row"> 
      <%= this.CheckBox(x => x.AgreesToTermsAndConditions).LocalizedLabelAfter() %> 
      </span><br /> 
      <% if (!ViewModel.IsExistingUser) { %> 
       <%= this.CheckBox(x => x.AgreesToTermsAndConditions).LocalizedLabelAfter().Required() %> 
       <%= this.ValidationMessage(x => x.AgreesToTermsAndConditions) %> 
       <%= Html.GenerateCaptcha() %> 
       <%= this.ValidationMessage(x => x.CaptchaValid) %> 
      <% } %> 

      <p> 
       <% if (ViewModel.IsExistingUser) { %> 
       <%= this.SubmitButton(GetResourceString("ButtonSubmitEdit")).Class("register btn") %> 
       <% } else { %> 
       <input type="button" class="next btn" value="<%= GetLocalResourceObject("ButtonNext") %>" /> 
       <%= this.SubmitButton(GetResourceString("ButtonSubmitBasic")).Class("register btn")%> 
       <% } %> 
      </p> 
     </div> 

     <div class="pane"> 
      <h2><%= GetResourceString("AddressHeader") %></h2> 

      <% Html.RenderPartial("EditAddress", ViewModel.Address); %> 

      <span class="row"> 
       <%= this.CheckBox(x => x.OnlyShowLocalEvents).LocalizedLabelAfter().LocalizedTitle() %> 
      </span><br />     

      <h2>Other Details</h2> 
      <%= this.TextBox(x => x.PhoneNumber).LocalizedLabel().LocalizedTitle() %> 

      <p> 
       <% if (ViewModel.IsExistingUser) { %> 
       <%= this.SubmitButton(GetResourceString("ButtonSubmitEdit")).Class("register btn") %> 
       <% } else { %> 
       <input type="button" class="previous btn" value="<%= GetLocalResourceObject("ButtonPrevious") %>" /> 
       <%= this.SubmitButton(GetResourceString("ButtonSubmit")).Class("register btn") %> 
       <% } %> 
      </p> 
     </div> 
    </div> 
    </div> 

CSS

 
/* root element for tabs */ 
ul.tabs { 
    list-style:none; 
    margin:0 !important; 
    padding:0; 
    border-bottom:1px solid #666;  
    height:30px; 
} 

/* single tab */ 
ul.tabs li { 
    float:left; 
    text-indent:0; 
    padding:0; 
    margin:0 !important; 
    list-style-image:none !important; 
} 

/* link inside the tab. uses a background image */ 
ul.tabs a { 
    background: url(../images/blue.png) no-repeat -420px 0; 
    font-size:11px; 
    display:block; 
    height: 30px; 
    line-height:30px; 
    width: 134px; 
    text-align:center; 
    text-decoration:none; 
    color:#333; 
    padding:0px; 
    margin:0px; 
    position:relative; 
    top:1px; 
} 

ul.tabs a:active { 
    outline:none;   
} 

/* when mouse enters the tab move the background image */ 
ul.tabs a:hover { 
    background-position: -420px -31px; 
    color:#fff; 
} 

/* active tab uses a class name "current". it's highlight is also done by moving the background image. */ 
ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a { 
    background-position: -420px -62px;  
    cursor:default !important; 
    color:#000 !important; 
} 

/* Different widths for tabs: use a class name: w1, w2, w3 or w2 */ 
/* width 1 */ 
ul.tabs a.s    { background-position: -553px 0; width:81px; } 
ul.tabs a.s:hover { background-position: -553px -31px; } 
ul.tabs a.s.current { background-position: -553px -62px; } 

/* width 2 */ 
ul.tabs a.l    { background-position: -248px -0px; width:174px; } 
ul.tabs a.l:hover { background-position: -248px -31px; } 
ul.tabs a.l.current { background-position: -248px -62px; } 


/* width 3 */ 
ul.tabs a.xl   { background-position: 0 -0px; width:248px; } 
ul.tabs a.xl:hover { background-position: 0 -31px; } 
ul.tabs a.xl.current { background-position: 0 -62px; } 


/* initially all panes are hidden */ 
div.panes label { 
    font-size: 95%; 
    font-weight: bold; 
    color: #222222; 
    line-height: 150%; 
    padding-bottom: 3px; 
    display:block; 
} 

/* tab pane styling */ 
/*div.panes > div.pane*/ 
div.panes > div.pane 
{ 

    padding: 15px 10px; 
    border: 1px solid #999; 
    border-top: 0; 
    font-size: 14px; 
    background: #fff 0 5px; 
    height: 100%; 
} 

code d'initialisation

 
function initializeWizard() { 
// $("ul.tabs").tabs("div.panes > div"); 

    $("ul.tabs").tabs("div.panes > div"); 
    var api = $("ul.tabs").tabs(0); 
    $(":input[type='button'].next").click(function() { api.next(); return false; }); 
    $(":input[type='button'].previous").click(function() { api.prev(); return false; }); 

} 

Answer 1

Il peut être dr astiquement simplifié. Vous n'avez pas besoin d'envelopper les volets/onglets individuels, et vous devez avoir des liens directement vers les ID.

HTML:

<div id="form"> 
    <ul class="tabs"> 
     <li><a href="#Pane1"><%= GetResourceString("TabHeaderBasic") %></a></li> 
     <li><a href="#Pane2"><%= GetResourceString("TabHeaderDetailed") %></a></li> 
    </ul> 
     <div class="pane" id="Pane1"> 
      <h2><%= GetResourceString("PersonalInfoHeader") %></h2> 
      ... 
     </div> 

     <div class="pane" id="Pane2"> 
      <h2><%= GetResourceString("AddressHeader") %></h2> 
      ... 
     </div> 
    </div> 

JavaScript:

$('#form').tabs(); 

Answer 2

Si vous voyez tous les volets d'onglet en même temps, il se peut que vous n'avez pas inclus les feuilles de style définies dans la Fichier 'ui.core.css' fourni avec l'interface utilisateur.

Ce fichier doit se trouver dans le même répertoire que 'ui.tabs.css', où le reste des styles ".ui-tabs" a été défini. Il peut être plus facile d'utiliser simplement 'ui.all.css'