首页 文章

Jquery ui工具 - 标签窗格全部显示

提问于
浏览
1

我正在使用Jquery工具作为我的标签 - 出了问题,我不知道(因为一切正常)...所有面板由于某种原因一次显示...这里是代码:

<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() %>
<%= 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)%>
<%= this.Password(x => x.PasswordConfirmation).LocalizedLabel().LocalizedTitle().Size(35)%>
<span class="row"> <%= this.CheckBox( x => x.AgreesToTermsAndConditions ).LocalizedLabelAfter() %> </span>
<% 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>
<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%;
}

初始化代码

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; });

}

2 回答

  • 2

    如果您同时看到所有选项卡窗格,则可能是您没有包含UI附带的“ui.core.css”文件中定义的样式表 .

    此文件应与'ui.tabs.css'位于同一目录中,这是定义其余“.ui-tabs”样式的位置 . 使用'ui.all.css'可能更容易

  • 1

    它可以大大简化 . 您不需要包装单个窗格/选项卡,并且您必须直接指向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();
    

相关问题