--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src/cm/media/js/lib/yui/yui3.0.0/examples/node-focusmanager/node-focusmanager-2.html Mon Nov 23 15:14:29 2009 +0100
@@ -0,0 +1,1216 @@
+
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+ <title>YUI Library Examples: Focus Manager Node Plugin: Accessible TabView</title>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8">
+ <link rel="stylesheet" type="text/css" href="../../assets/yui.css" >
+
+<style>
+ /*Supplemental CSS for the YUI distribution*/
+ #custom-doc { width: 95%; min-width: 950px; }
+ #pagetitle {background-image: url(../../assets/bg_hd.gif);}
+/* #pagetitle h1 {background-image: url(../../assets/title_h_bg.gif);}*/
+</style>
+
+<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
+<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
+<script type="text/javascript" src="../../build/yui/yui-min.js"></script>
+<style type="text/css">
+
+ /* The following style rules necessary to override style rules in the
+ YUI CSS file. */
+
+ #example ul,
+ #example li {
+ list-style: none;
+ list-style: none;
+ }
+
+ #example em {
+ font-style: normal;
+ }
+
+ #example .yui-tabpanel {
+
+ /* Use the "zoom" property to set the the hasLayout property to true.
+ This ensures that the background color of the tab's panel will
+ be rendered correctly when the example is running in the
+ example chrome.
+ */
+
+ _zoom: 1;
+
+ }
+
+ #example .yui-tabpanel a {
+ text-decoration: underline;
+ color: blue;
+ }
+
+ #example h3 {
+ color: #000;
+ font-size: 100%;
+ font-weight: bold;
+ }
+
+ #example .yui-tabview {
+ margin: 0 .25em;
+ }
+
+
+ /* Hide the instructional text used to label the tabview offscreen.
+ This ensures it is still available to users of screen readers, but is
+ not visible to sighted users. */
+
+ #tabview-heading em {
+ position: absolute;
+ left: -999em;
+ }
+
+
+ /* Hide the list while it is being transformed into a tabview. */
+
+ .yui-loading #tabview-1 {
+ display: none;
+ }
+
+</style>
+<script type="text/javascript">
+
+ // Add a class to the documentElement to prevent the user from seeing
+ // the unstyled tabview while the necessary CSS and JavaScript
+ // dependancies are being fetched.
+
+ document.documentElement.className = "yui-loading";
+
+</script>
+</head>
+<body id="yahoo-com" class=" yui-skin-sam">
+<div id="custom-doc" class="yui-t2">
+<div id="hd">
+ <div id="ygunav">
+ <p>
+ <em>
+ <a href="http://developer.yahoo.com/yui/3/">YUI 3.x Home</a> <i> - </i>
+ </em>
+ </p>
+ <form action="http://search.yahoo.com/search" id="sitesearchform">
+ <input name="vs" type="hidden" value="developer.yahoo.com">
+ <input name="vs" type="hidden" value="yuiblog.com">
+ <div id="sitesearch">
+ <label for="searchinput">Site Search (YDN & YUIBlog): </label>
+ <input type="text" id="searchinput" name="p">
+ <input type="submit" value="Search" id="searchsubmit" class="ygbt">
+ </div>
+ </form>
+ </div>
+ <div id="ygma"><a href="../../"><img src="../../assets/logo.gif" border="0" width="200" height="93"></a></div>
+ <div id="pagetitle"><h1>YUI Library Examples: Focus Manager Node Plugin: Accessible TabView</h1></div>
+</div>
+<div id="bd">
+
+
+ <div id="yui-main">
+ <div class="yui-b">
+ <div class="yui-ge">
+ <div class="yui-u first example" id="main">
+
+ <h2>Focus Manager Node Plugin: Accessible TabView</h2>
+
+ <div id="example" class="promo">
+ <div class="example-intro">
+ <p>
+This example illustrates how to create an accessible tabview widget using the
+Focus Manager Node Plugin,
+<a href="../../api/YUI.html#event_delegate">Event's delegation support</a>, and
+Node's support for the
+<a href="http://www.w3.org/TR/wai-aria/">WAI-ARIA Roles and States</a>.
+</p> </div>
+
+ <div class="module example-container ">
+ <div class="hd exampleHd">
+ <p class="newWindowButton yui-skin-sam">
+ <a href="node-focusmanager-2_clean.html" target="_blank">View example in new window.</a>
+ </p>
+ </div> <div id="example-canvas" class="bd">
+
+
+ <!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
+
+ <h3 id="tabview-heading">Today's News</h3>
+<div id="tabview-1">
+ <ul>
+ <li class="yui-tab yui-tab-selected"><a href="#top-stories"><em>Top Stories</em></a></li>
+ <li class="yui-tab"><a href="#world-news"><em>World</em></a></li>
+ <li class="yui-tab"><a href="#entertainment-news"><em>Entertainment</em></a></li>
+ <li class="yui-tab"><a href="#sports-news"><em>Sports</em></a></li>
+ <li class="yui-tab"><a href="#technology-news"><em>Technology</em></a></li>
+ </ul>
+ <div>
+ <div class="yui-tabpanel yui-tabpanel-selected" id="top-stories">
+ <h3>Top Stories</h3>
+ <ul> <li>
+ <a href="http://us.rd.yahoo.com/dailynews/rss/topstories/*http://news.yahoo.com/s/ap/20090929/ap_on_go_co/us_health_care_overhaul"><q>Senate Finance panel rejects govt insurance option
+ (AP)
+</q></a>
+ </li> <li>
+ <a href="http://us.rd.yahoo.com/dailynews/rss/topstories/*http://news.yahoo.com/s/ap/20090929/ap_on_re_us/us_nyc_terror"><q>NYC terror suspect pleads not guilty, kept in jail
+ (AP)
+</q></a>
+ </li> <li>
+ <a href="http://us.rd.yahoo.com/dailynews/rss/topstories/*http://news.yahoo.com/s/ap/20090929/ap_on_re_mi_ea/ml_iran"><q>Iran put nuclear site near base in case of attack
+ (AP)
+</q></a>
+ </li> <li>
+ <a href="http://us.rd.yahoo.com/dailynews/rss/topstories/*http://news.yahoo.com/s/ap/20090929/ap_on_re_as/as_afghanistan"><q>Taliban roadway attacks spread fear in Afghanistan
+ (AP)
+</q></a>
+ </li> <li>
+ <a href="http://us.rd.yahoo.com/dailynews/rss/topstories/*http://news.yahoo.com/s/ap/20090929/ap_on_re_us/us_schools_listening_tour"><q>Sharpton, Gingrich launch school tour in Philly
+ (AP)
+</q></a>
+ </li> <li>
+ <a href="http://us.rd.yahoo.com/dailynews/rss/topstories/*http://news.yahoo.com/s/ap/20090929/ap_on_re_us/us_hitler_s_skull"><q>Skull piece thought to be Hitler's is from woman
+ (AP)
+</q></a>
+ </li> <li>
+ <a href="http://us.rd.yahoo.com/dailynews/rss/topstories/*http://news.yahoo.com/s/ap/20090929/ap_on_sc/eu_italy_nero_s_dining_room"><q>Nero's rotating banquet hall unveiled in Rome
+ (AP)
+</q></a>
+ </li> <li>
+ <a href="http://us.rd.yahoo.com/dailynews/rss/topstories/*http://news.yahoo.com/s/ap/20090929/ap_on_en_tv/us_tv_jon___kate_changes"><q>TLC's 'Jon & Kate' is soon to be 'Kate Plus Eight'
+ (AP)
+</q></a>
+ </li> <li>
+ <a href="http://us.rd.yahoo.com/dailynews/rss/topstories/*http://news.yahoo.com/s/ap/20090929/ap_on_fe_st/us_odd_skate_rage"><q>Cops: Skater faces charges in right-of-way dispute
+ (AP)
+</q></a>
+ </li> <li>
+ <a href="http://us.rd.yahoo.com/dailynews/rss/topstories/*http://news.yahoo.com/s/ap/20090929/ap_on_sp_ba_ga_su/bba_twins_tigers"><q>AL Central race gets wild, Twins beat Tigers in 10
+ (AP)
+</q></a>
+ </li></ul>
+ </div>
+ <div class="yui-tabpanel" id="world-news">
+ <h3>World News</h3>
+ <ul> <li>
+ <a href="http://us.rd.yahoo.com/dailynews/rss/world/*http://news.yahoo.com/s/ap/20090929/ap_on_re_mi_ea/ml_iran"><q>Iran put nuclear site near base in case of attack
+ (AP)
+</q></a>
+ </li> <li>
+ <a href="http://us.rd.yahoo.com/dailynews/rss/world/*http://news.yahoo.com/s/ap/20090929/ap_on_re_as/as_afghanistan"><q>Taliban roadway attacks spread fear in Afghanistan
+ (AP)
+</q></a>
+ </li> <li>
+ <a href="http://us.rd.yahoo.com/dailynews/rss/world/*http://news.yahoo.com/s/ap/20090929/ap_on_en_mo/eu_switzerland_polanski"><q>Polanski asks Swiss court to free him from custody
+ (AP)
+</q></a>
+ </li> <li>
+ <a href="http://us.rd.yahoo.com/dailynews/rss/world/*http://news.yahoo.com/s/ap/20090929/ap_on_re_as/as_philippines_flooding"><q>Flood kills 246 in Philippines; survivors seek aid
+ (AP)
+</q></a>
+ </li> <li>
+ <a href="http://us.rd.yahoo.com/dailynews/rss/world/*http://news.yahoo.com/s/ap/20090929/ap_on_re_au_an/as_pacific_earthquake"><q>Tsunami hits American Samoa
+ (AP)
+</q></a>
+ </li> <li>
+ <a href="http://us.rd.yahoo.com/dailynews/rss/world/*http://news.yahoo.com/s/time/20090929/wl_time/08599192665500"><q>Iran Sanctions: Would Blocking Gas Imports Hurt Tehran?
+ (Time.com)
+</q></a>
+ </li> <li>
+ <a href="http://us.rd.yahoo.com/dailynews/rss/world/*http://news.yahoo.com/s/afp/20090929/bs_afp/britainusirelandairlinecompanyba"><q>BA launches US business-class route
+ (AFP)
+</q></a>
+ </li> <li>
+ <a href="http://us.rd.yahoo.com/dailynews/rss/world/*http://news.yahoo.com/s/ap/20090929/ap_on_re_mi_ea/ml_israel_palestinians"><q>Israeli envoys to US for talks on peacemaking
+ (AP)
+</q></a>
+ </li> <li>
+ <a href="http://us.rd.yahoo.com/dailynews/rss/world/*http://news.yahoo.com/s/ap/20090929/ap_on_re_la_am_ca/us_americas_conference"><q>Arias warns Honduran elections won't be recognized
+ (AP)
+</q></a>
+ </li> <li>
+ <a href="http://us.rd.yahoo.com/dailynews/rss/world/*http://news.yahoo.com/s/ap/20090929/ap_on_re_af/af_guinea"><q>Group: Guinea protest death toll climbs to 157
+ (AP)
+</q></a>
+ </li></ul> </div>
+ <div class="yui-tabpanel" id="entertainment-news">
+ <h3>Entertainment News</h3>
+ <ul> <li>
+ <a href="http://us.rd.yahoo.com/dailynews/rss/entertainment/*http://news.yahoo.com/s/ap/20090929/ap_en_ce/eu_switzerland_polanski"><q>Polanski asks Swiss court to free him from custody
+ (AP)
+</q></a>
+ </li> <li>
+ <a href="http://us.rd.yahoo.com/dailynews/rss/entertainment/*http://news.yahoo.com/s/ap/20090929/ap_en_ot/us_dj_am"><q>DJ AM's death ruled accidental drug overdose
+ (AP)
+</q></a>
+ </li> <li>
+ <a href="http://us.rd.yahoo.com/dailynews/rss/entertainment/*http://news.yahoo.com/s/ap/20090929/ap_en_mu/us_levine_surgery"><q>Conductor Levine withdrawing from upcoming shows
+ (AP)
+</q></a>
+ </li> <li>
+ <a href="http://us.rd.yahoo.com/dailynews/rss/entertainment/*http://news.yahoo.com/s/ap/20090929/ap_en_ot/us_twilight_zone_at50"><q>50 years later, 'Twilight Zone' bridges time
+ (AP)
+</q></a>
+ </li> <li>
+ <a href="http://us.rd.yahoo.com/dailynews/rss/entertainment/*http://news.yahoo.com/s/ap/20090929/ap_en_tv/us_tv_jon___kate_changes"><q>TLC's 'Jon & Kate' is soon to be 'Kate Plus Eight'
+ (AP)
+</q></a>
+ </li> <li>
+ <a href="http://us.rd.yahoo.com/dailynews/rss/entertainment/*http://news.yahoo.com/s/ap/20090929/ap_en_ot/us_music_barbra_streisand"><q>Barbra Streisand gets nostalgic on latest CD
+ (AP)
+</q></a>
+ </li> <li>
+ <a href="http://us.rd.yahoo.com/dailynews/rss/entertainment/*http://news.yahoo.com/s/nm/20090929/tv_nm/us_rather_cbs"><q>Appeals court dismisses Dan Rather's suit vs. CBS
+ (Reuters)
+</q></a>
+ </li> <li>
+ <a href="http://us.rd.yahoo.com/dailynews/rss/entertainment/*http://news.yahoo.com/s/nm/20090929/film_nm/us_sweden_icescreen"><q>Stockholm marks film festival with giant ice screen
+ (Reuters)
+</q></a>
+ </li> <li>
+ <a href="http://us.rd.yahoo.com/dailynews/rss/entertainment/*http://news.yahoo.com/s/ap/20090929/ap_en_mu/us_lennon_film_fight"><q>Video company asks for $6.3M in Lennon film case
+ (AP)
+</q></a>
+ </li> <li>
+ <a href="http://us.rd.yahoo.com/dailynews/rss/entertainment/*http://news.yahoo.com/s/nm/20090929/media_nm/us_businessweek"><q>Bloomberg seen as top BusinessWeek bidder: source
+ (Reuters)
+</q></a>
+ </li></ul>
+ </div>
+ <div class="yui-tabpanel" id="sports-news">
+ <h3>Sports News</h3>
+ <ul> <li>
+ <a href="http://us.rd.yahoo.com/dailynews/rss/sports/*http://news.yahoo.com/s/ap/20090929/ap_on_sp_ba_ga_su/bba_twins_tigers"><q>AL Central race gets wild, Twins beat Tigers in 10
+ (AP)
+</q></a>
+ </li> <li>
+ <a href="http://us.rd.yahoo.com/dailynews/rss/sports/*http://news.yahoo.com/s/ap/20090929/ap_on_sp_fo_ne/fbn_chiefs_dolphins_trade"><q>With Pennington out, Dolphins get Thigpen
+ (AP)
+</q></a>
+ </li> <li>
+ <a href="http://us.rd.yahoo.com/dailynews/rss/sports/*http://news.yahoo.com/s/ap/20090929/ap_on_sp_co_ne/fbc_t25_usc_johnson_hurt"><q>Johnson giving thumbs-up to mom after surgery
+ (AP)
+</q></a>
+ </li> <li>
+ <a href="http://us.rd.yahoo.com/dailynews/rss/sports/*http://news.yahoo.com/s/ap/20090929/ap_on_sp_ol/oly2016_bids_rio"><q>Rio puts President Lula at heart of Olympic bid
+ (AP)
+</q></a>
+ </li> <li>
+ <a href="http://us.rd.yahoo.com/dailynews/rss/sports/*http://news.yahoo.com/s/ap/20090929/ap_on_sp_ho_ne/hkn_penguins_crosby"><q>Crosby practices, expects to play Friday
+ (AP)
+</q></a>
+ </li> <li>
+ <a href="http://us.rd.yahoo.com/dailynews/rss/sports/*http://news.yahoo.com/s/ap/20090929/ap_on_sp_go_ne/glf_palmer_medal"><q>Palmer to receive Congressional Gold Medal
+ (AP)
+</q></a>
+ </li> <li>
+ <a href="http://us.rd.yahoo.com/dailynews/rss/sports/*http://news.yahoo.com/s/nm/20090929/sp_nm/us_nfl_dolphins_thigpen"><q>Dolphins acquire Thigpen from Chiefs
+ (Reuters)
+</q></a>
+ </li> <li>
+ <a href="http://us.rd.yahoo.com/dailynews/rss/sports/*http://news.yahoo.com/s/ap/20090929/ap_on_sp_ba_ne/bbo_schmidt_peanut_butter_and_jelly"><q>Hall of Famer Mike Schmidt on 200 Ks
+ (AP)
+</q></a>
+ </li> <li>
+ <a href="http://us.rd.yahoo.com/dailynews/rss/sports/*http://news.yahoo.com/s/afp/20090929/sp_afp/basketnbarockets"><q>NBA Rockets open pre-season without Yao, McGrady
+ (AFP)
+</q></a>
+ </li> <li>
+ <a href="http://us.rd.yahoo.com/dailynews/rss/sports/*http://news.yahoo.com/s/ap/20090929/ap_on_sp_co_ne/fbc_wyoming_coach_ill"><q>Wyoming coach laid up with kidney stone
+ (AP)
+</q></a>
+ </li></ul>
+ </div>
+ <div class="yui-tabpanel" id="technology-news">
+ <h3>Technology News</h3>
+ <ul> <li>
+ <a href="http://us.rd.yahoo.com/dailynews/rss/tech/*http://news.yahoo.com/s/ap/20090929/ap_on_hi_te/us_warner_music_group_youtube"><q>YouTube says Warner Music videos back in months
+ (AP)
+</q></a>
+ </li> <li>
+ <a href="http://us.rd.yahoo.com/dailynews/rss/tech/*http://news.yahoo.com/s/ap/20090929/ap_on_hi_te/us_tec_techbit_t_mobile_motorola"><q>T-Mobile to sell Motorola Android phone Oct. 19
+ (AP)
+</q></a>
+ </li> <li>
+ <a href="http://us.rd.yahoo.com/dailynews/rss/tech/*http://news.yahoo.com/s/ap/20090929/ap_on_hi_te/us_gm_ebay"><q>GM's trial program selling cars on eBay set to end
+ (AP)
+</q></a>
+ </li> <li>
+ <a href="http://us.rd.yahoo.com/dailynews/rss/tech/*http://news.yahoo.com/s/ap/20090929/ap_on_hi_te/us_tec_cnn_iphone_app"><q>Among the new features in CNN iPhone app: a price
+ (AP)
+</q></a>
+ </li> <li>
+ <a href="http://us.rd.yahoo.com/dailynews/rss/tech/*http://news.yahoo.com/s/ap/20090929/ap_on_hi_te/us_tec_microsoft_security_software"><q>Microsoft to release free antivirus PC software
+ (AP)
+</q></a>
+ </li> <li>
+ <a href="http://us.rd.yahoo.com/dailynews/rss/tech/*http://news.yahoo.com/s/ap/20090929/ap_on_hi_te/us_diebold_voting_machines"><q>Voter group challenges Diebold voting machine sale
+ (AP)
+</q></a>
+ </li> <li>
+ <a href="http://us.rd.yahoo.com/dailynews/rss/tech/*http://news.yahoo.com/s/afp/20090929/tc_afp/usitcompanyinternetmusicyoutubewarner"><q>Warner music videos returning to YouTube
+ (AFP)
+</q></a>
+ </li> <li>
+ <a href="http://us.rd.yahoo.com/dailynews/rss/tech/*http://news.yahoo.com/s/nf/20090929/tc_nf/69236"><q>Garmin Rolls Out Navigation Smartphone on AT&T
+ (NewsFactor)
+</q></a>
+ </li> <li>
+ <a href="http://us.rd.yahoo.com/dailynews/rss/tech/*http://news.yahoo.com/s/nm/20090929/wr_nm/us_vodafone_egypt"><q>Vodafone Egypt sees 160,000 broadband users in 2009
+ (Reuters)
+</q></a>
+ </li> <li>
+ <a href="http://us.rd.yahoo.com/dailynews/rss/tech/*http://news.yahoo.com/s/nm/20090929/en_nm/us_warnermusic_youtube"><q>Warner, YouTube confirm music video deal
+ (Reuters)
+</q></a>
+ </li></ul>
+ </div>
+ </div>
+</div>
+
+<script type="text/javascript">
+
+ YUI({
+
+ base: "../../build/",
+ modules: {
+ "tabviewcss": {
+ type: "css",
+ fullpath: "assets/tabview.css"
+ },
+ "tabviewjs": {
+ type: "js",
+ fullpath: "assets/tabview.js",
+ requires: ["node-focusmanager", "tabviewcss"]
+ }
+
+ },
+ timeout: 10000
+
+ }).use("tabviewjs", function(Y, result) {
+
+ // The callback supplied to use() will be executed regardless of
+ // whether the operation was successful or not. The second parameter
+ // is a result object that has the status of the operation. We can
+ // use this to try to recover from failures or timeouts.
+
+ if (!result.success) {
+
+ Y.log("Load failure: " + result.msg, "warn", "Example");
+
+ // Show the tabview HTML if the loader failed that way the
+ // original unskinned tabview will be visible so that the
+ // user can interact with it either way.
+
+ document.documentElement.className = "";
+
+ }
+
+ });
+
+</script>
+ <!--END SOURCE CODE FOR EXAMPLE =============================== -->
+
+
+ </div>
+ </div>
+ </div>
+
+ <h3>Setting Up the HTML</h3>
+<p>
+The tabs in the tabview widget will be represented by a list of
+<code><a></code> elements whose <code>href</code> attribute is set to
+the id of an <code><div></code> element that contains its content.
+Therefore, without JavaScript and CSS, the tabs function as in-page links.
+</p>
+<div id="syntax1" class="yui-syntax-highlight"><div class="numbers"><pre class="html4strict" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="sc2"><<span class="kw2">h3</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"tabview-heading"</span>></span>Today's News<span class="sc2"><<span class="sy0">/</span><span class="kw2">h3</span>></span></div></li><li class="li1"><div class="de1"><span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"tabview-1"</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">ul</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">li</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-tab yui-tab-selected"</span>><<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">"#top-stories"</span>><<span class="kw2">em</span>></span>Top Stories<span class="sc2"><<span class="sy0">/</span><span class="kw2">em</span>><<span class="sy0">/</span><span class="kw2">a</span>><<span class="sy0">/</span><span class="kw2">li</span>></span></div></li><li class="li2"><div class="de2"> <span class="sc2"><<span class="kw2">li</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-tab"</span>><<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">"#world-news"</span>><<span class="kw2">em</span>></span>World<span class="sc2"><<span class="sy0">/</span><span class="kw2">em</span>><<span class="sy0">/</span><span class="kw2">a</span>><<span class="sy0">/</span><span class="kw2">li</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">li</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-tab"</span>><<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">"#entertainment-news"</span>><<span class="kw2">em</span>></span>Entertainment<span class="sc2"><<span class="sy0">/</span><span class="kw2">em</span>><<span class="sy0">/</span><span class="kw2">a</span>><<span class="sy0">/</span><span class="kw2">li</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">li</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-tab"</span>><<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">"#sports-news"</span>><<span class="kw2">em</span>></span>Sports<span class="sc2"><<span class="sy0">/</span><span class="kw2">em</span>><<span class="sy0">/</span><span class="kw2">a</span>><<span class="sy0">/</span><span class="kw2">li</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">li</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-tab"</span>><<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">"#technology-news"</span>><<span class="kw2">em</span>></span>Technology<span class="sc2"><<span class="sy0">/</span><span class="kw2">em</span>><<span class="sy0">/</span><span class="kw2">a</span>><<span class="sy0">/</span><span class="kw2">li</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="sy0">/</span><span class="kw2">ul</span>></span></div></li><li class="li2"><div class="de2"> <span class="sc2"><<span class="kw2">div</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-tabpanel yui-tabpanel-selected"</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"top-stories"</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc-1"><!-- Tab Panel Content Here --></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-tabpanel"</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"world-news"</span>></span></div></li><li class="li2"><div class="de2"> <span class="sc-1"><!-- Tab Panel Content Here --></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-tabpanel"</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"entertainment-news"</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc-1"><!-- Tab Panel Content Here --></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span></div></li><li class="li2"><div class="de2"> <span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-tabpanel"</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"sports-news"</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc-1"><!-- Tab Panel Content Here --></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-tabpanel"</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"technology-news"</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc-1"><!-- Tab Panel Content Here --></span></div></li><li class="li2"><div class="de2"> <span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span></div></li><li class="li1"><div class="de1"><span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span></div></li></ol></pre></div><div class="nonumbers"><pre class="html4strict" style="font-family:monospace;"><span class="sc2"><<span class="kw2">h3</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"tabview-heading"</span>></span>Today's News<span class="sc2"><<span class="sy0">/</span><span class="kw2">h3</span>></span>
+<span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"tabview-1"</span>></span>
+ <span class="sc2"><<span class="kw2">ul</span>></span>
+ <span class="sc2"><<span class="kw2">li</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-tab yui-tab-selected"</span>><<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">"#top-stories"</span>><<span class="kw2">em</span>></span>Top Stories<span class="sc2"><<span class="sy0">/</span><span class="kw2">em</span>><<span class="sy0">/</span><span class="kw2">a</span>><<span class="sy0">/</span><span class="kw2">li</span>></span>
+ <span class="sc2"><<span class="kw2">li</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-tab"</span>><<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">"#world-news"</span>><<span class="kw2">em</span>></span>World<span class="sc2"><<span class="sy0">/</span><span class="kw2">em</span>><<span class="sy0">/</span><span class="kw2">a</span>><<span class="sy0">/</span><span class="kw2">li</span>></span>
+ <span class="sc2"><<span class="kw2">li</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-tab"</span>><<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">"#entertainment-news"</span>><<span class="kw2">em</span>></span>Entertainment<span class="sc2"><<span class="sy0">/</span><span class="kw2">em</span>><<span class="sy0">/</span><span class="kw2">a</span>><<span class="sy0">/</span><span class="kw2">li</span>></span>
+ <span class="sc2"><<span class="kw2">li</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-tab"</span>><<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">"#sports-news"</span>><<span class="kw2">em</span>></span>Sports<span class="sc2"><<span class="sy0">/</span><span class="kw2">em</span>><<span class="sy0">/</span><span class="kw2">a</span>><<span class="sy0">/</span><span class="kw2">li</span>></span>
+ <span class="sc2"><<span class="kw2">li</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-tab"</span>><<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">"#technology-news"</span>><<span class="kw2">em</span>></span>Technology<span class="sc2"><<span class="sy0">/</span><span class="kw2">em</span>><<span class="sy0">/</span><span class="kw2">a</span>><<span class="sy0">/</span><span class="kw2">li</span>></span>
+ <span class="sc2"><<span class="sy0">/</span><span class="kw2">ul</span>></span>
+ <span class="sc2"><<span class="kw2">div</span>></span>
+ <span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-tabpanel yui-tabpanel-selected"</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"top-stories"</span>></span>
+ <span class="sc-1"><!-- Tab Panel Content Here --></span>
+ <span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span>
+ <span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-tabpanel"</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"world-news"</span>></span>
+ <span class="sc-1"><!-- Tab Panel Content Here --></span>
+ <span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span>
+ <span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-tabpanel"</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"entertainment-news"</span>></span>
+ <span class="sc-1"><!-- Tab Panel Content Here --></span>
+ <span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span>
+ <span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-tabpanel"</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"sports-news"</span>></span>
+ <span class="sc-1"><!-- Tab Panel Content Here --></span>
+ <span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span>
+ <span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-tabpanel"</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"technology-news"</span>></span>
+ <span class="sc-1"><!-- Tab Panel Content Here --></span>
+ <span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span>
+ <span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span>
+<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span></pre></div><textarea id="syntax1-plain"><h3 id="tabview-heading">Today's News</h3>
+<div id="tabview-1">
+ <ul>
+ <li class="yui-tab yui-tab-selected"><a href="#top-stories"><em>Top Stories</em></a></li>
+ <li class="yui-tab"><a href="#world-news"><em>World</em></a></li>
+ <li class="yui-tab"><a href="#entertainment-news"><em>Entertainment</em></a></li>
+ <li class="yui-tab"><a href="#sports-news"><em>Sports</em></a></li>
+ <li class="yui-tab"><a href="#technology-news"><em>Technology</em></a></li>
+ </ul>
+ <div>
+ <div class="yui-tabpanel yui-tabpanel-selected" id="top-stories">
+ <!-- Tab Panel Content Here -->
+ </div>
+ <div class="yui-tabpanel" id="world-news">
+ <!-- Tab Panel Content Here -->
+ </div>
+ <div class="yui-tabpanel" id="entertainment-news">
+ <!-- Tab Panel Content Here -->
+ </div>
+ <div class="yui-tabpanel" id="sports-news">
+ <!-- Tab Panel Content Here -->
+ </div>
+ <div class="yui-tabpanel" id="technology-news">
+ <!-- Tab Panel Content Here -->
+ </div>
+ </div>
+</div></textarea></div><p>
+For this example the content of each tab panel is created on the server using
+the <a href="http://developer.yahoo.com/yql/">YQL</a> API to fetch the title and
+URL for news stories made available from the various
+<a href="http://news.yahoo.com/rss" title="Yahoo! News - RSS">Yahoo! News RSS feeds</a>.
+Here's the PHP:
+</p>
+<style>
+/**
+ * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann
+ * (http://qbnz.com/highlighter/ and http://geshi.org/)
+ */
+.php {font-family:monospace;}
+.php .imp {font-weight: bold; color: red;}
+.php .kw1 {color: #b1b100;}
+.php .kw2 {color: #000000; font-weight: bold;}
+.php .kw3 {color: #990000;}
+.php .co1 {color: #666666; font-style: italic;}
+.php .co2 {color: #666666; font-style: italic;}
+.php .co3 {color: #0000cc; font-style: italic;}
+.php .co4 {color: #009933; font-style: italic;}
+.php .coMULTI {color: #666666; font-style: italic;}
+.php .es0 {color: #000099; font-weight: bold;}
+.php .es1 {color: #000099; font-weight: bold;}
+.php .es2 {color: #660099; font-weight: bold;}
+.php .es3 {color: #660099; font-weight: bold;}
+.php .es4 {color: #006699; font-weight: bold;}
+.php .es5 {color: #006699; font-weight: bold; font-style: italic;}
+.php .es6 {color: #009933; font-weight: bold;}
+.php .es_h {color: #000099; font-weight: bold;}
+.php .br0 {color: #009900;}
+.php .sy0 {color: #339933;}
+.php .sy1 {color: #000000; font-weight: bold;}
+.php .st0 {color: #0000ff;}
+.php .st_h {color: #0000ff;}
+.php .nu0 {color: #cc66cc;}
+.php .nu8 {color: #208080;}
+.php .nu12 {color: #208080;}
+.php .nu19 {color:#800080;}
+.php .me1 {color: #004000;}
+.php .me2 {color: #004000;}
+.php .re0 {color: #000088;}
+.php span.xtra { display:block; }
+
+</style>
+<div id="syntax2" class="yui-syntax-highlight"><div class="numbers"><pre class="php" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="kw2">function</span> getFeed<span class="br0">(</span><span class="re0">$sFeed</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="re0">$params</span> <span class="sy0">=</span> <span class="kw3">array</span><span class="br0">(</span></div></li><li class="li1"><div class="de1"> <span class="st0">"q"</span> <span class="sy0">=></span> <span class="br0">(</span><span class="st_h">'select title,link from rss where url="http://rss.news.yahoo.com/rss/$sFeed"'</span><span class="br0">)</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2"> <span class="st0">"format"</span> <span class="sy0">=></span> <span class="st0">"json"</span></div></li><li class="li1"><div class="de1"> <span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="re0">$encoded_params</span> <span class="sy0">=</span> <span class="kw3">array</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> <span class="kw1">foreach</span> <span class="br0">(</span><span class="re0">$params</span> <span class="kw1">as</span> <span class="re0">$k</span> <span class="sy0">=></span> <span class="re0">$v</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="re0">$encoded_params</span><span class="br0">[</span><span class="br0">]</span> <span class="sy0">=</span> <span class="kw3">urlencode</span><span class="br0">(</span><span class="re0">$k</span><span class="br0">)</span><span class="sy0">.</span><span class="st0">"="</span><span class="sy0">.</span><span class="kw3">urlencode</span><span class="br0">(</span><span class="re0">$v</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="re0">$url</span> <span class="sy0">=</span> <span class="st0">"http://query.yahooapis.com/v1/public/yql?"</span><span class="sy0">.</span><span class="kw3">implode</span><span class="br0">(</span><span class="st0">"&"</span><span class="sy0">,</span> <span class="re0">$encoded_params</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> <span class="re0">$ch</span> <span class="sy0">=</span> curl_init<span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> curl_setopt<span class="br0">(</span><span class="re0">$ch</span><span class="sy0">,</span> CURLOPT_URL<span class="sy0">,</span> <span class="re0">$url</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> curl_setopt<span class="br0">(</span><span class="re0">$ch</span><span class="sy0">,</span> CURLOPT_RETURNTRANSFER<span class="sy0">,</span> <span class="nu0">1</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="re0">$rsp</span> <span class="sy0">=</span> curl_exec<span class="br0">(</span><span class="re0">$ch</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> curl_close<span class="br0">(</span><span class="re0">$ch</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span><span class="re0">$rsp</span> <span class="sy0">!==</span> <span class="kw2">false</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="re0">$rsp_obj</span> <span class="sy0">=</span> json_decode<span class="br0">(</span><span class="re0">$rsp</span><span class="sy0">,</span> <span class="kw2">true</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> <span class="re0">$results</span> <span class="sy0">=</span> <span class="re0">$rsp_obj</span><span class="br0">[</span><span class="st0">"query"</span><span class="br0">]</span><span class="br0">[</span><span class="st0">"results"</span><span class="br0">]</span><span class="br0">[</span><span class="st0">"item"</span><span class="br0">]</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="re0">$list</span> <span class="sy0">=</span> <span class="st0">""</span><span class="sy0">;</span> <span class="co1">// HTML output</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> <span class="re0">$nResults</span> <span class="sy0">=</span> <span class="kw3">count</span><span class="br0">(</span><span class="re0">$results</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span><span class="re0">$nResults</span> <span class="sy0">></span> <span class="nu0">10</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="re0">$nResults</span> <span class="sy0">=</span> <span class="nu0">9</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> <span class="kw1">for</span> <span class="br0">(</span><span class="re0">$i</span> <span class="sy0">=</span> <span class="nu0">0</span><span class="sy0">;</span> <span class="re0">$i</span><span class="sy0"><=</span> <span class="re0">$nResults</span><span class="sy0">;</span> <span class="re0">$i</span><span class="sy0">++</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="re0">$result</span> <span class="sy0">=</span> <span class="re0">$results</span><span class="br0">[</span><span class="re0">$i</span><span class="br0">]</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> <span class="re0">$list</span><span class="sy0">.=</span> <span class="co3"><<< END_OF_HTML</span></div></li><li class="li1"><div class="de1"><span class="co3"> <li></span></div></li><li class="li1"><div class="de1"><span class="co3"> <a href="${result["link"]}"><q>${result["title"]}</q></a></span></div></li><li class="li1"><div class="de1"><span class="co3"> </li></span></div></li><li class="li1"><div class="de1"><span class="co3">END</span>_OF_HTML<span class="sy0">;</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw1">return</span> <span class="br0">(</span><span class="st0">"<ul>"</span> <span class="sy0">.</span> <span class="re0">$list</span> <span class="sy0">.</span> <span class="st0">"</ul>"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li><li class="li1"><div class="de1"> </div></li></ol></pre></div><div class="nonumbers"><pre class="php" style="font-family:monospace;"><span class="kw2">function</span> getFeed<span class="br0">(</span><span class="re0">$sFeed</span><span class="br0">)</span> <span class="br0">{</span>
+
+ <span class="re0">$params</span> <span class="sy0">=</span> <span class="kw3">array</span><span class="br0">(</span>
+ <span class="st0">"q"</span> <span class="sy0">=></span> <span class="br0">(</span><span class="st_h">'select title,link from rss where url="http://rss.news.yahoo.com/rss/$sFeed"'</span><span class="br0">)</span><span class="sy0">,</span>
+ <span class="st0">"format"</span> <span class="sy0">=></span> <span class="st0">"json"</span>
+ <span class="br0">)</span><span class="sy0">;</span>
+
+ <span class="re0">$encoded_params</span> <span class="sy0">=</span> <span class="kw3">array</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span>
+
+ <span class="kw1">foreach</span> <span class="br0">(</span><span class="re0">$params</span> <span class="kw1">as</span> <span class="re0">$k</span> <span class="sy0">=></span> <span class="re0">$v</span><span class="br0">)</span> <span class="br0">{</span>
+ <span class="re0">$encoded_params</span><span class="br0">[</span><span class="br0">]</span> <span class="sy0">=</span> <span class="kw3">urlencode</span><span class="br0">(</span><span class="re0">$k</span><span class="br0">)</span><span class="sy0">.</span><span class="st0">"="</span><span class="sy0">.</span><span class="kw3">urlencode</span><span class="br0">(</span><span class="re0">$v</span><span class="br0">)</span><span class="sy0">;</span>
+ <span class="br0">}</span>
+
+ <span class="re0">$url</span> <span class="sy0">=</span> <span class="st0">"http://query.yahooapis.com/v1/public/yql?"</span><span class="sy0">.</span><span class="kw3">implode</span><span class="br0">(</span><span class="st0">"&"</span><span class="sy0">,</span> <span class="re0">$encoded_params</span><span class="br0">)</span><span class="sy0">;</span>
+
+ <span class="re0">$ch</span> <span class="sy0">=</span> curl_init<span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span>
+ curl_setopt<span class="br0">(</span><span class="re0">$ch</span><span class="sy0">,</span> CURLOPT_URL<span class="sy0">,</span> <span class="re0">$url</span><span class="br0">)</span><span class="sy0">;</span>
+ curl_setopt<span class="br0">(</span><span class="re0">$ch</span><span class="sy0">,</span> CURLOPT_RETURNTRANSFER<span class="sy0">,</span> <span class="nu0">1</span><span class="br0">)</span><span class="sy0">;</span>
+ <span class="re0">$rsp</span> <span class="sy0">=</span> curl_exec<span class="br0">(</span><span class="re0">$ch</span><span class="br0">)</span><span class="sy0">;</span>
+ curl_close<span class="br0">(</span><span class="re0">$ch</span><span class="br0">)</span><span class="sy0">;</span>
+
+ <span class="kw1">if</span> <span class="br0">(</span><span class="re0">$rsp</span> <span class="sy0">!==</span> <span class="kw2">false</span><span class="br0">)</span> <span class="br0">{</span>
+
+ <span class="re0">$rsp_obj</span> <span class="sy0">=</span> json_decode<span class="br0">(</span><span class="re0">$rsp</span><span class="sy0">,</span> <span class="kw2">true</span><span class="br0">)</span><span class="sy0">;</span>
+
+ <span class="re0">$results</span> <span class="sy0">=</span> <span class="re0">$rsp_obj</span><span class="br0">[</span><span class="st0">"query"</span><span class="br0">]</span><span class="br0">[</span><span class="st0">"results"</span><span class="br0">]</span><span class="br0">[</span><span class="st0">"item"</span><span class="br0">]</span><span class="sy0">;</span>
+
+ <span class="re0">$list</span> <span class="sy0">=</span> <span class="st0">""</span><span class="sy0">;</span> <span class="co1">// HTML output</span>
+
+ <span class="re0">$nResults</span> <span class="sy0">=</span> <span class="kw3">count</span><span class="br0">(</span><span class="re0">$results</span><span class="br0">)</span><span class="sy0">;</span>
+
+ <span class="kw1">if</span> <span class="br0">(</span><span class="re0">$nResults</span> <span class="sy0">></span> <span class="nu0">10</span><span class="br0">)</span> <span class="br0">{</span>
+ <span class="re0">$nResults</span> <span class="sy0">=</span> <span class="nu0">9</span><span class="sy0">;</span>
+ <span class="br0">}</span>
+
+ <span class="kw1">for</span> <span class="br0">(</span><span class="re0">$i</span> <span class="sy0">=</span> <span class="nu0">0</span><span class="sy0">;</span> <span class="re0">$i</span><span class="sy0"><=</span> <span class="re0">$nResults</span><span class="sy0">;</span> <span class="re0">$i</span><span class="sy0">++</span><span class="br0">)</span> <span class="br0">{</span>
+
+ <span class="re0">$result</span> <span class="sy0">=</span> <span class="re0">$results</span><span class="br0">[</span><span class="re0">$i</span><span class="br0">]</span><span class="sy0">;</span>
+
+ <span class="re0">$list</span><span class="sy0">.=</span> <span class="co3"><<< END_OF_HTML
+ <li>
+ <a href="${result["link"]}"><q>${result["title"]}</q></a>
+ </li>
+END</span>_OF_HTML<span class="sy0">;</span>
+
+ <span class="br0">}</span>
+
+ <span class="kw1">return</span> <span class="br0">(</span><span class="st0">"<ul>"</span> <span class="sy0">.</span> <span class="re0">$list</span> <span class="sy0">.</span> <span class="st0">"</ul>"</span><span class="br0">)</span><span class="sy0">;</span>
+
+ <span class="br0">}</span>
+
+<span class="br0">}</span>
+ </pre></div><textarea id="syntax2-plain">function getFeed($sFeed) {
+
+ $params = array(
+ "q" => ('select title,link from rss where url="http://rss.news.yahoo.com/rss/$sFeed"'),
+ "format" => "json"
+ );
+
+ $encoded_params = array();
+
+ foreach ($params as $k => $v) {
+ $encoded_params[] = urlencode($k)."=".urlencode($v);
+ }
+
+ $url = "http://query.yahooapis.com/v1/public/yql?".implode("&", $encoded_params);
+
+ $ch = curl_init();
+ curl_setopt($ch, CURLOPT_URL, $url);
+ curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
+ $rsp = curl_exec($ch);
+ curl_close($ch);
+
+ if ($rsp !== false) {
+
+ $rsp_obj = json_decode($rsp, true);
+
+ $results = $rsp_obj["query"]["results"]["item"];
+
+ $list = ""; // HTML output
+
+ $nResults = count($results);
+
+ if ($nResults > 10) {
+ $nResults = 9;
+ }
+
+ for ($i = 0; $i<= $nResults; $i++) {
+
+ $result = $results[$i];
+
+ $list.= <<< END_OF_HTML
+ <li>
+ <a href="${result["link"]}"><q>${result["title"]}</q></a>
+ </li>
+END_OF_HTML;
+
+ }
+
+ return ("<ul>" . $list . "</ul>");
+
+ }
+
+}
+</textarea></div>
+<h3>Progressive Enhancement</h3>
+<p>
+The markup above will be transformed using both CSS and JavaScript. To account
+for the scenario where the user has CSS enabled in their browser but JavaScript
+is disabled, the CSS used to style the tabview will be loaded via JavaScript
+using the YUI instance's <a href="http://developer.yahoo.com/yui/3/yui#loader">built-in Loader</a>.
+Additionally, a small block of JavaScript will be placed in the
+<code><head></code> — used to temporarily hide the markup
+while the JavaScript and CSS are in the process of loading to prevent the user
+from seeing a flash unstyled content.
+</p>
+<div id="syntax3" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">YUI<span class="br0">(</span><span class="br0">{</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> base<span class="sy0">:</span> <span class="st0">"../../build/"</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> modules<span class="sy0">:</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> <span class="st0">"tabviewcss"</span><span class="sy0">:</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> type<span class="sy0">:</span> <span class="st0">"css"</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> fullpath<span class="sy0">:</span> <span class="st0">"assets/tabview.css"</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> <span class="st0">"tabviewjs"</span><span class="sy0">:</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> type<span class="sy0">:</span> <span class="st0">"js"</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> fullpath<span class="sy0">:</span> <span class="st0">"assets/tabview.js"</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> requires<span class="sy0">:</span> <span class="br0">[</span><span class="st0">"node-focusmanager"</span><span class="sy0">,</span> <span class="st0">"tabviewcss"</span><span class="br0">]</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> <span class="br0">}</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> timeout<span class="sy0">:</span> <span class="nu0">10000</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="br0">)</span>.<span class="kw2">use</span><span class="br0">(</span><span class="st0">"tabviewjs"</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>Y<span class="sy0">,</span> result<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> <span class="co1">// The callback supplied to use() will be executed regardless of</span></div></li><li class="li1"><div class="de1"> <span class="co1">// whether the operation was successful or not. The second parameter</span></div></li><li class="li1"><div class="de1"> <span class="co1">// is a result object that has the status of the operation. We can</span></div></li><li class="li1"><div class="de1"> <span class="co1">// use this to try to recover from failures or timeouts.</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> <span class="kw1">if</span> <span class="br0">(</span><span class="sy0">!</span>result.<span class="me1">success</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> Y.<span class="me1">log</span><span class="br0">(</span><span class="st0">"Load failure: "</span> <span class="sy0">+</span> result.<span class="me1">msg</span><span class="sy0">,</span> <span class="st0">"warn"</span><span class="sy0">,</span> <span class="st0">"Example"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">// Show the tabview HTML if the loader failed that way the</span></div></li><li class="li2"><div class="de2"> <span class="co1">// original unskinned tabview will be visible so that the</span></div></li><li class="li1"><div class="de1"> <span class="co1">// user can interact with it either way.</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> document.<span class="me1">documentElement</span>.<span class="me1">className</span> <span class="sy0">=</span> <span class="st0">""</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">YUI<span class="br0">(</span><span class="br0">{</span>
+
+ base<span class="sy0">:</span> <span class="st0">"../../build/"</span><span class="sy0">,</span>
+ modules<span class="sy0">:</span> <span class="br0">{</span>
+ <span class="st0">"tabviewcss"</span><span class="sy0">:</span> <span class="br0">{</span>
+ type<span class="sy0">:</span> <span class="st0">"css"</span><span class="sy0">,</span>
+ fullpath<span class="sy0">:</span> <span class="st0">"assets/tabview.css"</span>
+ <span class="br0">}</span><span class="sy0">,</span>
+ <span class="st0">"tabviewjs"</span><span class="sy0">:</span> <span class="br0">{</span>
+ type<span class="sy0">:</span> <span class="st0">"js"</span><span class="sy0">,</span>
+ fullpath<span class="sy0">:</span> <span class="st0">"assets/tabview.js"</span><span class="sy0">,</span>
+ requires<span class="sy0">:</span> <span class="br0">[</span><span class="st0">"node-focusmanager"</span><span class="sy0">,</span> <span class="st0">"tabviewcss"</span><span class="br0">]</span>
+ <span class="br0">}</span>
+
+ <span class="br0">}</span><span class="sy0">,</span>
+ timeout<span class="sy0">:</span> <span class="nu0">10000</span>
+
+<span class="br0">}</span><span class="br0">)</span>.<span class="kw2">use</span><span class="br0">(</span><span class="st0">"tabviewjs"</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>Y<span class="sy0">,</span> result<span class="br0">)</span> <span class="br0">{</span>
+
+ <span class="co1">// The callback supplied to use() will be executed regardless of</span>
+ <span class="co1">// whether the operation was successful or not. The second parameter</span>
+ <span class="co1">// is a result object that has the status of the operation. We can</span>
+ <span class="co1">// use this to try to recover from failures or timeouts.</span>
+
+ <span class="kw1">if</span> <span class="br0">(</span><span class="sy0">!</span>result.<span class="me1">success</span><span class="br0">)</span> <span class="br0">{</span>
+
+ Y.<span class="me1">log</span><span class="br0">(</span><span class="st0">"Load failure: "</span> <span class="sy0">+</span> result.<span class="me1">msg</span><span class="sy0">,</span> <span class="st0">"warn"</span><span class="sy0">,</span> <span class="st0">"Example"</span><span class="br0">)</span><span class="sy0">;</span>
+
+ <span class="co1">// Show the tabview HTML if the loader failed that way the</span>
+ <span class="co1">// original unskinned tabview will be visible so that the</span>
+ <span class="co1">// user can interact with it either way.</span>
+
+ document.<span class="me1">documentElement</span>.<span class="me1">className</span> <span class="sy0">=</span> <span class="st0">""</span><span class="sy0">;</span>
+
+ <span class="br0">}</span>
+
+<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax3-plain">YUI({
+
+ base: "../../build/",
+ modules: {
+ "tabviewcss": {
+ type: "css",
+ fullpath: "assets/tabview.css"
+ },
+ "tabviewjs": {
+ type: "js",
+ fullpath: "assets/tabview.js",
+ requires: ["node-focusmanager", "tabviewcss"]
+ }
+
+ },
+ timeout: 10000
+
+}).use("tabviewjs", function(Y, result) {
+
+ // The callback supplied to use() will be executed regardless of
+ // whether the operation was successful or not. The second parameter
+ // is a result object that has the status of the operation. We can
+ // use this to try to recover from failures or timeouts.
+
+ if (!result.success) {
+
+ Y.log("Load failure: " + result.msg, "warn", "Example");
+
+ // Show the tabview HTML if the loader failed that way the
+ // original unskinned tabview will be visible so that the
+ // user can interact with it either way.
+
+ document.documentElement.className = "";
+
+ }
+
+});</textarea></div>
+
+<h3>ARIA Support</h3>
+<p>
+Through the use of CSS and JavaScript the HTML for the tabview can be
+transformed into something that looks and behaves like a desktop tab control,
+but users of screen readers won't perceive it as an atomic widget, but rather
+simply as a set of HTML elements. However, through the application
+of the
+<a href="http://www.w3.org/TR/wai-aria/">WAI-ARIA Roles and States</a>, it is
+possible to improve the semantics of the markup such that users of screen
+readers perceive it as a tab control.
+</p>
+
+
+<h3>Keyboard Functionality</h3>
+<p>
+The keyboard functionality for the tabview widget will be provided by the
+Focus Manager Node Plugin. The Focus Manager's
+<a href="../../api/plugin.NodeFocusManager.html#config_descendants"><code>descendants</code></a>
+attribute is set to a value of ".yui-tab>a", so that only one tab in the tabview
+is in the browser's default tab flow. This allows users navigating via the
+keyboard to use the tab key to quickly move into and out of the tabview. Once
+the tabview has focus, the user can move focus among each tab using the left
+and right arrows keys, as defined by the value of the
+<a href="../../api/plugin.NodeFocusManager.html#config_keys"><code>keys</code></a>
+attribute. Lastly, the
+<a href="../../api/plugin.NodeFocusManager.html#config_focusClass"><code>focusClass</code></a>
+attribute is used to apply a class of <code>yui-tab-focus</code> to the parent
+<code><li></code> of each <code><a></code> when it is focused,
+making it easy to style the tab's focused state in each of the
+<a href="http://developer.yahoo.com/yui/articles/gbs/#gbschart">A-Grade browsers</a>.
+
+<div id="syntax4" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">YUI<span class="br0">(</span><span class="br0">)</span>.<span class="kw2">use</span><span class="br0">(</span><span class="st0">"*"</span><span class="sy0">,</span> <span class="kw2">function</span> <span class="br0">(</span>Y<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> tabView <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">(</span><span class="st0">"#tabview-1"</span><span class="br0">)</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> tabList <span class="sy0">=</span> tabView.<span class="me1">one</span><span class="br0">(</span><span class="st0">"ul"</span><span class="br0">)</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2"> tabHeading <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">(</span><span class="st0">"#tabview-heading"</span><span class="br0">)</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> sInstructionalText <span class="sy0">=</span> tabHeading.<span class="me1">get</span><span class="br0">(</span><span class="st0">"innerHTML"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> selectedTabAnchor <span class="sy0">=</span> tabView.<span class="me1">one</span><span class="br0">(</span><span class="st0">".yui-tab-selected>a"</span><span class="br0">)</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> bGeckoIEWin <span class="sy0">=</span> <span class="br0">(</span><span class="br0">(</span>Y.<span class="me1">UA</span>.<span class="me1">gecko</span> <span class="sy0">||</span> Y.<span class="me1">UA</span>.<span class="me1">ie</span><span class="br0">)</span> <span class="sy0">&&</span> navigator.<span class="me1">userAgent</span>.<span class="me1">indexOf</span><span class="br0">(</span><span class="st0">"Windows"</span><span class="br0">)</span> <span class="sy0">></span> <span class="sy0">-</span><span class="nu0">1</span><span class="br0">)</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> panelMap <span class="sy0">=</span> <span class="br0">{</span><span class="br0">}</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> tabView.<span class="me1">addClass</span><span class="br0">(</span><span class="st0">"yui-tabview"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">// Remove the "yui-loading" class from the documentElement</span></div></li><li class="li2"><div class="de2"> <span class="co1">// now that the necessary YUI dependencies are loaded and the</span></div></li><li class="li1"><div class="de1"> <span class="co1">// tabview has been skinned.</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> tabView.<span class="me1">get</span><span class="br0">(</span><span class="st0">"ownerDocument"</span><span class="br0">)</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"documentElement"</span><span class="br0">)</span>.<span class="me1">removeClass</span><span class="br0">(</span><span class="st0">"yui-loading"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> <span class="co1">// Apply the ARIA roles, states and properties.</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">// Add some instructional text to the heading that will be read by</span></div></li><li class="li1"><div class="de1"> <span class="co1">// the screen reader when the first tab in the tabview is focused.</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> tabHeading.<span class="me1">set</span><span class="br0">(</span><span class="st0">"innerHTML"</span><span class="sy0">,</span> <span class="br0">(</span>sInstructionalText <span class="sy0">+</span> <span class="st0">" <em>Press the enter key to load the content of each tab.</em>"</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> tabList.<span class="me1">setAttrs</span><span class="br0">(</span><span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="st0">"aria-labelledby"</span><span class="sy0">:</span> <span class="st0">"tabview-heading"</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> role<span class="sy0">:</span> <span class="st0">"tablist"</span></div></li><li class="li2"><div class="de2"> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> tabView.<span class="me1">one</span><span class="br0">(</span><span class="st0">"div"</span><span class="br0">)</span>.<span class="me1">set</span><span class="br0">(</span><span class="st0">"role"</span><span class="sy0">,</span> <span class="st0">"presentation"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> tabView.<span class="me1">plug</span><span class="br0">(</span>Y.<span class="me1">Plugin</span>.<span class="me1">NodeFocusManager</span><span class="sy0">,</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> descendants<span class="sy0">:</span> <span class="st0">".yui-tab>a"</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> keys<span class="sy0">:</span> <span class="br0">{</span> next<span class="sy0">:</span> <span class="st0">"down:39"</span><span class="sy0">,</span> <span class="co1">// Right arrow</span></div></li><li class="li1"><div class="de1"> previous<span class="sy0">:</span> <span class="st0">"down:37"</span> <span class="br0">}</span><span class="sy0">,</span> <span class="co1">// Left arrow</span></div></li><li class="li1"><div class="de1"> focusClass<span class="sy0">:</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> className<span class="sy0">:</span> <span class="st0">"yui-tab-focus"</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> fn<span class="sy0">:</span> <span class="kw2">function</span> <span class="br0">(</span>node<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">return</span> node.<span class="me1">get</span><span class="br0">(</span><span class="st0">"parentNode"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2"> circular<span class="sy0">:</span> <span class="kw2">true</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">// If the list of tabs loses focus, set the activeDescendant</span></div></li><li class="li2"><div class="de2"> <span class="co1">// attribute to the currently selected tab.</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> tabView.<span class="me1">focusManager</span>.<span class="me1">after</span><span class="br0">(</span><span class="st0">"focusedChange"</span><span class="sy0">,</span> <span class="kw2">function</span> <span class="br0">(</span>event<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span><span class="sy0">!</span>event.<span class="me1">newVal</span><span class="br0">)</span> <span class="br0">{</span> <span class="co1">// The list of tabs has lost focus</span></div></li><li class="li2"><div class="de2"> <span class="kw1">this</span>.<span class="me1">set</span><span class="br0">(</span><span class="st0">"activeDescendant"</span><span class="sy0">,</span> selectedTabAnchor<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> tabView.<span class="me1">all</span><span class="br0">(</span><span class="st0">".yui-tab>a"</span><span class="br0">)</span>.<span class="me1">each</span><span class="br0">(</span><span class="kw2">function</span> <span class="br0">(</span>anchor<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> sHref <span class="sy0">=</span> anchor.<span class="me1">getAttribute</span><span class="br0">(</span><span class="st0">"href"</span><span class="sy0">,</span> <span class="nu0">2</span><span class="br0">)</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> sPanelID <span class="sy0">=</span> sHref.<span class="me1">substring</span><span class="br0">(</span><span class="nu0">1</span><span class="sy0">,</span> sHref.<span class="me1">length</span><span class="br0">)</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2"> panel<span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">// Apply the ARIA roles, states and properties to each tab</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> anchor.<span class="me1">set</span><span class="br0">(</span><span class="st0">"role"</span><span class="sy0">,</span> <span class="st0">"tab"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> anchor.<span class="me1">get</span><span class="br0">(</span><span class="st0">"parentNode"</span><span class="br0">)</span>.<span class="me1">set</span><span class="br0">(</span><span class="st0">"role"</span><span class="sy0">,</span> <span class="st0">"presentation"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">// Remove the "href" attribute from the anchor element to</span></div></li><li class="li1"><div class="de1"> <span class="co1">// prevent JAWS and NVDA from reading the value of the "href"</span></div></li><li class="li2"><div class="de2"> <span class="co1">// attribute when the anchor is focused</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span>bGeckoIEWin<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> anchor.<span class="me1">removeAttribute</span><span class="br0">(</span><span class="st0">"href"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> <span class="co1">// Cache a reference to id of the tab's corresponding panel</span></div></li><li class="li1"><div class="de1"> <span class="co1">// element so that it can be made visible when the tab</span></div></li><li class="li1"><div class="de1"> <span class="co1">// is clicked.</span></div></li><li class="li1"><div class="de1"> panelMap<span class="br0">[</span>anchor.<span class="me1">get</span><span class="br0">(</span><span class="st0">"id"</span><span class="br0">)</span><span class="br0">]</span> <span class="sy0">=</span> sPanelID<span class="sy0">;</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">// Apply the ARIA roles, states and properties to each panel</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> panel <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">(</span><span class="br0">(</span><span class="st0">"#"</span> <span class="sy0">+</span> sPanelID<span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> panel.<span class="me1">setAttrs</span><span class="br0">(</span><span class="br0">{</span></div></li><li class="li1"><div class="de1"> role<span class="sy0">:</span> <span class="st0">"tabpanel"</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> <span class="st0">"aria-labelledby"</span><span class="sy0">:</span> anchor.<span class="me1">get</span><span class="br0">(</span><span class="st0">"id"</span><span class="br0">)</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">// Use the "delegate" custom event to listen for the "click" event</span></div></li><li class="li2"><div class="de2"> <span class="co1">// of each tab's <A> element.</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> tabView.<span class="me1">delegate</span><span class="br0">(</span><span class="st0">"click"</span><span class="sy0">,</span> <span class="kw2">function</span> <span class="br0">(</span>event<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> selectedPanel<span class="sy0">,</span></div></li><li class="li2"><div class="de2"> sID <span class="sy0">=</span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"id"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">// Deselect the currently selected tab and hide its</span></div></li><li class="li1"><div class="de1"> <span class="co1">// corresponding panel.</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> <span class="kw1">if</span> <span class="br0">(</span>selectedTabAnchor<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> selectedTabAnchor.<span class="me1">get</span><span class="br0">(</span><span class="st0">"parentNode"</span><span class="br0">)</span>.<span class="me1">removeClass</span><span class="br0">(</span><span class="st0">"yui-tab-selected"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> Y.<span class="me1">one</span><span class="br0">(</span><span class="br0">(</span><span class="st0">"#"</span> <span class="sy0">+</span> panelMap<span class="br0">[</span>selectedTabAnchor.<span class="me1">get</span><span class="br0">(</span><span class="st0">"id"</span><span class="br0">)</span><span class="br0">]</span><span class="br0">)</span><span class="br0">)</span>.<span class="me1">removeClass</span><span class="br0">(</span><span class="st0">"yui-tabpanel-selected"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> selectedTabAnchor <span class="sy0">=</span> <span class="kw1">this</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> selectedTabAnchor.<span class="me1">get</span><span class="br0">(</span><span class="st0">"parentNode"</span><span class="br0">)</span>.<span class="me1">addClass</span><span class="br0">(</span><span class="st0">"yui-tab-selected"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> selectedPanel <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">(</span><span class="br0">(</span><span class="st0">"#"</span> <span class="sy0">+</span> panelMap<span class="br0">[</span>sID<span class="br0">]</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> selectedPanel.<span class="me1">addClass</span><span class="br0">(</span><span class="st0">"yui-tabpanel-selected"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> creatingPaging<span class="br0">(</span>selectedPanel<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">// Prevent the browser from following the URL specified by the</span></div></li><li class="li1"><div class="de1"> <span class="co1">// anchor's "href" attribute when clicked.</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> event.<span class="me1">preventDefault</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="sy0">,</span> <span class="st0">".yui-tab>a"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> <span class="co1">// Since the anchor's "href" attribute has been removed, the</span></div></li><li class="li1"><div class="de1"> <span class="co1">// element will not fire the click event in Firefox when the</span></div></li><li class="li1"><div class="de1"> <span class="co1">// user presses the enter key. To fix this, dispatch the</span></div></li><li class="li1"><div class="de1"> <span class="co1">// "click" event to the anchor when the user presses the</span></div></li><li class="li2"><div class="de2"> <span class="co1">// enter key.</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span>bGeckoIEWin<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> tabView.<span class="me1">delegate</span><span class="br0">(</span><span class="st0">"keydown"</span><span class="sy0">,</span> <span class="kw2">function</span> <span class="br0">(</span>event<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span>event.<span class="me1">charCode</span> <span class="sy0">===</span> <span class="nu0">13</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">this</span>.<span class="me1">simulate</span><span class="br0">(</span><span class="st0">"click"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> <span class="br0">}</span><span class="sy0">,</span> <span class="st0">">ul>li>a"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">YUI<span class="br0">(</span><span class="br0">)</span>.<span class="kw2">use</span><span class="br0">(</span><span class="st0">"*"</span><span class="sy0">,</span> <span class="kw2">function</span> <span class="br0">(</span>Y<span class="br0">)</span> <span class="br0">{</span>
+
+ <span class="kw2">var</span> tabView <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">(</span><span class="st0">"#tabview-1"</span><span class="br0">)</span><span class="sy0">,</span>
+ tabList <span class="sy0">=</span> tabView.<span class="me1">one</span><span class="br0">(</span><span class="st0">"ul"</span><span class="br0">)</span><span class="sy0">,</span>
+ tabHeading <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">(</span><span class="st0">"#tabview-heading"</span><span class="br0">)</span><span class="sy0">,</span>
+ sInstructionalText <span class="sy0">=</span> tabHeading.<span class="me1">get</span><span class="br0">(</span><span class="st0">"innerHTML"</span><span class="br0">)</span><span class="sy0">;</span>
+ selectedTabAnchor <span class="sy0">=</span> tabView.<span class="me1">one</span><span class="br0">(</span><span class="st0">".yui-tab-selected>a"</span><span class="br0">)</span><span class="sy0">,</span>
+ bGeckoIEWin <span class="sy0">=</span> <span class="br0">(</span><span class="br0">(</span>Y.<span class="me1">UA</span>.<span class="me1">gecko</span> <span class="sy0">||</span> Y.<span class="me1">UA</span>.<span class="me1">ie</span><span class="br0">)</span> <span class="sy0">&&</span> navigator.<span class="me1">userAgent</span>.<span class="me1">indexOf</span><span class="br0">(</span><span class="st0">"Windows"</span><span class="br0">)</span> <span class="sy0">></span> <span class="sy0">-</span><span class="nu0">1</span><span class="br0">)</span><span class="sy0">,</span>
+ panelMap <span class="sy0">=</span> <span class="br0">{</span><span class="br0">}</span><span class="sy0">;</span>
+
+
+ tabView.<span class="me1">addClass</span><span class="br0">(</span><span class="st0">"yui-tabview"</span><span class="br0">)</span><span class="sy0">;</span>
+
+ <span class="co1">// Remove the "yui-loading" class from the documentElement</span>
+ <span class="co1">// now that the necessary YUI dependencies are loaded and the</span>
+ <span class="co1">// tabview has been skinned.</span>
+
+ tabView.<span class="me1">get</span><span class="br0">(</span><span class="st0">"ownerDocument"</span><span class="br0">)</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"documentElement"</span><span class="br0">)</span>.<span class="me1">removeClass</span><span class="br0">(</span><span class="st0">"yui-loading"</span><span class="br0">)</span><span class="sy0">;</span>
+
+ <span class="co1">// Apply the ARIA roles, states and properties.</span>
+
+ <span class="co1">// Add some instructional text to the heading that will be read by</span>
+ <span class="co1">// the screen reader when the first tab in the tabview is focused.</span>
+
+ tabHeading.<span class="me1">set</span><span class="br0">(</span><span class="st0">"innerHTML"</span><span class="sy0">,</span> <span class="br0">(</span>sInstructionalText <span class="sy0">+</span> <span class="st0">" <em>Press the enter key to load the content of each tab.</em>"</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span>
+
+ tabList.<span class="me1">setAttrs</span><span class="br0">(</span><span class="br0">{</span>
+ <span class="st0">"aria-labelledby"</span><span class="sy0">:</span> <span class="st0">"tabview-heading"</span><span class="sy0">,</span>
+ role<span class="sy0">:</span> <span class="st0">"tablist"</span>
+ <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
+
+ tabView.<span class="me1">one</span><span class="br0">(</span><span class="st0">"div"</span><span class="br0">)</span>.<span class="me1">set</span><span class="br0">(</span><span class="st0">"role"</span><span class="sy0">,</span> <span class="st0">"presentation"</span><span class="br0">)</span><span class="sy0">;</span>
+
+
+ tabView.<span class="me1">plug</span><span class="br0">(</span>Y.<span class="me1">Plugin</span>.<span class="me1">NodeFocusManager</span><span class="sy0">,</span> <span class="br0">{</span>
+ descendants<span class="sy0">:</span> <span class="st0">".yui-tab>a"</span><span class="sy0">,</span>
+ keys<span class="sy0">:</span> <span class="br0">{</span> next<span class="sy0">:</span> <span class="st0">"down:39"</span><span class="sy0">,</span> <span class="co1">// Right arrow</span>
+ previous<span class="sy0">:</span> <span class="st0">"down:37"</span> <span class="br0">}</span><span class="sy0">,</span> <span class="co1">// Left arrow</span>
+ focusClass<span class="sy0">:</span> <span class="br0">{</span>
+ className<span class="sy0">:</span> <span class="st0">"yui-tab-focus"</span><span class="sy0">,</span>
+ fn<span class="sy0">:</span> <span class="kw2">function</span> <span class="br0">(</span>node<span class="br0">)</span> <span class="br0">{</span>
+ <span class="kw1">return</span> node.<span class="me1">get</span><span class="br0">(</span><span class="st0">"parentNode"</span><span class="br0">)</span><span class="sy0">;</span>
+ <span class="br0">}</span>
+ <span class="br0">}</span><span class="sy0">,</span>
+ circular<span class="sy0">:</span> <span class="kw2">true</span>
+ <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
+
+
+ <span class="co1">// If the list of tabs loses focus, set the activeDescendant</span>
+ <span class="co1">// attribute to the currently selected tab.</span>
+
+ tabView.<span class="me1">focusManager</span>.<span class="me1">after</span><span class="br0">(</span><span class="st0">"focusedChange"</span><span class="sy0">,</span> <span class="kw2">function</span> <span class="br0">(</span>event<span class="br0">)</span> <span class="br0">{</span>
+
+ <span class="kw1">if</span> <span class="br0">(</span><span class="sy0">!</span>event.<span class="me1">newVal</span><span class="br0">)</span> <span class="br0">{</span> <span class="co1">// The list of tabs has lost focus</span>
+ <span class="kw1">this</span>.<span class="me1">set</span><span class="br0">(</span><span class="st0">"activeDescendant"</span><span class="sy0">,</span> selectedTabAnchor<span class="br0">)</span><span class="sy0">;</span>
+ <span class="br0">}</span>
+
+ <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
+
+
+ tabView.<span class="me1">all</span><span class="br0">(</span><span class="st0">".yui-tab>a"</span><span class="br0">)</span>.<span class="me1">each</span><span class="br0">(</span><span class="kw2">function</span> <span class="br0">(</span>anchor<span class="br0">)</span> <span class="br0">{</span>
+
+ <span class="kw2">var</span> sHref <span class="sy0">=</span> anchor.<span class="me1">getAttribute</span><span class="br0">(</span><span class="st0">"href"</span><span class="sy0">,</span> <span class="nu0">2</span><span class="br0">)</span><span class="sy0">,</span>
+ sPanelID <span class="sy0">=</span> sHref.<span class="me1">substring</span><span class="br0">(</span><span class="nu0">1</span><span class="sy0">,</span> sHref.<span class="me1">length</span><span class="br0">)</span><span class="sy0">,</span>
+ panel<span class="sy0">;</span>
+
+ <span class="co1">// Apply the ARIA roles, states and properties to each tab</span>
+
+ anchor.<span class="me1">set</span><span class="br0">(</span><span class="st0">"role"</span><span class="sy0">,</span> <span class="st0">"tab"</span><span class="br0">)</span><span class="sy0">;</span>
+ anchor.<span class="me1">get</span><span class="br0">(</span><span class="st0">"parentNode"</span><span class="br0">)</span>.<span class="me1">set</span><span class="br0">(</span><span class="st0">"role"</span><span class="sy0">,</span> <span class="st0">"presentation"</span><span class="br0">)</span><span class="sy0">;</span>
+
+
+ <span class="co1">// Remove the "href" attribute from the anchor element to</span>
+ <span class="co1">// prevent JAWS and NVDA from reading the value of the "href"</span>
+ <span class="co1">// attribute when the anchor is focused</span>
+
+ <span class="kw1">if</span> <span class="br0">(</span>bGeckoIEWin<span class="br0">)</span> <span class="br0">{</span>
+ anchor.<span class="me1">removeAttribute</span><span class="br0">(</span><span class="st0">"href"</span><span class="br0">)</span><span class="sy0">;</span>
+ <span class="br0">}</span>
+
+ <span class="co1">// Cache a reference to id of the tab's corresponding panel</span>
+ <span class="co1">// element so that it can be made visible when the tab</span>
+ <span class="co1">// is clicked.</span>
+ panelMap<span class="br0">[</span>anchor.<span class="me1">get</span><span class="br0">(</span><span class="st0">"id"</span><span class="br0">)</span><span class="br0">]</span> <span class="sy0">=</span> sPanelID<span class="sy0">;</span>
+
+
+ <span class="co1">// Apply the ARIA roles, states and properties to each panel</span>
+
+ panel <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">(</span><span class="br0">(</span><span class="st0">"#"</span> <span class="sy0">+</span> sPanelID<span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span>
+
+ panel.<span class="me1">setAttrs</span><span class="br0">(</span><span class="br0">{</span>
+ role<span class="sy0">:</span> <span class="st0">"tabpanel"</span><span class="sy0">,</span>
+ <span class="st0">"aria-labelledby"</span><span class="sy0">:</span> anchor.<span class="me1">get</span><span class="br0">(</span><span class="st0">"id"</span><span class="br0">)</span>
+ <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
+
+ <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
+
+
+ <span class="co1">// Use the "delegate" custom event to listen for the "click" event</span>
+ <span class="co1">// of each tab's <A> element.</span>
+
+ tabView.<span class="me1">delegate</span><span class="br0">(</span><span class="st0">"click"</span><span class="sy0">,</span> <span class="kw2">function</span> <span class="br0">(</span>event<span class="br0">)</span> <span class="br0">{</span>
+
+ <span class="kw2">var</span> selectedPanel<span class="sy0">,</span>
+ sID <span class="sy0">=</span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"id"</span><span class="br0">)</span><span class="sy0">;</span>
+
+ <span class="co1">// Deselect the currently selected tab and hide its</span>
+ <span class="co1">// corresponding panel.</span>
+
+ <span class="kw1">if</span> <span class="br0">(</span>selectedTabAnchor<span class="br0">)</span> <span class="br0">{</span>
+ selectedTabAnchor.<span class="me1">get</span><span class="br0">(</span><span class="st0">"parentNode"</span><span class="br0">)</span>.<span class="me1">removeClass</span><span class="br0">(</span><span class="st0">"yui-tab-selected"</span><span class="br0">)</span><span class="sy0">;</span>
+ Y.<span class="me1">one</span><span class="br0">(</span><span class="br0">(</span><span class="st0">"#"</span> <span class="sy0">+</span> panelMap<span class="br0">[</span>selectedTabAnchor.<span class="me1">get</span><span class="br0">(</span><span class="st0">"id"</span><span class="br0">)</span><span class="br0">]</span><span class="br0">)</span><span class="br0">)</span>.<span class="me1">removeClass</span><span class="br0">(</span><span class="st0">"yui-tabpanel-selected"</span><span class="br0">)</span><span class="sy0">;</span>
+ <span class="br0">}</span>
+
+ selectedTabAnchor <span class="sy0">=</span> <span class="kw1">this</span><span class="sy0">;</span>
+ selectedTabAnchor.<span class="me1">get</span><span class="br0">(</span><span class="st0">"parentNode"</span><span class="br0">)</span>.<span class="me1">addClass</span><span class="br0">(</span><span class="st0">"yui-tab-selected"</span><span class="br0">)</span><span class="sy0">;</span>
+
+ selectedPanel <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">(</span><span class="br0">(</span><span class="st0">"#"</span> <span class="sy0">+</span> panelMap<span class="br0">[</span>sID<span class="br0">]</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span>
+ selectedPanel.<span class="me1">addClass</span><span class="br0">(</span><span class="st0">"yui-tabpanel-selected"</span><span class="br0">)</span><span class="sy0">;</span>
+
+ creatingPaging<span class="br0">(</span>selectedPanel<span class="br0">)</span><span class="sy0">;</span>
+
+ <span class="co1">// Prevent the browser from following the URL specified by the</span>
+ <span class="co1">// anchor's "href" attribute when clicked.</span>
+
+ event.<span class="me1">preventDefault</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span>
+
+ <span class="br0">}</span><span class="sy0">,</span> <span class="st0">".yui-tab>a"</span><span class="br0">)</span><span class="sy0">;</span>
+
+
+ <span class="co1">// Since the anchor's "href" attribute has been removed, the</span>
+ <span class="co1">// element will not fire the click event in Firefox when the</span>
+ <span class="co1">// user presses the enter key. To fix this, dispatch the</span>
+ <span class="co1">// "click" event to the anchor when the user presses the</span>
+ <span class="co1">// enter key.</span>
+
+ <span class="kw1">if</span> <span class="br0">(</span>bGeckoIEWin<span class="br0">)</span> <span class="br0">{</span>
+
+ tabView.<span class="me1">delegate</span><span class="br0">(</span><span class="st0">"keydown"</span><span class="sy0">,</span> <span class="kw2">function</span> <span class="br0">(</span>event<span class="br0">)</span> <span class="br0">{</span>
+
+ <span class="kw1">if</span> <span class="br0">(</span>event.<span class="me1">charCode</span> <span class="sy0">===</span> <span class="nu0">13</span><span class="br0">)</span> <span class="br0">{</span>
+ <span class="kw1">this</span>.<span class="me1">simulate</span><span class="br0">(</span><span class="st0">"click"</span><span class="br0">)</span><span class="sy0">;</span>
+ <span class="br0">}</span>
+
+ <span class="br0">}</span><span class="sy0">,</span> <span class="st0">">ul>li>a"</span><span class="br0">)</span><span class="sy0">;</span>
+
+ <span class="br0">}</span>
+
+<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax4-plain">YUI().use("*", function (Y) {
+
+ var tabView = Y.one("#tabview-1"),
+ tabList = tabView.one("ul"),
+ tabHeading = Y.one("#tabview-heading"),
+ sInstructionalText = tabHeading.get("innerHTML");
+ selectedTabAnchor = tabView.one(".yui-tab-selected>a"),
+ bGeckoIEWin = ((Y.UA.gecko || Y.UA.ie) && navigator.userAgent.indexOf("Windows") > -1),
+ panelMap = {};
+
+
+ tabView.addClass("yui-tabview");
+
+ // Remove the "yui-loading" class from the documentElement
+ // now that the necessary YUI dependencies are loaded and the
+ // tabview has been skinned.
+
+ tabView.get("ownerDocument").get("documentElement").removeClass("yui-loading");
+
+ // Apply the ARIA roles, states and properties.
+
+ // Add some instructional text to the heading that will be read by
+ // the screen reader when the first tab in the tabview is focused.
+
+ tabHeading.set("innerHTML", (sInstructionalText + " <em>Press the enter key to load the content of each tab.</em>"));
+
+ tabList.setAttrs({
+ "aria-labelledby": "tabview-heading",
+ role: "tablist"
+ });
+
+ tabView.one("div").set("role", "presentation");
+
+
+ tabView.plug(Y.Plugin.NodeFocusManager, {
+ descendants: ".yui-tab>a",
+ keys: { next: "down:39", // Right arrow
+ previous: "down:37" }, // Left arrow
+ focusClass: {
+ className: "yui-tab-focus",
+ fn: function (node) {
+ return node.get("parentNode");
+ }
+ },
+ circular: true
+ });
+
+
+ // If the list of tabs loses focus, set the activeDescendant
+ // attribute to the currently selected tab.
+
+ tabView.focusManager.after("focusedChange", function (event) {
+
+ if (!event.newVal) { // The list of tabs has lost focus
+ this.set("activeDescendant", selectedTabAnchor);
+ }
+
+ });
+
+
+ tabView.all(".yui-tab>a").each(function (anchor) {
+
+ var sHref = anchor.getAttribute("href", 2),
+ sPanelID = sHref.substring(1, sHref.length),
+ panel;
+
+ // Apply the ARIA roles, states and properties to each tab
+
+ anchor.set("role", "tab");
+ anchor.get("parentNode").set("role", "presentation");
+
+
+ // Remove the "href" attribute from the anchor element to
+ // prevent JAWS and NVDA from reading the value of the "href"
+ // attribute when the anchor is focused
+
+ if (bGeckoIEWin) {
+ anchor.removeAttribute("href");
+ }
+
+ // Cache a reference to id of the tab's corresponding panel
+ // element so that it can be made visible when the tab
+ // is clicked.
+ panelMap[anchor.get("id")] = sPanelID;
+
+
+ // Apply the ARIA roles, states and properties to each panel
+
+ panel = Y.one(("#" + sPanelID));
+
+ panel.setAttrs({
+ role: "tabpanel",
+ "aria-labelledby": anchor.get("id")
+ });
+
+ });
+
+
+ // Use the "delegate" custom event to listen for the "click" event
+ // of each tab's <A> element.
+
+ tabView.delegate("click", function (event) {
+
+ var selectedPanel,
+ sID = this.get("id");
+
+ // Deselect the currently selected tab and hide its
+ // corresponding panel.
+
+ if (selectedTabAnchor) {
+ selectedTabAnchor.get("parentNode").removeClass("yui-tab-selected");
+ Y.one(("#" + panelMap[selectedTabAnchor.get("id")])).removeClass("yui-tabpanel-selected");
+ }
+
+ selectedTabAnchor = this;
+ selectedTabAnchor.get("parentNode").addClass("yui-tab-selected");
+
+ selectedPanel = Y.one(("#" + panelMap[sID]));
+ selectedPanel.addClass("yui-tabpanel-selected");
+
+ creatingPaging(selectedPanel);
+
+ // Prevent the browser from following the URL specified by the
+ // anchor's "href" attribute when clicked.
+
+ event.preventDefault();
+
+ }, ".yui-tab>a");
+
+
+ // Since the anchor's "href" attribute has been removed, the
+ // element will not fire the click event in Firefox when the
+ // user presses the enter key. To fix this, dispatch the
+ // "click" event to the anchor when the user presses the
+ // enter key.
+
+ if (bGeckoIEWin) {
+
+ tabView.delegate("keydown", function (event) {
+
+ if (event.charCode === 13) {
+ this.simulate("click");
+ }
+
+ }, ">ul>li>a");
+
+ }
+
+});</textarea></div>
+<h3>Accessibility Sugar</h3>
+<p>
+One of the challenges faced by users of screen readers is knowing when you've
+left the context of a given control. In the case of this tabview, if it
+were adjacent to another ARIA-enabled widget, the user would know they've
+left the tabview when the screen reader announces the role of the adjacent
+widget. However, if the tabview is sitting alongside standard HTML content, it
+would be really difficult for the user to know when they've left the context of
+the active panel.
+</p>
+<p>
+One solution to this problem is to add some additional navigation as the last
+child of each tab panel that allows the user to move to the previous and next
+panel in the tabview. This will not only help alert users of screen readers
+that they've reached the end of the tab's panel, but allow <em>all</em>
+keyboard users to move more quickly to the next/previous panel. Without this
+additionally navigation, keyboard users would typically have to press
+shift+tab to navigate back up to the list of tabs to move to the next/previous
+tab.
+</p>
+<div id="syntax5" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="kw2">var</span> creatingPaging <span class="sy0">=</span> <span class="kw2">function</span> <span class="br0">(</span>panel<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> listitem<span class="sy0">,</span></div></li><li class="li1"><div class="de1"> sHTML<span class="sy0">,</span></div></li><li class="li2"><div class="de2"> paging<span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span><span class="sy0">!</span>panel.<span class="me1">one</span><span class="br0">(</span><span class="st0">".paging"</span><span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> listitem <span class="sy0">=</span> selectedTabAnchor.<span class="me1">get</span><span class="br0">(</span><span class="st0">"parentNode"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> sHTML <span class="sy0">=</span> <span class="st0">""</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span>listitem.<span class="me1">previous</span><span class="br0">(</span><span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> sHTML <span class="sy0">+=</span> <span class="st0">'<button type="button" class="yui-tabview-prevbtn">Previous Tab Panel</button>'</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span>listitem.<span class="me1">next</span><span class="br0">(</span><span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> sHTML <span class="sy0">+=</span> <span class="st0">'<button type="button" class="yui-tabview-nextbtn">Next Tab Panel</button>'</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> paging <span class="sy0">=</span> Y.<span class="me1">Node</span>.<span class="me1">create</span><span class="br0">(</span><span class="st0">'<div class="paging">'</span> <span class="sy0">+</span> sHTML <span class="sy0">+</span> <span class="st0">'</div>'</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> panel.<span class="me1">appendChild</span><span class="br0">(</span>paging<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1">creatingPaging<span class="br0">(</span>Y.<span class="me1">one</span><span class="br0">(</span><span class="st0">".yui-tabpanel-selected"</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1">tabView.<span class="me1">delegate</span><span class="br0">(</span><span class="st0">"click"</span><span class="sy0">,</span> <span class="kw2">function</span> <span class="br0">(</span>event<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> node <span class="sy0">=</span> selectedTabAnchor.<span class="me1">get</span><span class="br0">(</span><span class="st0">"parentNode"</span><span class="br0">)</span>.<span class="me1">previous</span><span class="br0">(</span><span class="br0">)</span>.<span class="me1">one</span><span class="br0">(</span><span class="st0">"a"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> tabView.<span class="me1">focusManager</span>.<span class="kw3">focus</span><span class="br0">(</span>node<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> node.<span class="me1">simulate</span><span class="br0">(</span><span class="st0">"click"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="sy0">,</span> <span class="st0">".yui-tabview-prevbtn"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1">tabView.<span class="me1">delegate</span><span class="br0">(</span><span class="st0">"click"</span><span class="sy0">,</span> <span class="kw2">function</span> <span class="br0">(</span>event<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> node <span class="sy0">=</span> selectedTabAnchor.<span class="me1">get</span><span class="br0">(</span><span class="st0">"parentNode"</span><span class="br0">)</span>.<span class="me1">next</span><span class="br0">(</span><span class="br0">)</span>.<span class="me1">one</span><span class="br0">(</span><span class="st0">"a"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> tabView.<span class="me1">focusManager</span>.<span class="kw3">focus</span><span class="br0">(</span>node<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> node.<span class="me1">simulate</span><span class="br0">(</span><span class="st0">"click"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="sy0">,</span> <span class="st0">".yui-tabview-nextbtn"</span><span class="br0">)</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="kw2">var</span> creatingPaging <span class="sy0">=</span> <span class="kw2">function</span> <span class="br0">(</span>panel<span class="br0">)</span> <span class="br0">{</span>
+
+ <span class="kw2">var</span> listitem<span class="sy0">,</span>
+ sHTML<span class="sy0">,</span>
+ paging<span class="sy0">;</span>
+
+ <span class="kw1">if</span> <span class="br0">(</span><span class="sy0">!</span>panel.<span class="me1">one</span><span class="br0">(</span><span class="st0">".paging"</span><span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span>
+
+ listitem <span class="sy0">=</span> selectedTabAnchor.<span class="me1">get</span><span class="br0">(</span><span class="st0">"parentNode"</span><span class="br0">)</span><span class="sy0">;</span>
+ sHTML <span class="sy0">=</span> <span class="st0">""</span><span class="sy0">;</span>
+
+ <span class="kw1">if</span> <span class="br0">(</span>listitem.<span class="me1">previous</span><span class="br0">(</span><span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span>
+ sHTML <span class="sy0">+=</span> <span class="st0">'<button type="button" class="yui-tabview-prevbtn">Previous Tab Panel</button>'</span><span class="sy0">;</span>
+ <span class="br0">}</span>
+
+ <span class="kw1">if</span> <span class="br0">(</span>listitem.<span class="me1">next</span><span class="br0">(</span><span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span>
+ sHTML <span class="sy0">+=</span> <span class="st0">'<button type="button" class="yui-tabview-nextbtn">Next Tab Panel</button>'</span><span class="sy0">;</span>
+ <span class="br0">}</span>
+
+ paging <span class="sy0">=</span> Y.<span class="me1">Node</span>.<span class="me1">create</span><span class="br0">(</span><span class="st0">'<div class="paging">'</span> <span class="sy0">+</span> sHTML <span class="sy0">+</span> <span class="st0">'</div>'</span><span class="br0">)</span><span class="sy0">;</span>
+
+ panel.<span class="me1">appendChild</span><span class="br0">(</span>paging<span class="br0">)</span><span class="sy0">;</span>
+
+ <span class="br0">}</span>
+
+<span class="br0">}</span><span class="sy0">;</span>
+
+creatingPaging<span class="br0">(</span>Y.<span class="me1">one</span><span class="br0">(</span><span class="st0">".yui-tabpanel-selected"</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span>
+
+
+tabView.<span class="me1">delegate</span><span class="br0">(</span><span class="st0">"click"</span><span class="sy0">,</span> <span class="kw2">function</span> <span class="br0">(</span>event<span class="br0">)</span> <span class="br0">{</span>
+
+ <span class="kw2">var</span> node <span class="sy0">=</span> selectedTabAnchor.<span class="me1">get</span><span class="br0">(</span><span class="st0">"parentNode"</span><span class="br0">)</span>.<span class="me1">previous</span><span class="br0">(</span><span class="br0">)</span>.<span class="me1">one</span><span class="br0">(</span><span class="st0">"a"</span><span class="br0">)</span><span class="sy0">;</span>
+
+ tabView.<span class="me1">focusManager</span>.<span class="kw3">focus</span><span class="br0">(</span>node<span class="br0">)</span><span class="sy0">;</span>
+ node.<span class="me1">simulate</span><span class="br0">(</span><span class="st0">"click"</span><span class="br0">)</span><span class="sy0">;</span>
+
+<span class="br0">}</span><span class="sy0">,</span> <span class="st0">".yui-tabview-prevbtn"</span><span class="br0">)</span><span class="sy0">;</span>
+
+
+tabView.<span class="me1">delegate</span><span class="br0">(</span><span class="st0">"click"</span><span class="sy0">,</span> <span class="kw2">function</span> <span class="br0">(</span>event<span class="br0">)</span> <span class="br0">{</span>
+
+ <span class="kw2">var</span> node <span class="sy0">=</span> selectedTabAnchor.<span class="me1">get</span><span class="br0">(</span><span class="st0">"parentNode"</span><span class="br0">)</span>.<span class="me1">next</span><span class="br0">(</span><span class="br0">)</span>.<span class="me1">one</span><span class="br0">(</span><span class="st0">"a"</span><span class="br0">)</span><span class="sy0">;</span>
+
+ tabView.<span class="me1">focusManager</span>.<span class="kw3">focus</span><span class="br0">(</span>node<span class="br0">)</span><span class="sy0">;</span>
+ node.<span class="me1">simulate</span><span class="br0">(</span><span class="st0">"click"</span><span class="br0">)</span><span class="sy0">;</span>
+
+<span class="br0">}</span><span class="sy0">,</span> <span class="st0">".yui-tabview-nextbtn"</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax5-plain">var creatingPaging = function (panel) {
+
+ var listitem,
+ sHTML,
+ paging;
+
+ if (!panel.one(".paging")) {
+
+ listitem = selectedTabAnchor.get("parentNode");
+ sHTML = "";
+
+ if (listitem.previous()) {
+ sHTML += '<button type="button" class="yui-tabview-prevbtn">Previous Tab Panel</button>';
+ }
+
+ if (listitem.next()) {
+ sHTML += '<button type="button" class="yui-tabview-nextbtn">Next Tab Panel</button>';
+ }
+
+ paging = Y.Node.create('<div class="paging">' + sHTML + '</div>');
+
+ panel.appendChild(paging);
+
+ }
+
+};
+
+creatingPaging(Y.one(".yui-tabpanel-selected"));
+
+
+tabView.delegate("click", function (event) {
+
+ var node = selectedTabAnchor.get("parentNode").previous().one("a");
+
+ tabView.focusManager.focus(node);
+ node.simulate("click");
+
+}, ".yui-tabview-prevbtn");
+
+
+tabView.delegate("click", function (event) {
+
+ var node = selectedTabAnchor.get("parentNode").next().one("a");
+
+ tabView.focusManager.focus(node);
+ node.simulate("click");
+
+}, ".yui-tabview-nextbtn");</textarea></div> </div>
+ <div class="yui-u sidebar">
+
+
+ <div id="examples" class="mod box4">
+ <div class="hd">
+ <h4>
+ Focus Manager Node Plugin Examples:</h4>
+ </div>
+ <div class="bd">
+ <ul>
+ <li><a href='../node-focusmanager/node-focusmanager-1.html'>Accessible Toolbar</a></li><li class='selected'><a href='../node-focusmanager/node-focusmanager-2.html'>Accessible TabView</a></li><li><a href='../node-focusmanager/node-focusmanager-3.html'>Accessible Menu Button</a></li> </ul>
+ </div>
+ </div>
+
+ <div class="mod box4">
+ <div class="hd">
+ <h4>More Focus Manager Node Plugin Resources:</h4>
+ </div>
+ <div class="bd">
+ <ul>
+ <!-- <li><a href="http://developer.yahoo.com/yui/node-focusmanager/">User's Guide</a> (external)</li> -->
+<li><a href="../../api/module_node-focusmanager.html">API Documentation</a></li></ul>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ </div>
+ </div>
+
+
+<div class="yui-b toc3" id="tocWrapper">
+<!-- TABLE OF CONTENTS -->
+<div id="toc">
+
+<ul>
+<li class="sect first">YUI 3 Resources</li><li class="item"><a title="YUI 3 -- Yahoo! User Interface (YUI) Library" href="http://developer.yahoo.com/yui/3/">YUI 3 Web Site</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">YUI 3 Examples</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../api/">YUI 3 API Docs</a></li><li class="item"><a title="YUI 3 Dependency Configurator -- configure your custom YUI implementation" href="http://developer.yahoo.com/yui/3/configurator">YUI 3 Dependency Configurator</a></li><li class="item"><a title="The YUI 3 Forum on YUILibrary.com" href="http://yuilibrary.com/forum/viewforum.php?f=15">YUI 3 Forums (external)</a></li><li class="item"><a title="Found a bug or a missing feature? Let us know on YUILibrary.com." href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/license.html">YUI License</a></li><li class="item"><a title="Download and fork the YUI project on GitHub" href="http://github.com/yui">YUI on Github</a></li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUI Blog (external)</a></li><li class="sect">YUI 3 Core - Examples</li><li class="item"><a title="YUI Global Object - Functional Examples" href="../../examples/yui/index.html">YUI Global Object</a></li><li class="item"><a title="Event - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="item"><a title="Node - Functional Examples" href="../../examples/node/index.html">Node</a></li><li class="sect">YUI 3 Component Infrastructure - Examples</li><li class="item"><a title="Attribute - Functional Examples" href="../../examples/attribute/index.html">Attribute</a></li><li class="item"><a title="Plugin - Functional Examples" href="../../examples/plugin/index.html">Plugin <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Widget - Functional Examples" href="../../examples/widget/index.html">Widget <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Utilities - Examples</li><li class="item"><a title="Animation - Functional Examples" href="../../examples/anim/index.html">Animation</a></li><li class="item"><a title="AsyncQueue - Functional Examples" href="../../examples/async-queue/index.html">AsyncQueue</a></li><li class="item"><a title="Browser History - Functional Examples" href="../../examples/history/index.html">Browser History</a></li><li class="item"><a title="Cache - Functional Examples" href="../../examples/cache/index.html">Cache</a></li><li class="item"><a title="Cookie - Functional Examples" href="../../examples/cookie/index.html">Cookie</a></li><li class="item"><a title="DataSchema - Functional Examples" href="../../examples/dataschema/index.html">DataSchema <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataSource - Functional Examples" href="../../examples/datasource/index.html">DataSource <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataType - Functional Examples" href="../../examples/datatype/index.html">DataType <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Drag & Drop - Functional Examples" href="../../examples/dd/index.html">Drag & Drop</a></li><li class="item"><a title="Get - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="item"><a title="ImageLoader - Functional Examples" href="../../examples/imageloader/index.html">ImageLoader</a></li><li class="item"><a title="IO - Functional Examples" href="../../examples/io/index.html">IO</a></li><li class="item"><a title="JSON (JavaScript Object Notation) - Functional Examples" href="../../examples/json/index.html">JSON</a></li><li class="item"><a title="Stylesheet - Functional Examples" href="../../examples/stylesheet/index.html">Stylesheet</a></li><li class="sect">YUI 3 Widgets - Examples</li><li class="item"><a title="Overlay - Functional Examples" href="../../examples/overlay/index.html">Overlay <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Slider - Functional Examples" href="../../examples/slider/index.html">Slider <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Node Plugins - Examples</li><li class="selected "><a title="FocusManager Node Plugin - Functional Examples" href="../../examples/node-focusmanager/index.html">FocusManager Node Plugin <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="MenuNav Node Plugin - Functional Examples" href="../../examples/node-menunav/index.html">MenuNav Node Plugin <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 CSS - Examples</li><li class="item"><a title="YUI CSS Reset - Functional Examples" href="../../examples/cssreset/index.html">CSS Reset</a></li><li class="item"><a title="YUI Fonts - Functional Examples" href="../../examples/cssfonts/index.html">CSS Fonts</a></li><li class="item"><a title="YUI Base - Functional Examples" href="../../examples/cssbase/index.html">CSS Base</a></li><li class="sect">YUI 3 Developer Tools - Examples</li><li class="item"><a title="Console - Functional Examples" href="../../examples/console/index.html">Console <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Console Filters Plugin- Functional Examples" href="../../examples/console-filters/index.html">Plugin.ConsoleFilters <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Profiler - Functional Examples" href="../../examples/profiler/index.html">Profiler</a></li><li class="item"><a title="Test - Functional Examples" href="../../examples/test/index.html">Test</a></li><li class="sect">Other Useful YUI 3 Resources</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li></ul>
+</div>
+</div>
+ </div><!--closes bd-->
+
+ <div id="ft">
+ <p class="first">Copyright © 2009 Yahoo! Inc. All rights reserved.</p>
+ <p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> -
+ <a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> -
+ <a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> -
+ <a href="http://careers.yahoo.com/">Job Openings</a></p>
+ </div>
+</div>
+<script language="javascript">
+var yuiConfig = {base:"../../build/", timeout: 10000};
+</script>
+<script src="../../assets/syntax.js"></script>
+<script src="../../assets/dpSyntaxHighlighter.js"></script>
+<script language="javascript">
+dp.SyntaxHighlighter.HighlightAll('code');
+</script>
+</body>
+</html>