YUI3 在 TabView 中查找当前选项卡答案

【问题标题】：YUI3 find current tab in TabViewYUI3 在 TabView 中查找当前选项卡
【发布时间】：2010-12-01 10:38:12
【问题描述】：

我正在使用 YUI3 TabView 组件，我希望能够获取当前选定选项卡的索引。我一直在浏览 api 文档，但似乎找不到相关的方法。

http://developer.yahoo.com/yui/3/api/module_tabview.html

谢谢！

【问题讨论】：

标签： yui yui3 tabview

【解决方案1】：

如果您使用“tabview.get('selection')”作为参数，“indexOf”实际上可以工作。

例子：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Untitled Document</title>
    <script type="text/javascript" charset="utf-8"
        src="http://yui.yahooapis.com/3.2.0/build/yui/yui-min.js">
    </script>
    </head>
    <body>
      <body class="yui3-skin-sam">
      <p id="msg"></p>
    <input type='button' value='Button' id='button'/>
    <div id="demo">
        <ul>
            <li><a href="#foo">foo</a></li>
            <li><a href="#bar">bar</a></li>
            <li><a href="#baz">baz</a></li>
        </ul>
        <div>
            <div id="foo">foo content</div>
            <div id="bar">bar content</div>
            <div id="baz">baz content</div>
        </div>
    </div>
    <script>
var YUI;
YUI().use('event', 'node', 'tabview', function (Y) {
  Y.one('#msg').set('innerHTML', 'message area');

  var tabview = new Y.TabView({srcNode: '#demo'});
  tabview.render();

  var displayIndex = function (tabview) {
    var sel = tabview.get('selection');
    var idx = tabview.indexOf(sel);
    Y.one('#msg').set('innerHTML', 'Selected Tab Index = ' + idx);
  }
  displayIndex(tabview);

  Y.after('click', function(e) {
    displayIndex(this);
  },'body',tabview);

});
    </script>
    </body>
</html>

【讨论】：

谨慎使用选择。如果您启用了多个选择，则 selection 可以返回一个小部件实例或一个 ArrayList。更好的选择可能是 tabview.get('activeDescendant')，它只会返回一个小部件实例。 tabview/tab 使用 widget-parent / widget-child 扩展。在此处查看文档：developer.yahoo.com/yui/3/api/WidgetParent.html 和 developer.yahoo.com/yui/3/api/WidgetChild.html