JavaScript DHTML/YUI Library/ARIA

Материал из Web эксперт
Перейти к: навигация, поиск

Содержание

Button ARIA Plugin

   <source lang="html4strict">


<!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=utf-8">

<title>Using the Button ARIA Plugin</title> <style type="text/css"> /*margin and padding on body element 

 can introduce errors in determining
 element position and are not recommended;
 we turn them off as a foundation for YUI
 CSS treatments. */

body { 

 margin:0;
 padding:0;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/menu/assets/skins/sam/menu.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/button/assets/skins/sam/button.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/container/container_core-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/menu/menu-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/element/element-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/button/button-min.js"></script>


<style type="text/css"> 

   #button-example-form fieldset {
       border: 2px groove #ccc;
       margin: .5em;
       padding: .5em;
   }
 /*
   The Menu ARIA Plugin removes the "href" attribute from the <A> element of each MenuItem
   if the value of the "href" is set to "#", resulting in the focus outline no longer be 
   rendered in Gecko-based browsers when the <A> element is focused.  For this reason, 
   it is necessary to restore the focus outline for the <A>. 
 */
 a[role=menuitem]:focus {
   outline: dotted 1px #000;
 }

</style> <script type="text/javascript" src="yui_2.7.0b-assets/container-assets/containerariaplugin.js"></script> <script type="text/javascript" src="yui_2.7.0b-assets/menu-assets/menuariaplugin.js"></script> <script type="text/javascript" src="yui_2.7.0b-assets/button-assets/buttonariaplugin.js"></script>

</head> <body class=" yui-skin-sam">

Using the Button ARIA Plugin

The Button ARIA Plugin makes it easy to use the <a href="http://www.w3.org/TR/wai-aria/">WAI-ARIA Roles and States</a> with the Button and ButtonGroup controls. Using the ARIA plugin, Buttons are more interoperable with assistive technologies (AT), such as screen readers, making them more accessible to users with disabilities.

<a href="http://video.yahoo.ru/watch/3608716/9955201">Watch a screen cast of this example running in Firefox 3 with the NVDA screen reader</a>, to see immediately the benefits that ARIA provides, or <a href="http://www.nvda-project.org/wiki/Snapshots">download the latest development snapshot of NVDA</a> to test this example for yourself.

<script type="text/javascript"> 

   (function () {
     
     var Event = YAHOO.util.Event,
       Button = YAHOO.widget.Button,
       UA = YAHOO.env.ua;
   Event.onContentReady("checkboxbutton-example", function () {    
     var oCheckButton1 = new Button("checkbutton1", { label: "Cheese" });
     var oCheckButton2 = new Button("checkbutton2", { label: "Mushrooms" });
     var oCheckButton3 = new Button("checkbutton3", { label: "Peperoni" });
     var oCheckButton4 = new Button("checkbutton4", { label: "Olives" });
   
   });
   Event.onContentReady("radiobutton-example", function () {
     //  Only apply the WAI-ARIA Roles and States for FF 3 and IE 8 since those
     //  are the only browsers that currently support ARIA.
   
     if ((UA.gecko && UA.gecko >= 1.9) || (UA.ie && UA.ie >= 8)) {
       // Remove the "for" attribute in favor of using the aria-labelledby attribute
       YAHOO.util.Dom.get("buttongroup-label").removeAttribute(YAHOO.env.ua.ie ? "htmlFor" : "for");
     }
     var oButtonGroup = new YAHOO.widget.ButtonGroup("buttongroup", { labelledby: "buttongroup-label" });
   
   });
   Event.onContentReady("menubutton-example", function () {
     var oMenuButton = new Button("menubutton-1", { type: "menu", menu: "menubutton-1-menu" });
   
   });
   Event.onContentReady("splitbutton-example", function () {
     var oMenuButton = new Button("splitbutton-1", { type: "split", menu: "splitbutton-1-menu" });
   
   });
   }());

