kendo-ui - KendoUI Tabstrip 根据 url 打开一个标签

Question

是否有一些内置功能可以根据 url 打开标签页（kendoUI TabStrip）？还是我必须编写一些自定义函数来读取 url 并在此基础上做一些工作？

Answer 1

检查这是否是您要查找的内容：

HTML：

<div id="tabstrip">
    <ul>
        <li class="k-state-active">Page 1</li>
        <li>Page 2</li>
        <li>Page 3</li>
    </ul>
</div>

JavaScript：

$(document).ready(function () {
    $("#tabstrip").kendoTabStrip({
        contentUrls:[
            "page1.html",
            "page2.html",
            "page3.html"
        ]
    });
});

它创建了 3 个选项卡kendoTabStrip，每个选项卡的内容是page1.html,page2.html和page3.html。

Answer 2

我认为您必须解析 URL，然后调用选项卡条上的activateTab()函数以打开所需的选项卡。

Answer 3

如果要在呈现状态下设置活动选项卡的解决方案（页面加载时不使用Js）

如果您使用模板系统（例如 groovy for play framework 1.x），您可以编写如下内容：

<ul>
  <li class="#{if params.get('ref') == 'application'}k-state-active#{/if}">Application</li>
  <li class="#{if params.get('ref') == 'payment'}k-state-active#{/if}">Payment</li>
</ul>
<div>
  content for tab application
</div>
<div>
  content for tab payment
</div>

注意： params.get('ref') 表示请求的获取参数，名称为：'ref'

如果您使用以下网址打开此页面：someting.dev/dashboard?ref=payment

您将获得付款选项卡作为活动