4

ドキュメントによると、ウィジェット構成に「navigatable: false」を含めることで、Kendo UI TabStrip ウィジェットでキーボード ナビゲーションをオフにできるはずです。しかし、私はこれを機能させることができません。私は、私のジレンマを例示するための最低限の内容を含む要約 (以下を参照) を作成しました。何か不足していますか、それともライブラリのバグのように見えますか?

以下は、コード スニペットの例です。タブ ストリップにキーボード フォーカスを与えるには、タブ ストリップ内の任意の場所をクリックします。次に、矢印キーを押すと、キーボードナビゲーションが無効になると予想されるときにタブストリップをナビゲートします。

$(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>

4

1 に答える 1

5

この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>

于 2014-09-26T04:56:12.220 に答える