oqapi/webgui
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

upgrading to YUI 2.6

Browse source 
data tables are going to need some work yet, but the other stuff seems to be working 100%
This commit is contained in:
JT Smith 2008-10-22 23:53:29 +00:00
parent a041e93da8
commit 20f8df1291
2106 changed files with 993560 additions and 237 deletions
Download patch file Download diff file Expand all files Collapse all files

242
www/extras/yui/examples/tabview/addtab.html Normal file
View file

File diff suppressed because one or more lines are too long

88
www/extras/yui/examples/tabview/addtab_clean.html Normal file
View file

@ -0,0 +1,88 @@
<!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>Adding Tabs</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="../../build/tabview/assets/skins/sam/tabview.css" />
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/element/element-beta-min.js"></script>
<script type="text/javascript" src="../../build/tabview/tabview-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
.yui-navset button {
position:absolute;
top:0;
right:0;
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Adding Tabs</h1>
<div class="exampleIntro">
<p>This demonstrates how to dynamically add tabs to a TabView widget.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<div id="demo" class="yui-navset">
<ul class="yui-nav">
<li><a href="#tab1"><em>Tab One Label</em></a></li>
<li class="selected"><a href="#tab2"><em>Tab Two Label</em></a></li>
<li><a href="#tab3"><em>Tab Three Label</em></a></li>
</ul>
<div class="yui-content">
<div id="tab1"><p>Tab One Content</p></div>
<div id="tab2"><p>Tab Two Content</p></div>
<div id="tab3"><p>Tab Three Content</p></div>
</div>
</div>
<script>
(function() {
var tabView = new YAHOO.widget.TabView('demo');
var addTab = function() {
var labelText = window.prompt('enter the tab label');
var content = window.prompt('enter the tab content');
tabView.addTab( new YAHOO.widget.Tab({ label: labelText, content: content }) );
};
var button = document.createElement('button');
button.innerHTML = 'add tab';
YAHOO.util.Event.on(button, 'click', addTab);
tabView.appendChild(button);
YAHOO.log("The example has finished loading; as you interact with it, you'll see log messages appearing here.", "info", "example");
})();
</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>

246
www/extras/yui/examples/tabview/addtab_log.html Normal file
View file

File diff suppressed because one or more lines are too long

52
www/extras/yui/examples/tabview/assets/border_tabs.css Normal file
View file

@ -0,0 +1,52 @@
.yui-navset .yui-nav li a,
.yui-navset .yui-content {
border:1px solid #000; /* label and content borders */
}
.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav a:hover,
.yui-navset .yui-content {
background-color:#f6f7ee; /* active tab, tab hover, and content bgcolor */
}
.yui-navset .yui-nav li em { padding:.5em; } /* tab padding */
/* defaults to orientation "top" */
.yui-navset .yui-nav .selected a,
.yui-navset .yui-navset-top .yui-nav .selected a {
border-width:1px 1px 0; /* no bottom border for active tab */
padding:0 0 1px; /* to match height of other tabs */
}
.yui-navset .yui-content,
.yui-navset .yui-navset-top .yui-content {
margin:-1px 0 0; /* for active tab overlap */
}
/* overrides for other orientations */
.yui-navset .yui-navset-bottom .yui-nav .selected a,
.yui-navset-bottom .yui-nav .selected a {
border-width:0 1px 1px; /* no top border for active tab */
padding:1px 0 0; /* to match height of other tabs */
}
.yui-navset .yui-navset-bottom .yui-content,
.yui-navset-bottom .yui-content {
margin:0 0 -1px; /* for active tab overlap */
}
.yui-navset .yui-navset-left .yui-nav li.selected a,
.yui-navset-left .yui-nav li.selected a {
border-width:1px 0 1px 1px; /* no right border for active tab */
padding:0 1px 0 0; /* to match width of other tabs */
}
.yui-navset .yui-navset-left .yui-content,
.yui-navset-left .yui-content {
margin:0 0 0 -1px; /* for active tab overlap */
}
.yui-navset .yui-navset-right .yui-nav li.selected a,
.yui-navset-right .yui-nav li.selected a {
border-width:1px 1px 1px 0; /* no left border for active tab */
padding:0 0 0 1px; /* to match width of other tabs */
}
.yui-navset-right .yui-content {
margin:0 -1px 0 0; /* for active tab overlap */
}

BIN
www/extras/yui/examples/tabview/assets/loading.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 729 B

45
www/extras/yui/examples/tabview/assets/news.php Normal file
View file

@ -0,0 +1,45 @@
<?php
/* yadl_spaceid - Skip Stamping */
error_reporting(E_ALL);
function getResource($url){
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$result = curl_exec($ch);
curl_close($ch);
return $result;
}
$url = 'http://search.yahooapis.com/NewsSearchService/V1/newsSearch?appid=YahooDemo&language=en&output=php&'.getenv('QUERY_STRING');
//$response = file_get_contents($url);
$response = getResource($url);
if ($response === false) {
die('Request failed');
}
$resultSet = unserialize($response);
$resultSet = $resultSet['ResultSet'];
$list = ''; // HTML output
$headlines = array(); // track headlines to filter dupes
foreach ($resultSet['Result'] as $result) {
if (!isset($headlines[$result['Title']])) {
$headlines[$result['Title']] = true;
$list.= <<< END_OF_HTML
<li>
<a href="{$result['ClickUrl']}"><q>{$result['Title']}</q></a>
<cite>{$result['NewsSource']}</cite>
</li>
END_OF_HTML;
} // end if
} // end foreach
?>
<ul><?php echo $list; ?></ul>

68
www/extras/yui/examples/tabview/assets/skin-sam.css Normal file
View file

@ -0,0 +1,68 @@
.yui-sam-skin .yui-navset .yui-nav li {
margin-right:0.16em; /* space between tabs */
padding-top:1px; /* gecko: make room for overflow */
zoom:1;
}
.yui-sam-skin .yui-navset .yui-nav .selected {
margin-bottom:-1px; /* for overlap */
}
.yui-sam-skin .yui-navset .yui-nav a {
background:#dadbdb url(../../assets/skins/sam/sprite.png) repeat-x; /* tab background */
border:solid #a3a3a3;
border-width:0 1px;
color:#000;
text-decoration:none;
}
.yui-sam-skin .yui-navset .yui-nav a em {
border-top:solid 1px #a3a3a3;
border-bottom:0;
cursor:hand;
padding:0.2em .75em;
top:-1px; /* for 1px rounded corners */
position:relative;
}
.yui-sam-skin .yui-navset .yui-nav .selected a,
.yui-sam-skin .yui-navset .yui-nav a:focus,
.yui-sam-skin .yui-navset .yui-nav a:hover {
background:#214197 url(../../assets/skins/sam/sprite.png) repeat-x left -1400px; /* selected tab background */
color:#fff;
}
.yui-sam-skin .yui-navset .yui-nav .selected a em {
padding:0.3em 0.75em; /* raise selected tab */
}
.yui-sam-skin .yui-navset .yui-nav .selected a,
.yui-sam-skin .yui-navset .yui-nav a:hover,
.yui-sam-skin .yui-navset .yui-nav a:focus,
.yui-sam-skin .yui-navset .yui-nav a:hover em,
.yui-sam-skin .yui-navset .yui-nav a:focus em,
.yui-sam-skin .yui-navset .yui-nav .selected a em {
border-color:#243356; /* selected tab border color */
}
.yui-sam-skin .yui-navset .yui-nav {
border-bottom:1px solid #243356; /* tab list bottom border */
position:relative;
zoom:1;
}
.yui-sam-skin .yui-navset .yui-content {
background:#edf5ff; /* content background color */
border-top:5px solid #214095; /* color between tab list and content */
}
.yui-sam-skin .yui-navset .yui-content div {
border:1px solid #808080; /* content border */
border-top-color:#243356; /* different top border color */
padding:0.25em 0.5em; /* content padding */
}
.yui-sam-skin .yui-navset .yui-content div div { /* kill inheritance */
border:0;
padding:0;
}

115
www/extras/yui/examples/tabview/assets/tabview-core.css Normal file
View file

@ -0,0 +1,115 @@
/* resets */
.yui-navset .yui-nav ul,
.yui-navset .yui-nav ul li {
margin:0;
padding:0;
}
/* default space between tabs */
.yui-navset .yui-nav li,
.yui-navset .yui-navset-top .yui-nav li,
.yui-navset .yui-navset-bottom .yui-nav li {
margin:0 0.5em 0 0; /* horizontal tabs */
}
.yui-navset-left .yui-nav li,
.yui-navset-right .yui-nav li {
margin:0 0 0.5em; /* vertical tabs */
}
/* default width for side tabs */
.yui-navset .yui-navset-left .yui-nav,
.yui-navset .yui-navset-right .yui-nav,
.yui-navset-left .yui-nav,
.yui-navset-right .yui-nav { width:6em; }
.yui-navset-top .yui-nav,
.yui-navset-bottom .yui-nav {
width:auto;
}
.yui-navset .yui-navset-left,
.yui-navset-left { padding:0 0 0 6em; } /* map to nav width */
.yui-navset-right { padding:0 6em 0 0; } /* ditto */
.yui-navset-top,
.yui-navset-bottom {
padding:auto;
}
/* core */
.yui-nav,
.yui-nav li {
margin:0;
padding:0;
list-style:none;
}
.yui-navset li em { font-style:normal; }
.yui-navset {
position:relative; /* contain absolute positioned tabs (left/right) */
zoom:1;
}
.yui-navset .yui-content { zoom:1; }
.yui-navset .yui-nav li,
.yui-navset .yui-navset-top .yui-nav li, /* in case nested */
.yui-navset .yui-navset-bottom .yui-nav li {
display:inline-block;
display:-moz-inline-stack;
*display:inline; /* IE */
vertical-align:bottom; /* safari: for overlap */
cursor:pointer; /* gecko: due to -moz-inline-stack on anchor */
zoom:1; /* IE: kill space between horizontal tabs */
}
.yui-navset-left .yui-nav li,
.yui-navset-right .yui-nav li {
display:block;
}
.yui-navset .yui-nav a {
outline:0; /* gecko: keep from shifting */
}
.yui-navset .yui-nav a { position:relative; } /* IE: to allow overlap */
.yui-navset .yui-nav li a,
.yui-navset-top .yui-nav li a,
.yui-navset-bottom .yui-nav li a {
display:block;
display:inline-block;
vertical-align:bottom; /* safari: for overlap */
zoom:1;
}
.yui-navset-left .yui-nav li a,
.yui-navset-right .yui-nav li a {
display:block;
}
.yui-navset-bottom .yui-nav li a {
vertical-align:text-top; /* for inline overlap (reverse for Opera border bug) */
}
.yui-navset .yui-nav li a em,
.yui-navset-top .yui-nav li a em,
.yui-navset-bottom .yui-nav li a em { display:block; }
/* position left and right oriented tabs */
.yui-navset .yui-navset-left .yui-nav,
.yui-navset .yui-navset-right .yui-nav,
.yui-navset-left .yui-nav,
.yui-navset-right .yui-nav {
position:absolute;
z-index:1;
}
.yui-navset-top .yui-nav,
.yui-navset-bottom .yui-nav {
position:static;
}
.yui-navset .yui-navset-left .yui-nav,
.yui-navset-left .yui-nav { left:0; right:auto; }
.yui-navset .yui-navset-right .yui-nav,
.yui-navset-right .yui-nav { right:0; left:auto; }

107
www/extras/yui/examples/tabview/assets/tabview.css Normal file
View file

@ -0,0 +1,107 @@
/* default space between tabs */
.yui-navset .yui-nav li,
.yui-navset .yui-navset-top .yui-nav li,
.yui-navset .yui-navset-bottom .yui-nav li {
margin:0 0.5em 0 0; /* horizontal tabs */
}
.yui-navset-left .yui-nav li,
.yui-navset-right .yui-nav li {
margin:0 0 0.5em; /* vertical tabs */
}
/* default width for side tabs */
.yui-navset .yui-navset-left .yui-nav,
.yui-navset .yui-navset-right .yui-nav,
.yui-navset-left .yui-nav,
.yui-navset-right .yui-nav { width:6em; }
.yui-navset-top .yui-nav,
.yui-navset-bottom .yui-nav {
width:auto;
}
.yui-navset .yui-navset-left,
.yui-navset-left { padding:0 0 0 6em; } /* map to nav width */
.yui-navset-right { padding:0 6em 0 0; } /* ditto */
.yui-navset-top,
.yui-navset-bottom {
padding:auto;
}
/* core */
.yui-nav,
.yui-nav li {
margin:0;
padding:0;
list-style:none;
}
.yui-navset li em { font-style:normal; }
.yui-navset {
position:relative; /* contain absolute positioned tabs (left/right) */
zoom:1;
}
.yui-navset .yui-content { zoom:1; }
.yui-navset .yui-nav li,
.yui-navset .yui-navset-top .yui-nav li, /* in case nested */
.yui-navset .yui-navset-bottom .yui-nav li {
display:inline-block;
display:-moz-inline-stack;
*display:inline; /* IE */
vertical-align:bottom; /* safari: for overlap */
cursor:pointer; /* gecko: due to -moz-inline-stack on anchor */
zoom:1; /* IE: kill space between horizontal tabs */
}
.yui-navset-left .yui-nav li,
.yui-navset-right .yui-nav li {
display:block;
}
.yui-navset .yui-nav a {
outline:0; /* gecko: keep from shifting */
}
.yui-navset .yui-nav a { position:relative; } /* IE: to allow overlap */
.yui-navset .yui-nav li a,
.yui-navset-top .yui-nav li a,
.yui-navset-bottom .yui-nav li a {
display:block;
display:inline-block;
vertical-align:bottom; /* safari: for overlap */
zoom:1;
}
.yui-navset-left .yui-nav li a,
.yui-navset-right .yui-nav li a {
display:block;
}
.yui-navset-bottom .yui-nav li a {
vertical-align:text-top; /* for inline overlap (reverse for Opera border bug) */
}
.yui-navset .yui-nav li a em,
.yui-navset-top .yui-nav li a em,
.yui-navset-bottom .yui-nav li a em { display:block; }
/* position left and right oriented tabs */
.yui-navset .yui-navset-left .yui-nav,
.yui-navset .yui-navset-right .yui-nav,
.yui-navset-left .yui-nav,
.yui-navset-right .yui-nav {
position:absolute;
z-index:1;
}
.yui-navset-top .yui-nav,
.yui-navset-bottom .yui-nav {
position:static;
}
.yui-navset .yui-navset-left .yui-nav,
.yui-navset-left .yui-nav { left:0; right:auto; }
.yui-navset .yui-navset-right .yui-nav,
.yui-navset-right .yui-nav { right:0; left:auto; }

1
www/extras/yui/examples/tabview/assets/tabviewariaplugin-min.js vendored Normal file
View file

@ -0,0 +1 @@
(function(){var A=YAHOO.util.Dom,g=YAHOO.util.Event,Q=YAHOO.env.ua,F=YAHOO.lang,R=YAHOO.widget.TabView.prototype,N=R.initAttributes,M=R.addTab,U=(Q.gecko&&Q.gecko>=1.9)||(Q.ie&&Q.ie>=8),G={},H={},f="A",O="aria-",V="usearia",C="element",Y="activeTab",b="role",X="presentation",I="tab",W="href",E="contentEl",S="tabpanel",B="labelledby",e="describedby",J="activeIndex",T="tablist",d="keypress",L="keydown",c="id";var a=function(h,i){h.setAttribute(b,i);};var Z=function(h,j,i){h.setAttribute((O+j),i);};var K=function(i){var h;if(A.getAncestorByClassName(i,this.TAB_PARENT_CLASSNAME)){if(i.nodeName.toUpperCase()===f){h=i;}else{h=A.getAncestorByTagName(i,f);}}return h;};var P=function(j){var h=K.call(this,g.getTarget(j)),i=g.getCharCode(j);if(h&&(i===13||i===32)&&(h.parentNode!==this.get(Y).get(C))){this.set(J,H[this.get(c)][h.id]);}};var D=function(n){var l=K.call(this,g.getTarget(n)),i=G[this.get(c)],h,j,k,m=false;if(l){h=l.parentNode;switch(g.getCharCode(n)){case 37:case 38:j=A.getPreviousSibling(h);if(!j){j=i[i.length-1];}break;case 39:case 40:j=A.getNextSibling(h);if(!j){j=i[0];}break;}if(j){k=A.getFirstChild(j);l.tabIndex=-1;k.tabIndex=0;k.focus();}}};F.augmentObject(R,{addTab:function(n,k){M.apply(this,arguments);var j=this.get(c),i=G[j],m,h,l,o;if(this.get(V)){m=n.get(C);h=A.getFirstChild(m);h.tabIndex=(this.get(Y)===n)?0:-1;o=h.id||A.generateId(h);H[j][o]=this.getTabIndex(n);a(m,X);a(h,I);h.removeAttribute(W);l=n.get(E);i[i.length]=l;a(l,S);l.setAttribute(B,o);}},_setLabelledBy:function(i){var h=A.getFirstChild(this.get(C));if(this.get(V)&&h){Z(h,B,i);}},_setDescribedBy:function(i){var h=A.getFirstChild(this.get(C));if(this.get(V)&&h){Z(h,e,i);}},_setUseARIA:function(j){var h,i;if(j){i=this.get(c);if(!i){this.set(c,A.generateId());i=this.get(c);}G[i]=[];H[i]={};h=A.getFirstChild(this.get(C));a(h,T);this.on(d,P);this.on(L,D);}},initAttributes:function(h){this.setAttributeConfig(V,{value:(h.usearia||U),validator:F.isBoolean,writeOnce:true,method:this._setUseARIA});this.setAttributeConfig(B,{value:h.labelledby,validator:F.isString,method:this._setLabelledBy});this.setAttributeConfig(e,{value:h.describedby,validator:F.isString,method:this._setDescribedBy});N.call(this,h);if(U){this.set(V,true);}}},"initAttributes","_setUseARIA","_setLabelledBy","_setDescribedBy","addTab");}());

357
www/extras/yui/examples/tabview/assets/tabviewariaplugin.js vendored Normal file
View file

@ -0,0 +1,357 @@
(function () {
var Dom = YAHOO.util.Dom,
Event = YAHOO.util.Event,
UA = YAHOO.env.ua,
Lang = YAHOO.lang,
TabViewPrototype = YAHOO.widget.TabView.prototype,
fnTabViewInitAttributes = TabViewPrototype.initAttributes,
fnTabViewAddTab = TabViewPrototype.addTab,
m_bUseARIA = (UA.gecko && UA.gecko >= 1.9) || (UA.ie && UA.ie >= 8),
m_oTabListItems = {},
m_oTabIndexMap = {},
// Private constants for strings
_A = "A",
_ARIA_PREFIX = "aria-",
_USE_ARIA = "usearia",
_ELEMENT = "element",
_ACTIVE_TAB = "activeTab",
_ROLE = "role",
_PRESENTATION = "presentation",
_TAB = "tab",
_HREF = "href",
_CONTENT_EL = "contentEl",
_TAB_PANEL = "tabpanel",
_LABELLED_BY = "labelledby",
_DESCRIBED_BY = "describedby",
_ACTIVE_INDEX = "activeIndex",
_TAB_LIST = "tablist",
_KEY_PRESS = "keypress",
_KEY_DOWN = "keydown",
_ID = "id";
var setARIARole = function (element, role) {
element.setAttribute(_ROLE, role);
};
var setARIAProperty = function (element, property, value) {
element.setAttribute((_ARIA_PREFIX + property), value);
};
// Returns the <A> element representing each Tab in the TabView.
var getTabAnchor = function (element) {
var oTabAnchor;
if (Dom.getAncestorByClassName(element, this.TAB_PARENT_CLASSNAME)) {
if (element.nodeName.toUpperCase() === _A) {
oTabAnchor = element;
}
else {
oTabAnchor = Dom.getAncestorByTagName(element, _A);
}
}
return oTabAnchor;
};
var onKeyPress = function (event) {
var oTabAnchor = getTabAnchor.call(this, Event.getTarget(event)),
nCharCode = Event.getCharCode(event);
if (oTabAnchor && (nCharCode === 13 || nCharCode === 32) &&
(oTabAnchor.parentNode !== this.get(_ACTIVE_TAB).get(_ELEMENT))) {
this.set(_ACTIVE_INDEX, m_oTabIndexMap[this.get(_ID)][oTabAnchor.id]);
}
};
var onKeyDown = function (event) {
var oCurrentTabAnchor = getTabAnchor.call(this, Event.getTarget(event)),
aTabListItems = m_oTabListItems[this.get(_ID)],
oCurrentTabLI,
oNextTabLI,
oNextTabAnchor,
bArrowKeyPressed = false;
if (oCurrentTabAnchor) {
oCurrentTabLI = oCurrentTabAnchor.parentNode;
switch (Event.getCharCode(event)) {
case 37: // Left
case 38: // Up
oNextTabLI = Dom.getPreviousSibling(oCurrentTabLI);
if (!oNextTabLI) {
oNextTabLI = aTabListItems[aTabListItems.length-1];
}
break;
case 39: // Right
case 40: // Down
oNextTabLI = Dom.getNextSibling(oCurrentTabLI);
if (!oNextTabLI) {
oNextTabLI = aTabListItems[0];
}
break;
}
if (oNextTabLI) {
oNextTabAnchor = Dom.getFirstChild(oNextTabLI);
oCurrentTabAnchor.tabIndex = -1;
oNextTabAnchor.tabIndex = 0;
oNextTabAnchor.focus();
}
}
};
Lang.augmentObject(TabViewPrototype, {
addTab: function (tab, index) {
fnTabViewAddTab.apply(this, arguments);
var sID = this.get(_ID),
aTabListItems = m_oTabListItems[sID],
oTabEl,
oTabAnchor,
oTabContentEl,
sTabId;
if (this.get(_USE_ARIA)) {
oTabEl = tab.get(_ELEMENT);
oTabAnchor = Dom.getFirstChild(oTabEl);
// Set the "tabIndex" attribute of each Tab's <A> element: The
// "tabIndex" of the active Tab's <A> element is set to 0, the others to -1.
// This improves the keyboard accessibility of the TabView by placing
// only one Tab in the browser's tab index by default, allowing the user
// to easily skip over the control when navigating the page with the tab key.
oTabAnchor.tabIndex = (this.get(_ACTIVE_TAB) === tab) ? 0 : -1;
// Create a map that links the ids of each Tab's <A> element to
// the Tab's "index" attribute to make it possible to retrieve a Tab
// instance reference by id.
sTabId = oTabAnchor.id || Dom.generateId(oTabAnchor);
m_oTabIndexMap[sID][sTabId] = this.getTabIndex(tab);
// Need to set the "role" attribute of each Tab's <LI> element to
// "presentation" so that Window-Eyes recognizes that each Tab belongs to
// the same TabList. Without this, Window-Eyes will announce each Tab as
// being "1 of 1" as opposed to "1 of 3," or "2 of 3".
setARIARole(oTabEl, _PRESENTATION);
setARIARole(oTabAnchor, _TAB);
// JAWS announces the value of the "href" attribute of each Tab's <A>
// element when it recieves focus. Ideally JAWS would allow the
// applied "role" attribute of "tab" to take precedence over the default
// role of the <A> element like NVDA and Window-Eyes do. It is
// possible to fix this problem by removing the "href" attribute from
// the <A>.
oTabAnchor.removeAttribute(_HREF);
oTabContentEl = tab.get(_CONTENT_EL);
aTabListItems[aTabListItems.length] = oTabContentEl;
setARIARole(oTabContentEl, _TAB_PANEL);
// Set the "aria-labelledby" attribute for the TabPanel <LI> element to
// the id of its corresponding Tab's <A> element. Doing so enables the
// screen reader to announce the label of the Tab for each TabPanel when
// the first element in a TabPanel receives focus, providing the user
// with some context as to where they are.
oTabContentEl.setAttribute(_LABELLED_BY, sTabId);
}
},
_setLabelledBy: function (id) {
var oTabList = Dom.getFirstChild(this.get(_ELEMENT));
if (this.get(_USE_ARIA) && oTabList) {
setARIAProperty(oTabList, _LABELLED_BY, id);
}
},
_setDescribedBy: function (id) {
var oTabList = Dom.getFirstChild(this.get(_ELEMENT));
if (this.get(_USE_ARIA) && oTabList) {
setARIAProperty(oTabList, _DESCRIBED_BY, id);
}
},
_setUseARIA: function (p_bUseARIA) {
var oTabList,
sID;
if (p_bUseARIA) {
sID = this.get(_ID);
if (!sID) {
this.set(_ID, Dom.generateId());
sID = this.get(_ID);
}
m_oTabListItems[sID] = [];
m_oTabIndexMap[sID] = {};
oTabList = Dom.getFirstChild(this.get(_ELEMENT));
// Set the "role" attribute of the <UL> encapsulating the Tabs to "tablist"
setARIARole(oTabList, _TAB_LIST);
// Add a keypress listener that toggles the active Tab instance when the user
// presses the Enter key. This is necessary because the removal of the "href"
// attribute from each Tab's <A> element (for JAWS support) causes the
// TabView's default Enter key support to stop working. Support for the Space
// Bar is also added as an additional convience for the user.
this.on(_KEY_PRESS, onKeyPress);
// Keydown event listener for the TabView that provides support for
// using the arrow keys to move focus between each Tab.
this.on(_KEY_DOWN, onKeyDown);
}
},
initAttributes: function (p_oAttributes) {
/**
* @attribute usearia
* @description Boolean indicating if use of the WAI-ARIA Roles and States should
* be enabled.
* @type Boolean
* @default true for Firefox 3 and IE 8, false for all other browsers.
*/
this.setAttributeConfig(_USE_ARIA, {
value: (p_oAttributes.usearia || m_bUseARIA),
validator: Lang.isBoolean,
writeOnce: true,
method: this._setUseARIA
});
/**
* @attribute labelledby
* @description String representing the id of the element that labels the TabView.
* Maps directly to the <a href="http://www.w3.org/TR/wai-aria/#labelledby">
* <code>aria-labelledby</code></a> attribute.
* @type String
* @default null
*/
this.setAttributeConfig(_LABELLED_BY, {
value: p_oAttributes.labelledby,
validator: Lang.isString,
method: this._setLabelledBy
});
/**
* @attribute describedby
* @description String representing the id of the element that describes the TabView.
* Maps directly to the <a href="http://www.w3.org/TR/wai-aria/#describedby">
* <code>aria-describedby</code></a> attribute.
* @type String
* @default null
*/
this.setAttributeConfig(_DESCRIBED_BY, {
value: p_oAttributes.describedby,
validator: Lang.isString,
method: this._setDescribedBy
});
fnTabViewInitAttributes.call(this, p_oAttributes);
if (m_bUseARIA) {
this.set(_USE_ARIA, true);
}
}
}, "initAttributes", "_setUseARIA", "_setLabelledBy", "_setDescribedBy", "addTab");
}());

248
www/extras/yui/examples/tabview/datasrc.html Normal file
View file

File diff suppressed because one or more lines are too long

94
www/extras/yui/examples/tabview/datasrc_clean.html Normal file
View file

@ -0,0 +1,94 @@
<!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>Getting Content from an External Source</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="../../build/tabview/assets/skins/sam/tabview.css" />
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/connection/connection-min.js"></script>
<script type="text/javascript" src="../../build/element/element-beta-min.js"></script>
<script type="text/javascript" src="../../build/tabview/tabview-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
.yui-navset div.loading div {
background:url(assets/loading.gif) no-repeat center center;
height:8em; /* hold some space while loading */
}
#example-canvas h2 {padding: 0 0 .5em 0;}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Getting Content from an External Source</h1>
<div class="exampleIntro">
<p>This demonstrates how to load Tab content from an external data source.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<div id="container"><h2 class="first">Browser News</h2></div>
<script type="text/javascript">
(function() {
var tabView = new YAHOO.widget.TabView();
tabView.addTab( new YAHOO.widget.Tab({
label: 'Opera',
dataSrc: 'assets/news.php?query=opera+browser',
cacheData: true,
active: true
}));
tabView.addTab( new YAHOO.widget.Tab({
label: 'Firefox',
dataSrc: 'assets/news.php?query=firefox+browser',
cacheData: true
}));
tabView.addTab( new YAHOO.widget.Tab({
label: 'Explorer',
dataSrc: 'assets/news.php?query=microsoft+explorer+browser',
cacheData: true
}));
tabView.addTab( new YAHOO.widget.Tab({
label: 'Safari',
dataSrc: 'assets/news.php?query=apple+safari+browser',
cacheData: true
}));
YAHOO.log("The example has finished loading; as you interact with it, you'll see log messages appearing here.", "info", "example");
tabView.appendTo('container');
})();
</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>

252
www/extras/yui/examples/tabview/datasrc_log.html Normal file
View file

File diff suppressed because one or more lines are too long

199
www/extras/yui/examples/tabview/frommarkup.html Normal file
View file

File diff suppressed because one or more lines are too long

65
www/extras/yui/examples/tabview/frommarkup_clean.html Normal file
View file

@ -0,0 +1,65 @@
<!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>Build from Markup</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="../../build/tabview/assets/skins/sam/tabview.css" />
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/element/element-beta-min.js"></script>
<script type="text/javascript" src="../../build/tabview/tabview-min.js"></script>
<!--there is no custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Build from Markup</h1>
<div class="exampleIntro">
<p>This demonstrates how to build a TabView from markup.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<div id="demo" class="yui-navset">
<ul class="yui-nav">
<li><a href="#tab1"><em>Tab One Label</em></a></li>
<li class="selected"><a href="#tab2"><em>Tab Two Label</em></a></li>
<li><a href="#tab3"><em>Tab Three Label</em></a></li>
</ul>
<div class="yui-content">
<div id="tab1"><p>Tab One Content</p></div>
<div id="tab2"><p>Tab Two Content</p></div>
<div id="tab3"><p>Tab Three Content</p></div>
</div>
</div>
<script>
(function() {
var tabView = new YAHOO.widget.TabView('demo');
YAHOO.log("The example has finished loading; as you interact with it, you'll see log messages appearing here.", "info", "example");
})();
</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>

203
www/extras/yui/examples/tabview/frommarkup_log.html Normal file
View file

File diff suppressed because one or more lines are too long

221
www/extras/yui/examples/tabview/fromscript.html Normal file
View file

File diff suppressed because one or more lines are too long

74
www/extras/yui/examples/tabview/fromscript_clean.html Normal file
View file

@ -0,0 +1,74 @@
<!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>Build from Script</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="../../build/tabview/assets/skins/sam/tabview.css" />
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/element/element-beta-min.js"></script>
<script type="text/javascript" src="../../build/tabview/tabview-min.js"></script>
<!--there is no custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Build from Script</h1>
<div class="exampleIntro">
<p>This demonstrates how to build a TabView from JavaScript.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<div id="container"></div>
<script type="text/javascript">
(function() {
var tabView = new YAHOO.widget.TabView();
tabView.addTab( new YAHOO.widget.Tab({
label: 'lorem',
content: '<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.</p>',
active: true
}));
tabView.addTab( new YAHOO.widget.Tab({
label: 'ipsum',
content: '<ul><li><a href="#">Lorem ipsum dolor sit amet.</a></li><li><a href="#">Lorem ipsum dolor sit amet.</a></li><li><a href="#">Lorem ipsum dolor sit amet.</a></li><li><a href="#">Lorem ipsum dolor sit amet.</a></li></ul>'
}));
tabView.addTab( new YAHOO.widget.Tab({
label: 'dolor',
content: '<form action="#"><fieldset><legend>Lorem Ipsum</legend><label for="foo"> <input id="foo" name="foo"></label><input type="submit" value="submit"></fieldset></form>'
}));
YAHOO.log("The example has finished loading; as you interact with it, you'll see log messages appearing here.", "info", "example");
tabView.appendTo('container');
})();
</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>

225
www/extras/yui/examples/tabview/fromscript_log.html Normal file
View file

File diff suppressed because one or more lines are too long

95
www/extras/yui/examples/tabview/index.html Normal file
View file

File diff suppressed because one or more lines are too long

237
www/extras/yui/examples/tabview/removetab.html Normal file
View file

File diff suppressed because one or more lines are too long

86
www/extras/yui/examples/tabview/removetab_clean.html Normal file
View file

@ -0,0 +1,86 @@
<!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>Removing Tabs</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="../../build/tabview/assets/skins/sam/tabview.css" />
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/element/element-beta-min.js"></script>
<script type="text/javascript" src="../../build/tabview/tabview-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
.yui-navset button {
position:absolute;
top:0;
right:0;
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Removing Tabs</h1>
<div class="exampleIntro">
<p>This demonstrates how to dynamically remove tabs from a TabView widget.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<div id="demo" class="yui-navset">
<ul class="yui-nav">
<li><a href="#tab1"><em>Tab One Label</em></a></li>
<li class="selected"><a href="#tab2"><em>Tab Two Label</em></a></li>
<li><a href="#tab3"><em>Tab Three Label</em></a></li>
</ul>
<div class="yui-content">
<div id="tab1"><p>Tab One Content</p></div>
<div id="tab2"><p>Tab Two Content</p></div>
<div id="tab3"><p>Tab Three Content</p></div>
</div>
</div>
<script>
(function() {
var tabView = new YAHOO.widget.TabView('demo');
var removeTab = function() {
tabView.removeTab(tabView.get('activeTab'));
};
var button = document.createElement('button');
button.innerHTML = 'remove tab';
YAHOO.util.Event.on(button, 'click', removeTab);
tabView.appendChild(button);
YAHOO.log("The example has finished loading; as you interact with it, you'll see log messages appearing here.", "info", "example");
})();
</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>

241
www/extras/yui/examples/tabview/removetab_log.html Normal file
View file

File diff suppressed because one or more lines are too long

291
www/extras/yui/examples/tabview/skinning.html Normal file
View file

File diff suppressed because one or more lines are too long

68
www/extras/yui/examples/tabview/skinning_clean.html Normal file
View file

@ -0,0 +1,68 @@
<!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>Skinning 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 rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="../../build/tabview/assets/skins/sam/tabview.css" />
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/element/element-beta-min.js"></script>
<script type="text/javascript" src="../../build/tabview/tabview-min.js"></script>
<!--there is no custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Skinning TabView</h1>
<div class="exampleIntro">
<p>This demonstrates how to customize the TabView skin.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<div id="demo" class="yui-navset">
<ul class="yui-nav">
<li><a href="#tab1"><em>Tab One Label</em></a></li>
<li class="selected"><a href="#tab2"><em>Tab Two Label</em></a></li>
<li><a href="#tab3"><em>Tab Three Label</em></a></li>
</ul>
<div class="yui-content">
<div><p>Tab One Content</p></div>
<div><p>Tab Two Content</p></div>
<div><p>Tab Three Content</p></div>
</div>
</div>
<script>
(function() {
var tabView = new YAHOO.widget.TabView('demo');
YAHOO.log("The example has finished loading; as you interact with it, you'll see log messages appearing here.", "info", "example");
})();
</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>

295
www/extras/yui/examples/tabview/skinning_log.html Normal file
View file

File diff suppressed because one or more lines are too long

530
www/extras/yui/examples/tabview/tabview-ariaplugin.html Normal file
View file

File diff suppressed because one or more lines are too long

210
www/extras/yui/examples/tabview/tabview-ariaplugin_clean.html Normal file
View file

@ -0,0 +1,210 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Using the TabView ARIA Plugin</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="../../build/tabview/assets/skins/sam/tabview.css" />
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/connection/connection-min.js"></script>
<script type="text/javascript" src="../../build/element/element-beta-min.js"></script>
<script type="text/javascript" src="../../build/tabview/tabview-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
/*
The TabView ARIA Plugin removes the "href" attribute from the <A> element of each
Tab, resulting in the focus outline no longer be rendered in Gecko-based browsers when the
<A> element is focused. For this reason, it is necessary to restore the focus outline
for the <A>.
*/
.yui-skin-sam .yui-navset .yui-nav a[role=tab]:focus {
outline: dotted 1px #000;
}
/*
Hide the instructional text in the H1 and the content of the LiveRegion outside the
viewport boundaries so it is only readable by users of screen readers.
*/
#tabview-title em,
.yui-navset div[role=log] {
position: absolute;
left: -999em;
}
</style>
<script type="text/javascript" src="../tabview/assets/tabviewariaplugin.js"></script>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Using the TabView ARIA Plugin</h1>
<div class="exampleIntro">
<p>
The TabView ARIA Plugin makes it easy to use the
<a href="http://www.w3.org/TR/wai-aria/">WAI-ARIA Roles and States</a> with the TabView control.
Using the ARIA plugin, a TabView is more interoperable with assistive technologies (AT),
such as screen readers, making it more accessible to users with disabilities.
</p>
<p>
<a href="http://video.yahoo.com/watch/3199866/9051193">Watch a screen cast of this example
running in Firefox 3 with the NVDA screen reader</a>, to see immediately the benefits that
ARIA provides, or
<a href="http://www.nvda-project.org/wiki/Snapshots">download the latest development snapshot of
NVDA</a> to test this example for yourself.
</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<div id="container">
<h2 class="first" id="tabview-title">Browser News</h2>
</div>
<script type="text/javascript">
(function() {
var Dom = YAHOO.util.Dom,
UA = YAHOO.env.ua,
oTitle,
oTabViewEl,
oLog,
sInstructionalText;
var oTabView = new YAHOO.widget.TabView();
oTabView.addTab( new YAHOO.widget.Tab({
label: 'Opera',
dataSrc: 'assets/news.php?query=opera+browser',
cacheData: true,
active: true
}));
oTabView.addTab( new YAHOO.widget.Tab({
label: 'Firefox',
dataSrc: 'assets/news.php?query=firefox+browser',
cacheData: true
}));
oTabView.addTab( new YAHOO.widget.Tab({
label: 'Explorer',
dataSrc: 'assets/news.php?query=microsoft+explorer+browser',
cacheData: true
}));
oTabView.addTab( new YAHOO.widget.Tab({
label: 'Safari',
dataSrc: 'assets/news.php?query=apple+safari+browser',
cacheData: true
}));
oTabView.appendTo('container');
// Make use of some additional ARIA Roles and States to further enhance the TabView if the
// browser supports ARIA.
if ((UA.gecko && UA.gecko >= 1.9) || (UA.ie && UA.ie >= 8)) {
// Use the "labelledby" attribute provided by the ARIA plugin for TabView to label the
// TabView with the <h2>, and append some instructional text to the <H2> that tells users
// of screen readers how to use TabView. This text will be read when the first Tab is
// focused. Since this text is specifically for users of screen readers, it will be
// hidden off screen via CSS.
oTitle = Dom.get("tabview-title");
sInstructionalText = oTitle.innerHTML;
oTitle.innerHTML = (sInstructionalText + "<em>Press the space bar or enter key to load the content of each tab.</em>");
oTabView.set("labelledby", "tabview-title");
// Since the content of each Tab is loaded via XHR, append a Live Region to the TabView's
// root element that will be used to message users about the status of each Tab's content.
oTabViewEl = oTabView.get("element");
oLog = oTabViewEl.ownerDocument.createElement("div");
oLog.setAttribute("role", "log");
oLog.setAttribute("aria-live", "polite");
oTabViewEl.appendChild(oLog);
// "activeTabChange" event handler used to notify the screen reader that
// the content of the Tab is loading by updaing the content of the Live Region.
oTabView.on("activeTabChange", function (event) {
var oTabEl = this.get("activeTab").get("element"),
sTabLabel = oTabEl.textContent || oTabEl.innerText,
oCurrentMessage = Dom.getFirstChild(oLog),
oMessage = oLog.ownerDocument.createElement("p");
oMessage.innerHTML = "Please wait. Content loading for " + sTabLabel + " property page.";
if (oCurrentMessage) {
oLog.replaceChild(oMessage, oCurrentMessage);
}
else {
oLog.appendChild(oMessage);
}
});
// "dataLoadedChange" event handler used to notify the screen reader that
// the content of the Tab has finished loading by updating the content of the Live Region.
var onDataLoadedChange = function (event) {
var oTabEl = this.get("element"),
sTabLabel = oTabEl.textContent || oTabEl.innerText,
oCurrentMessage = Dom.getFirstChild(oLog),
oMessage = oLog.ownerDocument.createElement("p");
oMessage.innerHTML = "Content loaded for " + sTabLabel + " property page.";
if (oCurrentMessage) {
oLog.replaceChild(oMessage, oCurrentMessage);
}
else {
oLog.appendChild(oMessage);
}
};
oTabView.getTab(0).on("dataLoadedChange", onDataLoadedChange);
oTabView.getTab(1).on("dataLoadedChange", onDataLoadedChange);
oTabView.getTab(2).on("dataLoadedChange", onDataLoadedChange);
oTabView.getTab(3).on("dataLoadedChange", onDataLoadedChange);
}
})();
</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>

534
www/extras/yui/examples/tabview/tabview-ariaplugin_log.html Normal file
View file

File diff suppressed because one or more lines are too long