src/cm/media/js/lib/yui/yui3.0.0/examples/node-focusmanager/node-focusmanager-2_clean.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Accessible TabView</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-min.js"></script>
<!--begin custom header content for this example-->
<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>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Accessible TabView</h1>
<div class="exampleIntro">
<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>
<!--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/ap/20090929/ap_en_tv/us_dan_rather_lawsuit"><q>Dan Rather's lawsuit against CBS is dismissed
(AP)
</q></a>
</li> <li>
<a href="http://us.rd.yahoo.com/dailynews/rss/entertainment/*http://news.yahoo.com/s/nm/20090929/film_nm/us_polanski_arrest_extradition"><q>Polanski appeals against extradition over sex case
(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_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/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 =============================== -->
</body>
</html>