[英]How to attach event with a kendo tabstrip?
我有一个剑道选项卡和一个 div 元素(剑道网格附加到这个网格)。 每当任何选项卡处于活动状态时,我都想隐藏网格。 当标签折叠时,我想再次显示网格。 这是我所做的:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.219/styles/kendo.default-v2.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.1.219/js/kendo.all.min.js"></script>
</head>
<body>
<div id="tabstrip">
<ul>
<li id="tab1">Tab 1</li>
<li id="tab2">Tab 2</li>
</ul>
<div>
<button class='k-button'>Select second tab</button>
</div>
<div>Content 2</div>
</div>
<div id=grid></div>
<script>
var grid = $("#grid").kendoGrid({
dataSource: {
data: [
{name: "John", age: "20"}
]
}
}).data("kendoGrid");
var onActivate = function(e) {
console.log(e.item.id);
if(e.item.id === "tab1" || e.item.id === "tab2"){
$("#grid").hide();
}
}
var tabStrip = $("#tabstrip").kendoTabStrip({
activate: onActivate,
collapsible: true,
animation: {
open:{
effects: "fade"
}
}
}).data("kendoTabStrip");
</script>
</body>
</html>
我可以在单击选项卡时隐藏网格,但是如何在选项卡折叠时显示网格?
我想到的第一件事是使用select
并检查是否有活动标签,没有活动标签显示网格,否则将其隐藏,如下所示:
var tabStrip = $("#tabstrip").kendoTabStrip({
select: function(e) {
setTimeout(function(){
var active = $(".k-state-active").length;
if(active) {
$("#grid").hide();
} else {
$("#grid").show();
}
}, 0);
},
collapsible: true...
工作示例:在选项卡折叠时显示网格
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.