MVC Kendo总结之-----> TabStrip

来源：互联网发布：成都姣美网络编辑：程序博客网时间：2024/06/07 18:14

<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");让内容显示。

0 0