</script> <form id="button-example-form" name="button-example-form" method="post"> 

 <fieldset id="checkboxbutton-example">
   <legend>Pizza Toppings</legend>
   <input id="checkbutton1" type="checkbox" name="checkboxfield1" value="1" checked>
   <input id="checkbutton2" type="checkbox" name="checkboxfield1" value="2">
   <input id="checkbutton3" type="checkbox" name="checkboxfield1" value="3">
   <input id="checkbutton4" type="checkbox" name="checkboxfield1" value="4">
   
 </fieldset>
 <fieldset id="radiobutton-example">
   <legend>Radio Buttons</legend>

     <label for="radio1" id="buttongroup-label">Size</label>
     <input id="radio1" type="radio" name="radiofield1" value="Small" checked>
     <input id="radio2" type="radio" name="radiofield1" value="Medium">
     <input id="radio3" type="radio" name="radiofield1" value="Large">

 </fieldset>
 <fieldset id="menubutton-example">
   <legend>Menu Button</legend>
   <input type="button" id="menubutton-1" name="menubutton-1" value="Move To">
   <select id="menubutton-1-menu" name="menubutton-1-menu">
     <option value="0">Archive</option>
     <option value="1">Favorites</option>
     <option value="2">Trash</option>                
   </select>
 </fieldset>
 <fieldset id="splitbutton-example">
   <legend>Split Button</legend>  
   <input type="button" id="splitbutton-1" name="splitbutton-1" value="Reply">
   <select id="splitbutton-1-menu" name="splitbutton-1-menu">
     <option value="0">Reply To Sender</option>
     <option value="1">Reply To All</option> 
   </select>
 </fieldset>

</form>

</body> </html> 


 </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>


Container ARIA Plugin

   <source lang="html4strict">


<!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=utf-8">

<title>Using the Container ARIA Plugin</title> <style type="text/css"> /*margin and padding on body element 

 can introduce errors in determining
 element position and are not recommended;
 we turn them off as a foundation for YUI
 CSS treatments. */

