当我们添加tab时,是否可以在kendo tabstrip中禁用动画。我们已尝试过以下代码 @(Html.Kendo()。TabStrip控件() .NAME( “标签栏”)
.Events(events => events
.Select("onSelect")
)
.Animation(animation =>
{
animation.Enable(false);
})
)
但它不适用于我。请为此提供解决方案。
答案 0 :(得分:0)
下面,我使用javascript配置来实现你的目的。它工作得很好。然后我粘贴相同代码的MVC版本。它运作良好。所以我认为问题的来源是你的其余代码或kendo版本的基础。 此处的JavaScript配置:
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/tabstrip/index">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.material.mobile.min.css" />
<script src="//kendo.cdn.telerik.com/2016.3.1118/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.3.1118/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section k-content">
<div id="tabstrip">
<ul>
<li class="k-state-active">
Paris
</li>
<li>
New York
</li>
<li>
London
</li>
<li>
Moscow
</li>
</ul>
<div>
<span class="rainy"> </span>
<div class="weather">
<h2>17<span>ºC</span></h2>
<p>Rainy weather in Paris.</p>
</div>
</div>
<div>
<span class="sunny"> </span>
<div class="weather">
<h2>29<span>ºC</span></h2>
<p>Sunny weather in New York.</p>
</div>
</div>
<div>
<span class="sunny"> </span>
<div class="weather">
<h2>21<span>ºC</span></h2>
<p>Sunny weather in London.</p>
</div>
</div>
<div>
<span class="cloudy"> </span>
<div class="weather">
<h2>16<span>ºC</span></h2>
<p>Cloudy weather in Moscow.</p>
</div>
</div>
</div>
</div>
<style>
.sunny, .cloudy, .rainy {
display: block;
margin: 30px auto 10px;
width: 128px;
height: 128px;
background: url('../content/web/tabstrip/weather.png') transparent no-repeat 0 0;
}
.cloudy{
background-position: -128px 0;
}
.rainy{
background-position: -256px 0;
}
.weather {
margin: 0 auto 30px;
text-align: center;
}
#tabstrip h2 {
font-weight: lighter;
font-size: 5em;
line-height: 1;
padding: 0 0 0 30px;
margin: 0;
}
#tabstrip h2 span {
background: none;
padding-left: 5px;
font-size: .3em;
vertical-align: top;
}
#tabstrip p {
margin: 0;
padding: 0;
}
</style>
<script>
$(document).ready(function() {
$("#tabstrip").kendoTabStrip({
animation: false
});
});
</script>
</div>
</body>
</html>
使用MVC Razor
,试试这个:
@(Html.Kendo().TabStrip()
.Name("tabstrip")
.Animation(a=>a.Enable(false))
.Items(tabstrip =>
{
tabstrip.Add().Text("Paris")
.Selected(true)
.Content(@<text>
<div class="weather">
<h2>17<span>ºC</span></h2>
<p>Rainy weather in Paris.</p>
</div>
<span class="rainy"> </span>
</text>);
tabstrip.Add().Text("New York")
.Content(@<text>
<div class="weather">
<h2>29<span>ºC</span></h2>
<p>Sunny weather in New York.</p>
</div>
<span class="sunny"> </span>
</text>);
tabstrip.Add().Text("Moscow")
.Content(@<text>
<div class="weather">
<h2>16<span>ºC</span></h2>
<p>Cloudy weather in Moscow.</p>
</div>
<span class="cloudy"> </span>
</text>);
tabstrip.Add().Text("Sydney")
.Content(@<text>
<div class="weather">
<h2>17<span>ºC</span></h2>
<p>Rainy weather in Sidney.</p>
</div>
<span class="rainy"> </span>
</text>);
})
)
答案 1 :(得分:0)
我遇到了同样的问题,因为在我使用的js代码中
$("#tabstrip").kendoTabStrip().data('kendoTabStrip')
.kendoTabStrip()
在此处使用启用的动画再次初始化Tabstrip组件。当您使用MVC初始化它时,它并不是那么明显。所以对我来说,解决方案是将行更改为:
$("#tabstrip").data('kendoTabStrip')