懂jQuery UI和ARIA的前辈帮忙指点下！

下面有两段代码，全部来自jQuery UI官方，帮忙的前辈可以复制为HTML测试，一段是TAB标签选择夹的，一段是MENU菜单的。
首先TAB例子中，我只想问的是
这一段，在HTML中有这么一句：
每个TAB标签上都添加了个关闭的SPAN，并且有个属性 role='presentation'，然后通过上面那句 .attr( "aria-controls" ) 就能找到 panelId 了，这个我查了下是ARIA，是什么盲人等障碍阅读弄出来的，但是看资料看的更晕了，希望哪位前辈通俗的给讲讲呗然后就是下段MENU菜单的例子了，这个没什么要问的，根据上面的ARIA功能，点某个关闭按钮就能关闭掉对应的TAB标签的话，那么我试想，菜单的项目对应到TAB标签上，点击菜单的某个项目，如果该TAB不存在，就利用第一段代码中的addtab方法添加并激活它；如果存在，就自动切换到该TAB激活。
这个功能其实用常规的思维，利用HTML元素的属性，加上jQuery一些函数，通过查找判断我想我差不多可以写出来，但是感觉太麻烦，并且也没有ARIA好，所以我希望前辈给演示下，如何实现我前面说的点菜单项目的功能，谢谢！通过ARIA将上述功能实现了就给分，但是我希望最好在您有时间的情况下给我通俗的讲解下ARIA，多谢！这是TAB选项卡的代码：<!doctype html>
 
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Tabs - Simple manipulation</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <style>
  #dialog label, #dialog input { display:block; }
  #dialog label { margin-top: 0.5em; }
  #dialog input, #dialog textarea { width: 95%; }
  #tabs { margin-top: 1em; }
  #tabs li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; }
  #add_tab { cursor: pointer; }
  </style>
  <script>
  $(function() {
    var tabTitle = $( "#tab_title" ),
      tabContent = $( "#tab_content" ),
      tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>",
      tabCounter = 2;
 
    var tabs = $( "#tabs" ).tabs();
 
    // modal dialog init: custom buttons and a "close" callback reseting the form inside
    var dialog = $( "#dialog" ).dialog({
      autoOpen: false,
      modal: true,
      buttons: {
        Add: function() {
          addTab();
          $( this ).dialog( "close" );
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      },
      close: function() {
        form[ 0 ].reset();
      }
    });
 
    // addTab form: calls addTab function on submit and closes the dialog
    var form = dialog.find( "form" ).submit(function( event ) {
      addTab();
      dialog.dialog( "close" );
      event.preventDefault();
    });
 
    // actual addTab function: adds new tab using the input from the form above
    function addTab() {
      var label = tabTitle.val() || "Tab " + tabCounter,
        id = "tabs-" + tabCounter,
        li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) ),
        tabContentHtml = tabContent.val() || "Tab " + tabCounter + " content.";
 
      tabs.find( ".ui-tabs-nav" ).append( li );
      tabs.append( "<div id='" + id + "'><p>" + tabContentHtml + "</p></div>" );
      tabs.tabs( "refresh" );
      tabCounter++;
    }
 
    // addTab button: just opens the dialog
    $( "#add_tab" )
      .button()
      .click(function() {
        dialog.dialog( "open" );
      });
 
    // close icon: removing the tab on click
    tabs.delegate( "span.ui-icon-close", "click", function() {
      var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" );
      $( "#" + panelId ).remove();
      tabs.tabs( "refresh" );
    });
 
    tabs.bind( "keyup", function( event ) {
      if ( event.altKey && event.keyCode === $.ui.keyCode.BACKSPACE ) {
        var panelId = tabs.find( ".ui-tabs-active" ).remove().attr( "aria-controls" );
        $( "#" + panelId ).remove();
        tabs.tabs( "refresh" );
      }
    });
  });
  </script>
</head>
<body>
 
<div id="dialog" title="Tab data">
  <form>
    <fieldset class="ui-helper-reset">
      <label for="tab_title">Title</label>
      <input type="text" name="tab_title" id="tab_title" value="" class="ui-widget-content ui-corner-all" />
      <label for="tab_content">Content</label>
      <textarea name="tab_content" id="tab_content" class="ui-widget-content ui-corner-all"></textarea>
    </fieldset>
  </form>
</div>
 
<button id="add_tab">Add Tab</button>
 
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a> <span class="ui-icon ui-icon-close" role="presentation">Remove Tab</span></li>
  </ul>
  <div id="tabs-1">
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
  </div>
</div>
 
 
</body>
</html>
这是MENU菜单的代码：<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Menu - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <script>
  $(function() {
    $( "#menu" ).menu();
  });
  </script>
  <style>
  .ui-menu { width: 150px; }
  </style>
</head>
<body>
 
<ul id="menu">
  <li class="ui-state-disabled"><a href="#">Aberdeen</a></li>
  <li><a href="#">Ada</a></li>
  <li><a href="#">Adamsville</a></li>
  <li><a href="#">Addyston</a></li>
  <li>
    <a href="#">Delphi</a>
    <ul>
      <li class="ui-state-disabled"><a href="#">Ada</a></li>
      <li><a href="#">Saarland</a></li>
      <li><a href="#">Salzburg</a></li>
    </ul>
  </li>
  <li><a href="#">Saarland</a></li>
  <li>
    <a href="#">Salzburg</a>
    <ul>
      <li>
        <a href="#">Delphi</a>
        <ul>
          <li><a href="#">Ada</a></li>
          <li><a href="#">Saarland</a></li>
          <li><a href="#">Salzburg</a></li>
        </ul>
      </li>
      <li>
        <a href="#">Delphi</a>
        <ul>
          <li><a href="#">Ada</a></li>
          <li><a href="#">Saarland</a></li>
          <li><a href="#">Salzburg</a></li>
        </ul>
      </li>
      <li><a href="#">Perch</a></li>
    </ul>
  </li>
  <li class="ui-state-disabled"><a href="#">Amesville</a></li>
