如何在 Kendo UI TabStrip 中禁用键盘导航？答案

【问题标题】：How to disable keyboard navigation in a Kendo UI TabStrip?如何在 Kendo UI TabStrip 中禁用键盘导航？
【发布时间】：2014-09-25 20:32:05
【问题描述】：

根据documentation，我应该能够通过在小部件配置中包含“navigatable: false”来关闭 Kendo UI TabStrip 小部件中的键盘导航。但是，我无法让它工作。我做了一个总结（见下文），其中包含最低限度的例子来说明我的困境。我是否遗漏了什么或者这看起来像是库中的错误？

下面是一个代码 sn-p 示例。要将键盘焦点赋予选项卡条，只需单击其中的任意位置。然后，当我希望禁用键盘导航时，按下箭头键将导航标签条。

$(document).ready(function() {
  $("#tabstrip").kendoTabStrip({
    navigatable : false
  });
});

<link href="http://da7xgjtj801h2.cloudfront.net/2014.1.318/styles/kendo.common.min.css" rel="stylesheet"/>
<link href="http://da7xgjtj801h2.cloudfront.net/2014.1.318/styles/kendo.rtl.min.css" rel="stylesheet"/>
<link href="http://da7xgjtj801h2.cloudfront.net/2014.1.318/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://da7xgjtj801h2.cloudfront.net/2014.1.318/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="http://da7xgjtj801h2.cloudfront.net/2014.1.318/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://da7xgjtj801h2.cloudfront.net/2014.1.318/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://da7xgjtj801h2.cloudfront.net/2014.1.318/js/kendo.all.min.js"></script>
<div id="tabstrip">
  <ul>
    <li class="k-state-active">Tab A</li>
    <li>Tab B</li>
  </ul>
  <div>
    <div>Content for Tab A</div>
  </div>
  <div>
    <div>Content for Tab B</div>
  </div>
</div>

【问题讨论】：

欢迎来到 SO！感谢您提供一个小示例，但最好将其包含在问题本身而不是链接中。 SO 现在有一个名为 stack snippet 的东西，您可能想要使用它。
感谢@Ajean 的建议！我用堆栈 sn-p 替换了链接。

标签： kendo-ui kendo-tabstrip

【解决方案1】：

此navigatable 选项于2014 年6 月25 日在Q2 2014 Beta 中首次引入。我认为您使用的版本不包括它。尝试使用较新的 2014.2.716

$(document).ready(function() {
  $("#tabstrip").kendoTabStrip({
    navigatable : false
  });
});

<link href="http://da7xgjtj801h2.cloudfront.net/2014.2.716/styles/kendo.common.min.css" rel="stylesheet"/>
<link href="http://da7xgjtj801h2.cloudfront.net/2014.2.716/styles/kendo.rtl.min.css" rel="stylesheet"/>
<link href="http://da7xgjtj801h2.cloudfront.net/2014.2.716/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://da7xgjtj801h2.cloudfront.net/2014.2.716/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="http://da7xgjtj801h2.cloudfront.net/2014.2.716/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://da7xgjtj801h2.cloudfront.net/2014.2.716/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="http://da7xgjtj801h2.cloudfront.net/2014.2.716/js/jquery.min.js"></script>
<script src="http://da7xgjtj801h2.cloudfront.net/2014.2.716/js/kendo.all.min.js"></script>
<div id="tabstrip">
  <ul>
    <li class="k-state-active">Tab A</li>
    <li>Tab B</li>
  </ul>
  <div>
    <div>Content for Tab A</div>
  </div>
  <div>
    <div>Content for Tab B</div>
  </div>
</div>

【讨论】：

感谢@OnaBai，这似乎有效。我将不得不更新我们平台中的剑道库并进行一些测试。我会赞成你的回答，但我没有足够的声誉，所以我的感谢就足够了。
别担心，我会的！ :-)