1
내 탭에 Jquery 도구를 사용하고 있습니다. 모든 것이 작동하고 있으므로 잘 모르는 뭔가 잘못되었습니다. 모든 패널이 동시에 표시되고 있습니다. 이유는 ... 여기에 코드입니다 :Jquery UI 도구 - 한 번에 모두 표시되는 탭 창
<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%;
}
초기화 코드
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; });
}
* face-palm * thanks. – doublejosh