</ul>
 
 
</body>
</html>

解决方案 »

  1.   

    不知道你说啥？
    关ARIA什么事？
    你有没有用过ARIA的设备。
      

  2.   

    不好意思，可能是我没表述清楚，这里有篇MSDN的东西，介绍了ARIA属性：
    http://msdn.microsoft.com/zh-cn/jj863135其实简单点说，我对他描述的准确与否跟我的问题无关，看上面的TAB例子代码，每个TAB标签上带一个SPAN，图标是个X，作用是关闭该标签页，一般的思路，应该就是用JS数组什么的保存SPAN的ID啊，或者有个计数++的来进行操作吧但是看人家的代码没有一点这么繁琐的东西，用了个role='presentation'，然后通过上面那句 .attr( "aria-controls" ) 就能找到对应的TAB标签了，对我这个新手来说，太神奇了所以这玩意怎么描述更准确我确实不懂，要是有这方面的知识我愿意学习，而我这里最想要的结果就是：
    通过类似这种方式，让我可以实现——菜单项对应指定的TAB标签，点击菜单项，如果该TAB页面不存在，就会添加一个页面并激活；如果存在，那么直接切换到这个页面激活，这么说，应该清楚了吧？
      

  3.   


    tabs.delegate( "span.ui-icon-close", "click", function() {
          var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" );
          $( "#" + panelId ).remove();
          tabs.tabs( "refresh" );
        });没看到它加了个事件吗？跟role='presentation  aria-controls 没有半点关系。
    加role='presentation  aria-controls 这些属性是为了让   那种能读懂这些标签的程序或设备使用。（这种高级设备我目前没见过）
      

  4.   


    tabs.delegate( "span.ui-icon-close", "click", function() {//所有关闭按钮都继承点击事件：
          var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" );
          //关闭按钮向上查询最先匹配的 li 元素并移除；
          // 这里就是关键了，panelId 是怎么得到的？就是.attr( "aria-controls" ) 读取这个属性才得到的吧？这里并没有读 li a 元素的 href 属性，所以得到 tab-xxx 这个ID 用于下一句的删除是什么原理呢？这个就是我想问的重点！
          $( "#" + panelId ).remove();
          tabs.tabs( "refresh" );
        });
      

  5.   

    关键是你没看ui的源代码。
    没看jQuery的源代码。不就是个属性。在 tabs.tabs( "refresh" )时，重新检索，加上去的。
      

  6.   

    tabs.tabs( "refresh" );
    只是刷新了这个TAB啊，所有的控件添加或删除不都要刷新才显示吗？你能说下，这个 panelId 是怎么来的吗？我的理解是：
    var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" );
    简化掉查找删除的部分，这个 panelId 其实就是：
    var panelId = $( this ).attr( "aria-controls" );我这么理解不对吗？
      

  7.   

    refresh: function() {
    .....
    this._processTabs();
    .....}
    _processTabs: function() {
    var that = this; this.tablist = this._getList()
    .addClass( "ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" )
    .attr( "role", "tablist" ); this.tabs = this.tablist.find( "> li:has(a[href])" )
    .addClass( "ui-state-default ui-corner-top" )
    .attr({
    role: "tab",
    tabIndex: -1
    }); this.anchors = this.tabs.map(function() {
    return $( "a", this )[ 0 ];
    })
    .addClass( "ui-tabs-anchor" )
    .attr({
    role: "presentation",
    tabIndex: -1
    }); this.panels = $(); this.anchors.each(function( i, anchor ) {
    var selector, panel, panelId,
    anchorId = $( anchor ).uniqueId().attr( "id" ),
    tab = $( anchor ).closest( "li" ),
    originalAriaControls = tab.attr( "aria-controls" ); // inline tab
    if ( isLocal( anchor ) ) {
    selector = anchor.hash;
    panel = that.element.find( that._sanitizeSelector( selector ) );
    // remote tab
    } else {
    panelId = that._tabId( tab );
    selector = "#" + panelId;
    panel = that.element.find( selector );
    if ( !panel.length ) {
    panel = that._createPanel( panelId );
    panel.insertAfter( that.panels[ i - 1 ] || that.tablist );
    }
    panel.attr( "aria-live", "polite" );
    } if ( panel.length) {
    that.panels = that.panels.add( panel );
    }
    if ( originalAriaControls ) {
    tab.data( "ui-tabs-aria-controls", originalAriaControls );
    }
    tab.attr({
    "aria-controls": selector.substring( 1 ),
    "aria-labelledby": anchorId
    });
    panel.attr( "aria-labelledby", anchorId );
    }); this.panels
    .addClass( "ui-tabs-panel ui-widget-content ui-corner-bottom" )
    .attr( "role", "tabpanel" );
    },
      

  8.   

    补充一下：
    role='presentation  aria-controls  这些只是个通用的（共同约定）的属性，便于其它程序，对它进行处理而已。没有程序对它处理，它什么也不是。
    要不你该个其它名字也行。