body { 

 margin:0;
 padding:0;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/container/assets/skins/sam/container.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/dragdrop/dragdrop-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/container/container-min.js"></script>


<style type="text/css"> 

 /* Default/unfocused Panel style */
 .yui-skin-sam div[role=panel].yui-panel .hd {
   background: #F2F2F2;
 }
 /* Focused Panel style */  
 .yui-skin-sam .yui-panel-container.focused div[role=panel].yui-panel .hd {
   background: url(http://yui.yahooapis.ru/2.5.2/build/assets/skins/sam/sprite.png) repeat-x 0 -200px;
 }
 
 /*
   The Container ARIA Plugin removes the "href" attribute from the <A> used to create the 
   close button for a Panel, resulting in the focus outline no longer be rendered in 
   Gecko-based browsers when the <A> element is focused.  For this reason, it is necessary to 
   restore the focus outline for the <A>.
 */  
 a.container-close[role=button]:focus {
   outline: dotted 1px #000;
 }
 /*
   Necessary to explicitly set the text-align property so the content of the Panels 
   is aligned properly when viewed inside the YUI Examples chrome.
 */
 #panel-2,
 #panel-3 {
   text-align: left;
 }

</style> <script type="text/javascript" src="yui_2.7.0b-assets/container-assets/containerariaplugin.js"></script>

</head> <body class=" yui-skin-sam">

Using the Container ARIA Plugin

The Container ARIA Plugin makes it easy to use the <a href="http://www.w3.org/TR/wai-aria/">WAI-ARIA Roles and States</a> with the Container family of controls. Using the ARIA plugin, Dialogs, Alerts and Tooltips created using the Container family are more interoperable with assistive technologies (AT), such as screen readers, making them more accessible to users with disabilities.

<a href="http://video.yahoo.ru/watch/3608783/9955344">Watch a screen cast of this example running in Firefox 3 with the NVDA screen reader</a>, to see immediately the benefits that ARIA provides, or <a href="http://www.nvda-project.org/wiki/Snapshots">download the latest development snapshot of NVDA</a> to test this example for yourself.

<script type="text/javascript"> 

 (function () {
 
   var Event = YAHOO.util.Event,
     Dom = YAHOO.util.Dom;

   Event.onDOMReady(function () {
     var oPanel1 = new YAHOO.widget.Panel("panel-1", {
       
       visible: false,
       fixedcenter: true,
       constraintoviewport: true,
       width: "300px"
     
     });
     
     oPanel1.render();
     
     Event.on("show-dialog-1", "click", oPanel1.show, null, oPanel1);

     var oTooltip1 = new YAHOO.widget.Tooltip("tooltip-1", { 
       context:"show-dialog-1", 
       text:"Shows a Dialog built using Panel from existing markup.",
       iframe: true,
       showDelay:500 } );

     var oPanel2 = new YAHOO.widget.Dialog("panel-2", {
       
       modal: true,
       visible: false,
       fixedcenter: true,
       constraintoviewport: true,
       width: "300px",
       postmethod: "form"
     
     });  
     oPanel2.render(document.body);
     Event.on("show-dialog-2", "click", oPanel2.show, null, oPanel2);  

     var oTooltip2 = new YAHOO.widget.Tooltip("tooltip-2", { 
       context:"show-dialog-2", 
       text:"Shows a Modal Dialog built using Dialog from existing markup.",
       iframe: true,
       showDelay:500 } );

     var handleOK = function() {
       this.cancel();
     };
     
     var oPanel3 = new YAHOO.widget.SimpleDialog("panel-3", {
       
       modal: true,
       icon: YAHOO.widget.SimpleDialog.ICON_INFO,
       visible: false,
       fixedcenter: true,
       constraintoviewport: true,
       width: "300px",
       role: "alertdialog",
       buttons: [ { text:"OK", handler:handleOK, isDefault:true } ],
       text: "Your changes have been saved."
     
     });  
     oPanel3.setHeader("Info");
     oPanel3.render(document.body);
     var oTooltip3 = new YAHOO.widget.Tooltip("tooltip-3", { 
       context:"show-dialog-3", 
       text:"Shows a Modal Dialog built using SimpleDialog using the ARIA role of alertdialog.",
       iframe: true,
       showDelay:500 } );
     
     Event.on("show-dialog-3", "click", oPanel3.show, null, oPanel3);          
   });
 
 }());

</script> <button id="show-dialog-1">Show Dialog 1</button> <button id="show-dialog-2">Show Dialog 2</button> <button id="show-dialog-3">Show Dialog 3</button> <form name="panel-1-form" id="panel-1-form" method="post">

Personal Information
     <label for="panel-1-first-name" id="panel-1-first-name-label">First Name</label>
     <input type="text" id="panel-1-first-name" name="first-name">

     <label for="panel-1-last-name">Last Name</label>
     <input type="text" id="panel-1-last-name" name="last-name">

     <label for="panel-1-email">Email</label>
     <input type="text" id="panel-1-email" name="email">

     <input type="submit" id="panel-1-button-1" name="button-1" value="Submit">

</form>

Personal Information
   <form name="panel-2-form" id="panel-2-form" method="post">

       <label for="panel-2-first-name" id="panel-2-first-name-label">First Name</label>
       <input type="text" id="panel-2-first-name" name="first-name">

       <label for="panel-2-last-name">Last Name</label>
       <input type="text" id="panel-2-last-name" name="last-name">

       <label for="panel-2-email">Email</label>
       <input type="text" id="panel-2-email" name="email">

       <input type="submit" id="panel-2-button-1" name="button-1" value="Submit">

   </form>


</body> </html> 


 </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>


Using The Menu ARIA Plugin

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 

       "http://www.w3.org/TR/html4/strict.dtd">

<html> 

 <head>
   <title>Menu: Using The Menu ARIA Plugin</title>
       
       <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/reset/reset.css">
       <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts.css">



       <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/menu/assets/skins/sam/menu.css"> 
   
   <style type="text/css">
   
           /*
               Setting the "zoom" property to "1" triggers the "hasLayout" 
               property in IE.  This is necessary to fix a bug IE where 
               mousing mousing off a the text node of MenuItem instance"s 
               text label, or help text without the mouse actually exiting the
               boundaries of the MenuItem instance will result in the losing  
               the background color applied when it is selected.
           */
           
           #filemenu.visible .yuimenuitemlabel,
           #editmenu.visible .yuimenuitemlabel {
               *zoom: 1;
           }

     /*
       Remove "hasLayout" from the submenu of the file menu.      
     */
           #filemenu.visible .yuimenu .yuimenuitemlabel {
               *zoom: normal;
           }
     /*
       The Menu ARIA Plugin removes the "href" attribute from the <A> element of each 
       MenuItem if the value of the "href" is set to "#", resulting in the focus outline 
       no longer be rendered in Gecko-based browsers when the <A> element is focused.  
       For this reason, it is necessary to restore the focus outline for the <A>. 
     */
     a[role=menuitem]:focus {
       outline: dotted 1px #000;
     }
   
   </style>



       <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script>
       <script type="text/javascript" src="yui_2.7.0b-lib/container/container_core.js"></script>
       
       <script type="text/javascript" src="yui_2.7.0b-lib/menu/menu.js"></script>
   <script type="text/javascript" src="yui_2.7.0b-assets/container-assets/containerariaplugin.js"></script>
   <script type="text/javascript" src="yui_2.7.0b-assets/menu-assets/menuariaplugin.js"></script>
   <script type="text/javascript">
     (function () {
     
       var Event = YAHOO.util.Event,
         Dom = YAHOO.util.Dom,
         UA = YAHOO.env.ua,

         /*
            Define an array of object literals, each containing 
            the data necessary to create the items for a MenuBar.
         */
       
         aItemData = [
       
           { text: "File", submenu: {  id: "filemenu", itemdata: [
       
               { text: "New File", helptext: "Ctrl + N" },
               "New Folder",
               { text: "Open", helptext: "Ctrl + O" },
               { text: "Open With...", submenu: { id: "applications", itemdata: [
                   "Application 1", 
                   "Application 2", 
                   "Application 3", 
                   "Application 4"
                 ] } 
               },
               { text: "Print", helptext: "Ctrl + P" }
       
             ] }
           
           },
           
           { text: "Edit", submenu: { id: "editmenu", itemdata: [
       
               [ 
                 { text: "Undo", helptext: "Ctrl + Z" },
                 { text: "Redo", helptext: "Ctrl + Y" }
               ],
               
               [
                 { text: "Cut", helptext: "Ctrl + X" },
                 { text: "Copy", helptext: "Ctrl + C" },
                 { text: "Paste", helptext: "Ctrl + V" },
                 { text: "Delete", helptext: "Del" }
               ],
               
               [ { text: "Select All", helptext: "Ctrl + A" } ],
       
               [
                 { text: "Find", helptext: "Ctrl + F" },
                 { text: "Find Again", helptext: "Ctrl + G" }
               ]
           
             ] }
       
           }
       
         ];

       /*
          Initialize and render the MenuBar when the page"s DOM is ready 
          to be scripted.
       */
 
       Event.onDOMReady(function () {
 
         /*
           Instantiate a MenuBar:  The first argument passed to the constructor
           is the id for the Menu element to be created, the second is an 
           object literal of configuration properties.
         */
       
         var oMenuBar = new YAHOO.widget.MenuBar("mymenubar", { lazyload: true, itemdata: aItemData });
 
 
         /*
           Add a "show" event listener that keeps the left-most
           submenu against the left edge of the browser viewport.
         */
         
         function onSubmenuShow() {
         
           var oIFrame;
 
 
           if (this.id == "filemenu") {
             
             Dom.setX(this.element, 0);
 
             oIFrame = this.iframe;            
       
 
             if (oIFrame) {
         
               Dom.setX(oIFrame, 0);
         
             }
             
             this.cfg.setProperty("x", 0, true);
           
           }

           /*
             Need to set the width for submenus of submenus in IE to prevent the mouseout 
             event from firing prematurely when the user mouses off of a MenuItem"s 
             text node.
           */
 
           if ((this.id == "filemenu" || this.id == "editmenu") && YAHOO.env.ua.ie) {
 
             oElement = this.element;
             nOffsetWidth = oElement.offsetWidth;
         
             /*
               Measuring the difference of the offsetWidth before and after
               setting the "width" style attribute allows us to compute the 
               about of padding and borders applied to the element, which in 
               turn allows us to set the "width" property correctly.
             */
             
             oElement.style.width = nOffsetWidth + "px";
             oElement.style.width = (nOffsetWidth - (oElement.offsetWidth - nOffsetWidth)) + "px";
           
           }
         
         }
         
 
         // Subscribe to the "show" event for each submenu
         
         oMenuBar.subscribe("show", onSubmenuShow);
         
       
         /*
            Since this MenuBar instance is built completely from 
            script, call the "render" method passing in a node 
            reference for the DOM element that its should be 
            appended to.
         */
         
         oMenuBar.render(document.body);
         
       });
     
     }());
   
   </script>
 </head>
 <body class="yui-skin-sam"></body>

</html> 


 </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>


Using the TabView ARIA Plugin

   <source lang="html4strict">


<!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=utf-8">

<title>Using the TabView ARIA Plugin</title> <style type="text/css"> /*margin and padding on body element 

 can introduce errors in determining
 element position and are not recommended;
 we turn them off as a foundation for YUI
 CSS treatments. */

body { 

 margin:0;
 padding:0;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/tabview/assets/skins/sam/tabview.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/connection/connection-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/element/element-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/tabview/tabview-min.js"></script>


<style type="text/css"> 

 /*
   The TabView ARIA Plugin removes the "href" attribute from the <A> element of each 
   Tab, resulting in the focus outline no longer be rendered in Gecko-based browsers when the 
   <A> element is focused.  For this reason, it is necessary to restore the focus outline 
   for the <A>. 
 */
 .yui-skin-sam .yui-navset .yui-nav a[role=tab]:focus {
   outline: dotted 1px #000;
 }
 /*
   Hide the instructional text in the H1 and the content of the LiveRegion outside the 
   viewport boundaries so it is only readable by users of screen readers.
 */
 #tabview-title em,
 .yui-navset div[role=log] {
   position: absolute;
   left: -999em;
 }

</style> <script type="text/javascript" src="yui_2.7.0b-assets/tabview-assets/tabviewariaplugin.js"></script>

</head> <body class=" yui-skin-sam">

Using the TabView ARIA Plugin

The TabView ARIA Plugin makes it easy to use the <a href="http://www.w3.org/TR/wai-aria/">WAI-ARIA Roles and States</a> with the TabView control. Using the ARIA plugin, a TabView is more interoperable with assistive technologies (AT), such as screen readers, making it more accessible to users with disabilities.

<a href="http://video.yahoo.ru/watch/3199866/9051193">Watch a screen cast of this example running in Firefox 3 with the NVDA screen reader</a>, to see immediately the benefits that ARIA provides, or <a href="http://www.nvda-project.org/wiki/Snapshots">download the latest development snapshot of NVDA</a> to test this example for yourself.

Browser News

<script type="text/javascript"> (function() { 

 var Dom = YAHOO.util.Dom,
   UA = YAHOO.env.ua,
   oTitle,
   oTabViewEl,
   oLog,
   sInstructionalText;
   var oTabView = new YAHOO.widget.TabView();
   
   oTabView.addTab( new YAHOO.widget.Tab({
       label: "Opera",
       dataSrc: "yui_2.7.0b-assets/tabview-assets/news.php?query=opera+browser",
       cacheData: true,
       active: true
   }));
   oTabView.addTab( new YAHOO.widget.Tab({
       label: "Firefox",
       dataSrc: "yui_2.7.0b-assets/tabview-assets/news.php?query=firefox+browser",
       cacheData: true
   }));
   oTabView.addTab( new YAHOO.widget.Tab({
       label: "Explorer",
       dataSrc: "yui_2.7.0b-assets/tabview-assets/news.php?query=microsoft+explorer+browser",
       cacheData: true
   }));
   oTabView.addTab( new YAHOO.widget.Tab({
       label: "Safari",
       dataSrc: "yui_2.7.0b-assets/tabview-assets/news.php?query=apple+safari+browser",
       cacheData: true
   }));
   oTabView.appendTo("container");
   
 //  Make use of some additional ARIA Roles and States to further enhance the TabView if the 
 //  browser supports ARIA.
 
 if ((UA.gecko && UA.gecko >= 1.9) || (UA.ie && UA.ie >= 8)) {
   //  Use the "labelledby" attribute provided by the ARIA plugin for TabView to label the
// TabView with the

, and append some instructional text to the <H2> that tells users // of screen readers how to use TabView. This text will be read when the first Tab is // focused. Since this text is specifically for users of screen readers, it will be // hidden off screen via CSS. oTitle = Dom.get("tabview-title"); sInstructionalText = oTitle.innerHTML; oTitle.innerHTML = (sInstructionalText + "Press the space bar or enter key to load the content of each tab."); oTabView.set("labelledby", "tabview-title"); // Since the content of each Tab is loaded via XHR, append a Live Region to the TabView"s // root element that will be used to message users about the status of each Tab"s content. oTabViewEl = oTabView.get("element"); oLog = oTabViewEl.ownerDocument.createElement("div"); oLog.setAttribute("role", "log"); oLog.setAttribute("aria-live", "polite"); oTabViewEl.appendChild(oLog); // "activeTabChange" event handler used to notify the screen reader that // the content of the Tab is loading by updaing the content of the Live Region. oTabView.on("activeTabChange", function (event) { var oTabEl = this.get("activeTab").get("element"), sTabLabel = oTabEl.textContent || oTabEl.innerText, oCurrentMessage = Dom.getFirstChild(oLog), oMessage = oLog.ownerDocument.createElement("p"); oMessage.innerHTML = "Please wait. Content loading for " + sTabLabel + " property page."; if (oCurrentMessage) { oLog.replaceChild(oMessage, oCurrentMessage); } else { oLog.appendChild(oMessage); } }); // "dataLoadedChange" event handler used to notify the screen reader that // the content of the Tab has finished loading by updating the content of the Live Region. var onDataLoadedChange = function (event) { var oTabEl = this.get("element"), sTabLabel = oTabEl.textContent || oTabEl.innerText, oCurrentMessage = Dom.getFirstChild(oLog), oMessage = oLog.ownerDocument.createElement("p"); oMessage.innerHTML = "Content loaded for " + sTabLabel + " property page."; if (oCurrentMessage) { oLog.replaceChild(oMessage, oCurrentMessage); } else { oLog.appendChild(oMessage); } }; oTabView.getTab(0).on("dataLoadedChange", onDataLoadedChange); oTabView.getTab(1).on("dataLoadedChange", onDataLoadedChange); oTabView.getTab(2).on("dataLoadedChange", onDataLoadedChange); oTabView.getTab(3).on("dataLoadedChange", onDataLoadedChange); } })(); </script> </body> </html> </source> <A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>

Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/YUI_Library/ARIA&oldid=4035»