YUI3在TabView中找到当前选项卡

时间:2010-12-01 10:38:13

标签: yui yui3 tabview

我正在使用YUI3 TabView组件,我希望能够获取当前所选标签的索引。我一直在浏览api文档,但似乎找不到相关的方法来做到这一点。

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

谢谢!

1 个答案:

答案 0 :(得分:2)

“indexOf”实际上有效,如果你使用“tabview.get('selection')”作为参数。

示例:

<!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>