如何使用剑道标签条附加事件?

我有一个剑道标签和一个 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>

我可以在选项卡单击时隐藏网格,但是如何在选项卡折叠时显示网格?


慕桂英4014372
浏览 98回答 1
1回答

红颜莎娜

我想到的第一件事是使用select并检查是否有活动选项卡,没有活动选项卡显示网格,否则隐藏它,如下所示:var tabStrip = $("#tabstrip").kendoTabStrip({&nbsp; select: function(e) {&nbsp; &nbsp; setTimeout(function(){&nbsp; &nbsp; &nbsp; var active = $(".k-state-active").length;&nbsp; &nbsp; &nbsp; if(active) {&nbsp; &nbsp; &nbsp; &nbsp; $("#grid").hide();&nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; $("#grid").show();&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }, 0);&nbsp; },&nbsp;&nbsp; collapsible: true...
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript