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

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