1

我正在使用 Kendo UI MVC，并且我在 acshtml 页面上有一个 kendoTabStrip。默认情况下，我选择页面加载时的第一个选项卡。所有其他选项卡都使用 AJAX 动态加载。问题：我试图找到选定的选项卡，以便找到它的子项？找到活动选项卡的一种方法是调用不带参数的 select() 方法，或者另一种方法是检查类名“k-state-active”，但是这两种方法都不起作用

<section class="tpt-tabstrip">
    @(Html.Kendo().TabStrip()
    .Name("MyTabStrip")    
    .Animation(false)    
    .Items(items =>
    {
        foreach (var revision in Model.MyCollection)
        {
            items.Add()
            .Text(revision.Name)
            .LoadContentFrom("MyActionMethod", "MyController", Model.ID);
        }
    })
    )    
</section>
<script src="~/Scripts/MyScript.js"></script>

请注意，在上面的 cshtml 中，脚本标记位于页面末尾。
下面是脚本代码

$(function(){       
    var tabStrip = $("#MyTabStrip").getKendoTabStrip();
    if (tabStrip != null && tabStrip.tabGroup.length > 0) {
        tabStrip.select(0); // this line is getting executed for sure
    }

    // the line below returns -1 here why?????
    var index = tabStrip.select().index(); 

    // another way to find active tab is by checkikng class name 'k-state-active' however it didnt work either. 
    // jQuery couldnt find any element with class 'k-state-active'
    $('.k-state-active')
})

UPDATE1
tabstrip 的激活事件对我不起作用，因为每次我选择选项卡时都会触发它。我需要一个只触发一次的事件。最终我想在选定的选项卡上找到 NumericTextBox 控件并将“更改”事件处理程序附加到这些控件。像下面

$(function(){
    var tabStrip = $('#MyTabStrip').data("kendoTabStrip");
    tabStrip.bind('activate', function (e) {
       $('[data-role="numerictextbox"]').each(function(){
           $(this).getKendoNumericTextBox().bind("change",function(e){
              alert('changed');
        })
       })
    });
})

每次我选择选项卡时，更改事件处理程序都会附加到 NumericTextBox

4

1 回答 1

1

$('.k-state-active') 工作正常，它将从 DOM 返回两个元素。您正在尝试在 $(document).ready 中选择元素，这就是您没有获取元素的原因，因为尚未呈现选项卡控件。

尝试编写您的代码onActivate剑道标签条控件的事件。 OnActivate事件在选项卡可见且动画完成后触发。在 2014 年第二季度之前，此事件在选项卡显示之后但在动画结束之前调用。此事件仅针对具有关联内容的选项卡触发。在http://docs.telerik.com/kendo-ui/api/javascript/ui/tabstrip#events-activate查看更多信息

第一个标签名称

<li class="k-item k-state-default k-first k-tab-on-top k-state-active" role="tab" aria-controls="RoleTabs-1" style="" aria-selected="true">
<span class="k-loading k-complete k-progress"></span>
<a class="k-link">Tab Name</a>

第二个标签内容

<div class="k-content k-state-active" id="RoleTabs-1" style="display: block; height: auto; overflow: auto; opacity: 1;" role="tabpanel" aria-expanded="true">

于 2016-04-27T06:10:25.933 回答