<div id="divId" style="clear:both;float:none;width:100%;height:80%;min-width:923px;margin:5px 0px 5px 0px;">
@(Html.Kendo().TabStrip()
.Name("Insignia")//TabStrip的名字,类似于HTML中的ID,唯一的
.Animation(false)//是否启用TabStrip的动画效果
.HtmlAttributes(new { style="height:80%;"})//设置属性或者CSS样式
.Items(tabstrip =>//设置选项卡
{
tabstrip.Add()
.Text("ONE PIECE")//选项卡上显示的内容
.Selected(true)//是否默认选中
.HtmlAttributes(new { style = "height:80%;" })
.Content(@<text>//选项卡中的内容
<div style = "height:600px;">
@(Html.Kendo().ComboBox()
.Name("HZWCbo")
.DataTextField("Text")
.SelectedIndex(1)
.DataValueField("Value")
.Filter(FilterType.StartsWith)
.BindTo(new List<SelectListItem>() {
new SelectListItem() {
Text = "Monkey·D·Luffy", Value = "LF"
},
new SelectListItem() {
Text = "Roronoa Zoro", Value = "SL"
},
new SelectListItem() {
Text = "Nami", Value = "NM"
},
new SelectListItem() {
Text = "Usopp", Value = "WSP"
},
new SelectListItem() {
Text = "Sanji", Value = "XJS"
},
new SelectListItem() {
Text = "Tony Tony Chopper", Value = "QB"
},
new SelectListItem() {
Text = "Nico·Robin", Value = "LB"
},
new SelectListItem() {
Text = "FRANKY", Value = "FLQ"
},
new SelectListItem() {
Text = "Burukku", Value = "BLK"
}
})
)
</div>
</text>);
tabstrip.Add().Text("LOL")
.Content(@<text>
League of Legends
</text>);
tabstrip.Add().Text("Kuroko No Basketball")
.Content(@<text>
Kuroko No Basketball
</text>);
})
)
</div>
TabStipr中的Items也可以加载单独的页面:
<div id="divId" style="min-height:500px;min-width:960px">
@(Html.Kendo().TabStrip()
.Name("Insignia")
.Animation(true)
.Items(tabstrip =>
{
tabstrip.Add().Text("ONE PIECE")
.Selected(true)
.LoadContentFrom(Url.Content(string.Format("~/ONE PIECE")));
tabstrip.Add().Text("LOL")
.LoadContentFrom(Url.Content(string.Format("~/LEAGUE OF LEGENDS")));
tabstrip.Add().Text("Kuroko No Basketball")
.LoadContentFrom(Url.Content(string.Format("~/KUROKO NO BASKETBALL")));
})
)
</div>
实用小技巧:
1.在ONE PIECE页面上放置一个按钮,然后使用TabStrip的select(1)方法切换到LOL页面,再返回ONE PIECE页面后,页面的内容就都看不见了。可以使用$("#Insignia-1").css("opacity", "1");让内容显示。或者
2.建议使用下面的第二行代码获取kendoTabStrip对象。若使用第一行的代码获取kendoTabStrip对象并调用kendoTabStrip对象的方法时,可能会有莫名的副作用,目前遇到的问题是:如若使用第一行的代码获取kendoTabStrip对象并条用kendoTabStrip对象的方法的时候,而恰巧页面使用LoadContentFrom方法显示页面的话,当从一个tab跳转到另一个tab的话页面会被加载多次。就像LoadContentFrom方法执行了多次一样。
oTabStrip = $(oTabMyFavorite).kendoTabStrip().data("kendoTabStrip");
oTabStrip = $(oTabMyFavorite).data("kendoTabStrip");