Question

我无法使用这段简单的代码。我究竟做错了什么？我想要的是当我导航到这个视图时要更改的标签。

<div id="foo" data-role="view" data-show="changeTab">
  <div data-role="footer">
    <div data-role="tabstrip">
      <a href="#foo" data-icon="contacts">foo</a>
      <a href="#bar" data-icon="contacts">bar</a>
    </div>
  </div>
</div>

<script>
var app = new kendo.mobile.Application();
function changeTab() {
  var tabstrip = app.view().footer.find(".km-tabstrip").data("kendoMobileTabStrip");
  tabstrip.switchByFullUrl("#bar"); //activate second tab
}
</script>

或者在这里试试：jsfiddle

Answer 1

当使用选项卡的URL导航到视图时，Kendo UI Mobile TabStrip会自动更新。在这种情况下无需额外的代码。检查修改后的jsFiddle。

<div id="foo" data-role="view">
  <div data-role="footer">
    <div data-role="tabstrip">
      <a href="#foo" data-icon="contacts">foo</a>
      <a href="#bar" data-icon="contacts">bar</a>
    </div>
  </div>
</div>

<div id="bar" data-role="view">
  <div data-role="footer">
    <div data-role="tabstrip">
      <a href="#foo" data-icon="contacts">foo</a>
      <a href="#bar" data-icon="contacts">bar</a>
    </div>
  </div>
</div>

<script>
  var app = new kendo.mobile.Application();
</script>

根据您的回答 - 如果您有多个带有一个Url的视图，则可以使用select方法手动导航到新视图，这将正确选择该选项卡。检查新的Fiddle。

在视图显示的选项卡上更新选项卡

1 个答案: