upgraded to yui 0.12.0
upgraded to yui-ext 0.33 rc2
This commit is contained in:
JT Smith
parent
62b3d90db7
commit
cfd09a5cb6
1271 changed files with 539033 additions and 0 deletions
73
www/extras/yui/examples/tabview/activation.html
Normal file
73
www/extras/yui/examples/tabview/activation.html
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>TabView Example - Changing Activation Event</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="css/example.css">
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/tabview/assets/tabs.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../build/tabview/assets/border_tabs.css">
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
|
||||
<script type="text/javascript" src="../../build/event/event.js"></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
||||
<script type="text/javascript" src="../../build/tabview/tabview.js"></script>
|
||||
|
||||
<style type="text/css">
|
||||
#demo {
|
||||
width:30em; /* arbitrary width */
|
||||
}
|
||||
|
||||
#demo .yui-content {
|
||||
padding:1em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript">
|
||||
YAHOO.example.init = function() {
|
||||
var tabView = new YAHOO.widget.TabView('demo');
|
||||
tabView.on('contentReady', function() {
|
||||
this.getTab(1).set('activationEvent', 'mouseover');
|
||||
});
|
||||
};
|
||||
|
||||
YAHOO.example.init();
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="doc">
|
||||
<h1>TabView Example - Changing Activation Event</h1>
|
||||
<p>This example demonstrates how to change a tab's activationEvent.</p>
|
||||
|
||||
<div id="demo" class="yui-navset">
|
||||
<ul class="yui-nav">
|
||||
<li class="selected"><a href="#lorem"><em>lorem</em></a></li>
|
||||
<li><a href="#ipsum"><em>ipsum</em></a></li>
|
||||
<li><a href="#dolor"><em>dolor</em></a></li>
|
||||
</ul>
|
||||
<div class="yui-content">
|
||||
<div id="lorem">
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.</p>
|
||||
</div>
|
||||
<div id="ispum">
|
||||
<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>
|
||||
</div>
|
||||
<div id="dolor">
|
||||
<form action="#">
|
||||
<fieldset>
|
||||
<legend>Lorem Ipsum</legend>
|
||||
<label for="foo"> <input id="foo" name="foo"></label>
|
||||
<input type="submit" value="submit">
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
73
www/extras/yui/examples/tabview/add_events.html
Normal file
73
www/extras/yui/examples/tabview/add_events.html
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>TabView Example - Adding Event Listeners</title>
|
||||
<link rel="stylesheet" type="text/css" href="css/example.css">
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/tabview/assets/tabs.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../build/tabview/assets/border_tabs.css">
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
|
||||
<script type="text/javascript" src="../../build/event/event.js"></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
||||
<script type="text/javascript" src="../../build/tabview/tabview.js"></script>
|
||||
|
||||
<style type="text/css">
|
||||
#demo { width:30em; }
|
||||
#demo .yui-content { padding:1em; } /* pad content container */
|
||||
</style>
|
||||
|
||||
<script type="text/javascript">
|
||||
YAHOO.example.init = function() {
|
||||
var tabView = new YAHOO.widget.TabView('demo');
|
||||
|
||||
tabView.on('contentReady', function() {
|
||||
|
||||
var handleClick = function(e) {
|
||||
alert('clicked');
|
||||
};
|
||||
|
||||
this.getTab(1).addListener('click', handleClick);
|
||||
});
|
||||
};
|
||||
|
||||
YAHOO.example.init();
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="doc">
|
||||
<h1>TabView Example - Adding Event Listeners</h1>
|
||||
<p>This example demonstrates how to add listen for tab events.</p>
|
||||
|
||||
<div id="demo" class="yui-navset">
|
||||
<ul class="yui-nav">
|
||||
<li class="selected"><a href="#lorem"><em>lorem</em></a></li>
|
||||
<li><a href="#ipsum"><em>ipsum</em></a></li>
|
||||
<li><a href="#dolor"><em>dolor</em></a></li>
|
||||
</ul>
|
||||
<div class="yui-content">
|
||||
<div id="lorem">
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.</p>
|
||||
</div>
|
||||
<div id="ispum">
|
||||
<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>
|
||||
</div>
|
||||
<div id="dolor">
|
||||
<form action="#">
|
||||
<fieldset>
|
||||
<legend>Lorem Ipsum</legend>
|
||||
<label for="foo"> <input id="foo" name="foo"></label>
|
||||
<input type="submit" value="submit">
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
81
www/extras/yui/examples/tabview/add_tabs.html
Normal file
81
www/extras/yui/examples/tabview/add_tabs.html
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>TabView Example - Adding Tabs</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="css/example.css">
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/tabview/assets/tabs.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../build/tabview/assets/border_tabs.css">
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
|
||||
<script type="text/javascript" src="../../build/event/event.js"></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
||||
<script type="text/javascript" src="../../build/tabview/tabview.js"></script>
|
||||
|
||||
<style type="text/css">
|
||||
#demo { width:30em; }
|
||||
#demo .yui-content { padding:1em; } /* pad content container */
|
||||
</style>
|
||||
|
||||
<script type="text/javascript">
|
||||
YAHOO.example.init = function() {
|
||||
var tabView = new YAHOO.widget.TabView('demo');
|
||||
|
||||
tabView.on('contentReady', function() {
|
||||
|
||||
tabView.addTab(new YAHOO.widget.Tab({
|
||||
label: 'foo',
|
||||
content: '<p>foo</p>'
|
||||
}));
|
||||
|
||||
tabView.addTab(
|
||||
new YAHOO.widget.Tab({
|
||||
label: 'bar',
|
||||
content: '<p>bar</p>',
|
||||
active: true
|
||||
})
|
||||
, 1); /* insert at position 1 */
|
||||
});
|
||||
};
|
||||
|
||||
YAHOO.example.init();
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="doc">
|
||||
<h1>TabView Example - Adding Tabs</h1>
|
||||
<p>This example demonstrates how to add a tab.</p>
|
||||
|
||||
<div id="demo" class="yui-navset">
|
||||
<ul class="yui-nav">
|
||||
<li class="selected"><a href="#lorem"><em>lorem</em></a></li>
|
||||
<li><a href="#ipsum"><em>ipsum</em></a></li>
|
||||
<li><a href="#dolor"><em>dolor</em></a></li>
|
||||
</ul>
|
||||
<div class="yui-content">
|
||||
<div id="lorem">
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.</p>
|
||||
</div>
|
||||
<div id="ispum">
|
||||
<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>
|
||||
</div>
|
||||
<div id="dolor">
|
||||
<form action="#">
|
||||
<fieldset>
|
||||
<legend>Lorem Ipsum</legend>
|
||||
<label for="foo"> <input id="foo" name="foo"></label>
|
||||
<input type="submit" value="submit">
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
55
www/extras/yui/examples/tabview/basic_from_js.html
Normal file
55
www/extras/yui/examples/tabview/basic_from_js.html
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>TabView Example - Basic From Javascript</title>
|
||||
<link rel="stylesheet" type="text/css" href="css/example.css">
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/tabview/assets/tabs.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../build/tabview/assets/border_tabs.css">
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
|
||||
<script type="text/javascript" src="../../build/event/event.js"></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
||||
<script type="text/javascript" src="../../build/tabview/tabview.js"></script>
|
||||
|
||||
<style type="text/css">
|
||||
#demo { width:30em; }
|
||||
#demo .yui-content { padding:1em; } /* pad content container */
|
||||
</style>
|
||||
|
||||
<script type="text/javascript">
|
||||
YAHOO.example.init = function( ){
|
||||
var tabView = new YAHOO.widget.TabView( { id: 'demo' } );
|
||||
|
||||
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: 'ispum',
|
||||
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.util.Event.onContentReady('doc', function() {
|
||||
tabView.appendTo(this); /* append to #doc */
|
||||
});
|
||||
};
|
||||
|
||||
YAHOO.example.init();
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="doc">
|
||||
<h1>TabView Example - Basic From Javascript</h1>
|
||||
<p>This example demonstrates how to create a basic TabView widget entirely from Javascript.</p>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
65
www/extras/yui/examples/tabview/basic_from_markup.html
Normal file
65
www/extras/yui/examples/tabview/basic_from_markup.html
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>TabView Example - Basic From Existing Markup</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="css/example.css">
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/tabview/assets/tabs.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../build/tabview/assets/border_tabs.css">
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
|
||||
<script type="text/javascript" src="../../build/event/event.js"></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
||||
<script type="text/javascript" src="../../build/tabview/tabview.js"></script>
|
||||
|
||||
<style type="text/css">
|
||||
#demo { width:30em; }
|
||||
#demo .yui-content { padding:1em; } /* pad content container */
|
||||
</style>
|
||||
|
||||
<script type="text/javascript">
|
||||
YAHOO.example.init = function() {
|
||||
var tabView = new YAHOO.widget.TabView('demo');
|
||||
};
|
||||
|
||||
YAHOO.example.init();
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="doc">
|
||||
<h1>TabView Example - Basic From Existing Markup</h1>
|
||||
<p>This example demonstrates how to create a basic TabView widget from existing markup.</p>
|
||||
|
||||
<div id="demo" class="yui-navset">
|
||||
<ul class="yui-nav">
|
||||
<li class="selected"><a href="#lorem"><em>lorem</em></a></li>
|
||||
<li><a href="#ipsum"><em>ipsum</em></a></li>
|
||||
<li><a href="#dolor"><em>dolor</em></a></li>
|
||||
</ul>
|
||||
<div class="yui-content">
|
||||
<div id="lorem">
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.</p>
|
||||
</div>
|
||||
<div id="ispum">
|
||||
<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>
|
||||
</div>
|
||||
<div id="dolor">
|
||||
<form action="#">
|
||||
<fieldset>
|
||||
<legend>Lorem Ipsum</legend>
|
||||
<label for="foo"> <input id="foo" name="foo"></label>
|
||||
<input type="submit" value="submit">
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>TabView Example - Basic From Existing Markup</title>
|
||||
<link rel="stylesheet" type="text/css" href="css/example.css">
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/tabview/assets/tabs.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../build/tabview/assets/border_tabs.css">
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
|
||||
<script type="text/javascript" src="../../build/event/event.js"></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
||||
<script type="text/javascript" src="../../build/tabview/tabview.js"></script>
|
||||
|
||||
|
||||
<style type="text/css">
|
||||
#demo { width:30em; }
|
||||
#demo .yui-content { padding:1em; } /* pad content container */
|
||||
</style>
|
||||
|
||||
<script type="text/javascript">
|
||||
(function() {
|
||||
var tabView = new YAHOO.widget.TabView({ id: 'demo' });
|
||||
|
||||
|
||||
YAHOO.util.Event.onContentReady('nav', function() {
|
||||
var labels = this.getElementsByTagName('a'); // extract labels from "nav" links
|
||||
|
||||
for (var i = 0, len = labels.length; i < len; i++) {
|
||||
tabView.addTab( new YAHOO.widget.Tab({
|
||||
label: labels[i].innerHTML,
|
||||
content: '<h2>' + labels[i].innerHTML +
|
||||
'</h2><p>Lorem ipsum dolor.</p>'
|
||||
}));
|
||||
}
|
||||
|
||||
tabView.set('activeIndex', 0); // make first tab active
|
||||
|
||||
tabView.appendTo(this.parentNode, this); // insert before "nav"
|
||||
this.parentNode.removeChild(this); // remove "nav"
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
|
||||
<style type="text/css">
|
||||
#demo .yui-content {
|
||||
height:8em;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="doc">
|
||||
<h1>TabView Example - Basic From Existing Markup</h1>
|
||||
<p>This example demonstrates how to create a basic TabView widget from existing markup.</p>
|
||||
|
||||
<ul id="nav">
|
||||
<li><a href="#lorem">lorem</a></li>
|
||||
<li><a href="#ipsum">ipsum</a></li>
|
||||
<li><a href="#dolor">dolor</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
52
www/extras/yui/examples/tabview/css/example.css
Normal file
52
www/extras/yui/examples/tabview/css/example.css
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
/*
|
||||
Copyright (c) 2006, Yahoo! Inc. All rights reserved.
|
||||
Code licensed under the BSD License:
|
||||
http://developer.yahoo.net/yui/license.txt
|
||||
Version: 0.10.0
|
||||
*/
|
||||
|
||||
body {
|
||||
margin:0;
|
||||
font:small arial;
|
||||
}
|
||||
|
||||
#doc {
|
||||
margin:10px;
|
||||
}
|
||||
|
||||
ul, li {
|
||||
list-style:none;
|
||||
}
|
||||
|
||||
form, p, ul, li, h1, h2, h3, h4, h5, h6 {
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
p {
|
||||
padding:1em 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color:#666;
|
||||
font:bold 150% palatino, georgia;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font:bold 130% arial;
|
||||
margin:1em 0 0.5em;
|
||||
}
|
||||
|
||||
#hd img {
|
||||
vertical-align:middle;
|
||||
}
|
||||
|
||||
#hd h1 {
|
||||
display:inline;
|
||||
margin:0 0 0 20px;
|
||||
vertical-align:middle;
|
||||
}
|
||||
|
||||
#examples li {
|
||||
padding:0.5em 1em;
|
||||
}
|
||||
27
www/extras/yui/examples/tabview/css/module_tabs.css
Normal file
27
www/extras/yui/examples/tabview/css/module_tabs.css
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
|
||||
.yui-navset .yui-nav li { /* tabs */
|
||||
font:77%/1.2 verdana;
|
||||
margin-bottom:-10px; /* pointer overlap */
|
||||
padding-bottom:6px; /* make room for pointer */
|
||||
position:relative;
|
||||
top:-2px; /* pull above nav */
|
||||
}
|
||||
|
||||
|
||||
.yui-navset .yui-content { /* content pane */
|
||||
background:#fff;
|
||||
border:1px solid #dcdcdc;
|
||||
}
|
||||
|
||||
.yui-navset .yui-nav {
|
||||
background:#e1e1e1 url(../img/newcats_bkgd.gif) repeat-x;
|
||||
border:1px solid #dcdcdc;
|
||||
}
|
||||
|
||||
.yui-navset .yui-nav .selected a {
|
||||
background:#293852 url(../img/tab_right.gif) no-repeat top right;
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
.yui-navset .yui-nav .selected { background:url(../img/ptr.gif) no-repeat bottom center; }
|
||||
.yui-navset .yui-nav .selected em { background:url(../img/tab_left.gif) no-repeat; }
|
||||
75
www/extras/yui/examples/tabview/css/round_tabs.css
Normal file
75
www/extras/yui/examples/tabview/css/round_tabs.css
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
.yui-navset .yui-content {
|
||||
border:1px solid #ccc;
|
||||
}
|
||||
.yui-navset .yui-nav .selected a, .yui-navset .yui-nav a:hover {
|
||||
background-color:#fff;
|
||||
}
|
||||
|
||||
.yui-navset .yui-nav li a {
|
||||
background:#e5e5e5 url(../img/round_4px_trans_gray.gif) no-repeat;
|
||||
}
|
||||
.yui-navset .yui-nav li a em {
|
||||
background:transparent url(../img/round_4px_trans_gray.gif) no-repeat top right;
|
||||
}
|
||||
|
||||
/* top oriented */
|
||||
|
||||
.yui-navset-top .yui-nav { margin-bottom:-1px; } /* for overlap, based on content border-width */
|
||||
.yui-navset-top .yui-nav li a {
|
||||
border-bottom:1px solid #ccc;
|
||||
}
|
||||
|
||||
.yui-navset-top .yui-nav .selected a { border-bottom:0; }
|
||||
.yui-navset-top .yui-nav .selected a em { padding-bottom:0.6em; } /* adjust height */
|
||||
|
||||
/* top & bottom oriented */
|
||||
.yui-navset-top .yui-nav li a em, .yui-navset-bottom .yui-nav li a em {
|
||||
margin-left:4px; /* based on border-radius */
|
||||
padding-right:8px; /* based on border-radius (2x left to balance margin) */
|
||||
padding-left:4px;
|
||||
}
|
||||
|
||||
/* bottom oriented */
|
||||
|
||||
.yui-navset-bottom .yui-nav { margin-top:-1px; } /* for overlap, based on content border-width */
|
||||
.yui-navset-bottom .yui-nav li a { border-top:1px solid #ccc; }
|
||||
|
||||
.yui-navset-bottom .yui-nav .selected a { border-top:0; }
|
||||
.yui-navset-bottom .yui-nav .selected a em { padding-top:0.6em; } /* adjust height */
|
||||
|
||||
.yui-navset-bottom .yui-nav li a { background-position:bottom left; }
|
||||
.yui-navset-bottom .yui-nav li a em { background-position:bottom right; }
|
||||
|
||||
/* left oriented */
|
||||
|
||||
.yui-navset-left .yui-content { margin-left:-1px; } /* for overlap, based on content border-width */
|
||||
|
||||
.yui-navset-left .yui-nav li a {
|
||||
border-right:1px solid #ccc;
|
||||
padding-bottom:4px;
|
||||
}
|
||||
|
||||
.yui-navset-left .yui-nav li a em, .yui-navset-right .yui-nav li a em {
|
||||
padding-top:8px; /* based on border-radius (2x left to balance margin) */
|
||||
}
|
||||
|
||||
.yui-navset-left .yui-nav .selected a { border-right:0; }
|
||||
.yui-navset-left .yui-nav .selected a em { padding-left:0.6em; } /* adjust width */
|
||||
|
||||
.yui-navset-left .yui-nav li a { background-position:bottom left; }
|
||||
.yui-navset-left .yui-nav li a em { background-position:top left; }
|
||||
|
||||
/* right oriented */
|
||||
|
||||
.yui-navset-right .yui-content { margin-right:-1px; } /* for overlap, based on content border-width */
|
||||
|
||||
.yui-navset-right .yui-nav li a {
|
||||
border-left:1px solid #ccc;
|
||||
padding-bottom:4px;
|
||||
}
|
||||
|
||||
.yui-navset-right .yui-nav .selected a { border-left:0; }
|
||||
.yui-navset-right .yui-nav .selected a em { padding-left:0.6em; } /* adjust width */
|
||||
|
||||
.yui-navset-right .yui-nav li a { background-position:bottom right; }
|
||||
.yui-navset-right .yui-nav li a em { background-position:top right; }
|
||||
70
www/extras/yui/examples/tabview/custom_events.html
Normal file
70
www/extras/yui/examples/tabview/custom_events.html
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>TabView Example - Handling Custom Events</title>
|
||||
<link rel="stylesheet" type="text/css" href="css/example.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../build/tabview/assets/tabs.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../build/tabview/assets/border_tabs.css">
|
||||
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
|
||||
<script type="text/javascript" src="../../build/event/event.js"></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
||||
<script type="text/javascript" src="../../build/tabview/tabview.js"></script>
|
||||
|
||||
<style type="text/css">
|
||||
#demo { width:30em; }
|
||||
#demo .yui-content { padding:1em; } /* pad content container */
|
||||
</style>
|
||||
|
||||
<script type="text/javascript">
|
||||
YAHOO.example.init = function() {
|
||||
var tabView = new YAHOO.widget.TabView('demo');
|
||||
|
||||
var handleTabChange = function() {
|
||||
alert('active tab changed');
|
||||
};
|
||||
|
||||
tabView.on('activeTabChange', handleTabChange);
|
||||
};
|
||||
|
||||
YAHOO.example.init();
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="doc">
|
||||
<h1>TabView Example - Handling Custom Events</h1>
|
||||
<p>This example demonstrates how to handle custom events.</p>
|
||||
|
||||
<div id="demo" class="yui-navset">
|
||||
<ul class="yui-nav">
|
||||
<li class="selected"><a href="#lorem"><em>lorem</em></a></li>
|
||||
<li><a href="#ipsum"><em>ipsum</em></a></li>
|
||||
<li><a href="#dolor"><em>dolor</em></a></li>
|
||||
</ul>
|
||||
<div class="yui-content">
|
||||
<div id="lorem">
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.</p>
|
||||
</div>
|
||||
<div id="ispum">
|
||||
<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>
|
||||
</div>
|
||||
<div id="dolor">
|
||||
<form action="#">
|
||||
<fieldset>
|
||||
<legend>Lorem Ipsum</legend>
|
||||
<label for="foo"> <input id="foo" name="foo"></label>
|
||||
<input type="submit" value="submit">
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
52
www/extras/yui/examples/tabview/dynamic_from_js.html
Normal file
52
www/extras/yui/examples/tabview/dynamic_from_js.html
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>TabView Example - Dynamic Loading</title>
|
||||
<link rel="stylesheet" type="text/css" href="css/example.css">
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/tabview/assets/tabs.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../build/tabview/assets/border_tabs.css">
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
|
||||
<script type="text/javascript" src="../../build/event/event.js"></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
||||
<script type="text/javascript" src="../../build/connection/connection.js"></script>
|
||||
<script type="text/javascript" src="../../build/tabview/tabview.js"></script>
|
||||
<style type="text/css">
|
||||
#demo .yui-content {
|
||||
height:12em;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
(function() {
|
||||
var tabView = new YAHOO.widget.TabView(null, { id: 'demo' } );
|
||||
|
||||
tabView.addTab( new YAHOO.widget.Tab(null, { // TODO: href?
|
||||
label: 'lorem',
|
||||
dataSrc: 'php/nonsense.php?type=para',
|
||||
active: true//,
|
||||
//firesChangeEvents ?
|
||||
}));
|
||||
|
||||
tabView.addTab( new YAHOO.widget.Tab({
|
||||
label: 'dolor',
|
||||
dataSrc: 'php/nonsense.php?type=list',
|
||||
cacheData: true
|
||||
}));
|
||||
|
||||
YAHOO.util.Event.onContentReady('doc', function() {
|
||||
tabView.appendTo('doc');
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="doc">
|
||||
<h1>TabView Example - Dynamic Loading</h1>
|
||||
<p>This example demonstrates how to load tab content dynamically.</p>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
44
www/extras/yui/examples/tabview/dynamic_from_markup.html
Normal file
44
www/extras/yui/examples/tabview/dynamic_from_markup.html
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>TabView Example - Dynamic Loading</title>
|
||||
<link rel="stylesheet" type="text/css" href="css/example.css">
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/tabview/assets/tabs.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../build/tabview/assets/border_tabs.css">
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
|
||||
<script type="text/javascript" src="../../build/event/event.js"></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
||||
<script type="text/javascript" src="../../build/connection/connection.js"></script>
|
||||
<script type="text/javascript" src="../../build/tabview/tabview.js"></script>
|
||||
|
||||
<style type="text/css">
|
||||
#demo .yui-content {
|
||||
height:12em;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
(function() {
|
||||
var myTabs = new YAHOO.widget.TabView('demo');
|
||||
|
||||
|
||||
})();
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="doc">
|
||||
<h1>TabView Example - Dynamic Loading</h1>
|
||||
<p>This example demonstrates how to load tab content dynamically.</p>
|
||||
|
||||
<div id="demo" class="yui-navset">
|
||||
<ul class="yui-nav">
|
||||
<li class="on"><a href="#lorem"><em>lorem</em></a></li>
|
||||
<li><a href="#ipsum"><em>ipsum</em></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
BIN
www/extras/yui/examples/tabview/img/loading.gif
Normal file
BIN
www/extras/yui/examples/tabview/img/loading.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 729 B |
BIN
www/extras/yui/examples/tabview/img/newcats_bkgd.gif
Normal file
BIN
www/extras/yui/examples/tabview/img/newcats_bkgd.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 93 B |
BIN
www/extras/yui/examples/tabview/img/ptr.gif
Normal file
BIN
www/extras/yui/examples/tabview/img/ptr.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 261 B |
BIN
www/extras/yui/examples/tabview/img/round_4px_trans_gray.gif
Normal file
BIN
www/extras/yui/examples/tabview/img/round_4px_trans_gray.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 463 B |
BIN
www/extras/yui/examples/tabview/img/tab_left.gif
Normal file
BIN
www/extras/yui/examples/tabview/img/tab_left.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 129 B |
BIN
www/extras/yui/examples/tabview/img/tab_right.gif
Normal file
BIN
www/extras/yui/examples/tabview/img/tab_right.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 491 B |
35
www/extras/yui/examples/tabview/index.html
Normal file
35
www/extras/yui/examples/tabview/index.html
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>YUI Library - TabView</title>
|
||||
<link rel="stylesheet" type="text/css" media="screen" href="css/example.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="doc">
|
||||
<div id="hd">
|
||||
<h1>YUI Library - TabView</h1>
|
||||
</div>
|
||||
<div id="bd">
|
||||
<ul id="examples">
|
||||
<li><a href="basic_from_markup.html">building from existing markup</a></li>
|
||||
<li><a href="module_tabs.html">building from arbitrary markup</a></li>
|
||||
<li><a href="basic_from_js.html">building from javaScript</a></li>
|
||||
<li><a href="basic_from_partial_markup.html">building from partial markup</a></li>
|
||||
<li><a href="rounded_tabs.html">rounded corner tabs</a></li>
|
||||
<li><a href="orientation_right.html">right oriented tabs</a></li>
|
||||
<li><a href="orientation_bottom.html">bottom oriented tabs</a></li>
|
||||
<li><a href="orientation_left.html">left oriented tabs</a></li>
|
||||
<li><a href="add_tabs.html">adding tabs</a></li>
|
||||
<li><a href="remove_tabs.html">removing tabs</a></li>
|
||||
<li><a href="activation.html">changing activation event</a></li>
|
||||
<li><a href="loading.html">dynamically loading tab content</a></li>
|
||||
<li><a href="add_events.html">adding event listeners</a></li>
|
||||
<li><a href="remove_events.html">removing event listeners</a></li>
|
||||
<li><a href="custom_events.html">handling custom events</a></li>
|
||||
<li><a href="stop_custom_events.html">suppressing attribute changes</a></li>
|
||||
<li><a href="transition.html">applying content transition effects</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
70
www/extras/yui/examples/tabview/loading.html
Normal file
70
www/extras/yui/examples/tabview/loading.html
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>TabView Example - Dynamically Loading Content</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="css/example.css">
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/tabview/assets/tabs.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../build/tabview/assets/border_tabs.css">
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
|
||||
<script type="text/javascript" src="../../build/event/event.js"></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
||||
<script type="text/javascript" src="../../build/connection/connection.js"></script>
|
||||
<script type="text/javascript" src="../../build/tabview/tabview.js"></script>
|
||||
|
||||
<style type="text/css">
|
||||
#demo {
|
||||
width:30em; /* arbitrary width */
|
||||
}
|
||||
|
||||
#demo .yui-content {
|
||||
padding:1em;
|
||||
}
|
||||
|
||||
#demo .loading {
|
||||
background-image:url(img/loading.gif);
|
||||
background-position:center center;
|
||||
background-repeat:no-repeat;
|
||||
}
|
||||
|
||||
#demo .loading * {
|
||||
display:none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript">
|
||||
YAHOO.example.init = function() {
|
||||
var tabView = new YAHOO.widget.TabView({id: 'demo'});
|
||||
|
||||
tabView.addTab(new YAHOO.widget.Tab({
|
||||
label: 'lorem',
|
||||
dataSrc: 'php/nonsense.php?type=list',
|
||||
active: true
|
||||
}));
|
||||
|
||||
tabView.addTab(new YAHOO.widget.Tab({
|
||||
label: 'lorem',
|
||||
dataSrc: 'php/nonsense.php?type=para',
|
||||
cacheData: true /* only load once */
|
||||
|
||||
}));
|
||||
|
||||
YAHOO.util.Event.onContentReady('doc', function() {
|
||||
tabView.appendTo('doc');
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
YAHOO.example.init();
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="doc">
|
||||
<h1>TabView Example - Dynamically Loading Content</h1>
|
||||
<p>This example demonstrates how to load tab content dynamically.</p>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
103
www/extras/yui/examples/tabview/module_tabs.html
Normal file
103
www/extras/yui/examples/tabview/module_tabs.html
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>TabView Example - Converting Modules to Tabs</title>
|
||||
<link rel="stylesheet" type="text/css" href="css/example.css">
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/tabview/assets/tabs.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/module_tabs.css">
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
|
||||
<script type="text/javascript" src="../../build/event/event.js"></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
||||
<script type="text/javascript" src="../../build/tabview/tabview.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
YAHOO.example.init = function() {
|
||||
var tabView = new YAHOO.widget.TabView();
|
||||
|
||||
|
||||
YAHOO.util.Event.onContentReady('top-stories', function() {
|
||||
var modules = YAHOO.util.Dom.getElementsByClassName('mod', 'div', this);
|
||||
|
||||
YAHOO.util.Dom.batch(modules, function(module) {
|
||||
tabView.addTab( new YAHOO.widget.Tab({
|
||||
label: module.getElementsByTagName('h3')[0].innerHTML,
|
||||
contentEl: YAHOO.util.Dom.getElementsByClassName('bd',
|
||||
'div', module)[0]
|
||||
}));
|
||||
YAHOO.util.Dom.setStyle(module, 'display', 'none'); /* hide modules */
|
||||
});
|
||||
|
||||
tabView.set('activeIndex', 0); // make first tab active
|
||||
tabView.appendTo(this); // append to "top-stories"
|
||||
});
|
||||
};
|
||||
|
||||
YAHOO.example.init();
|
||||
</script>
|
||||
|
||||
<style type="text/css">
|
||||
#top-stories { width:45em; } /* arbitrary width */
|
||||
|
||||
#top-stories .yui-content {
|
||||
padding:1em;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="doc">
|
||||
<h1>TabView Example - Converting Modules to Tabs</h1>
|
||||
<div id="top-stories">
|
||||
<h2>Top Stories</h2>
|
||||
<div class="mod">
|
||||
<div class="hd">
|
||||
<h3>Lorem</h3>
|
||||
</div>
|
||||
<div class="bd">
|
||||
<ul>
|
||||
<li><q><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</a></q> <cite>Lorem</cite> - <strong>40 minutes ago</strong></li>
|
||||
|
||||
<li><q><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</a></q> <cite>Lorem</cite> - <strong>4 minutes ago</strong></li>
|
||||
<li><q><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</a></q> <cite>Lorem</cite> - <strong>37 minutes ago</strong></li>
|
||||
<li><q><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</a></q> <cite>Lorem</cite> - <strong>53 minutes ago</strong></li>
|
||||
|
||||
<li><q><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</a></q> <cite>Lorem</cite> - <strong>1 hour, 21 minutes ago</strong></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mod">
|
||||
<div class="hd">
|
||||
<h3>Ipsum</h3>
|
||||
</div>
|
||||
<div class="bd">
|
||||
<ul>
|
||||
<li><q><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</a></q> <cite>Ipsum</cite> - <strong>40 minutes ago</strong></li>
|
||||
|
||||
<li><q><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</a></q> <cite>Ipsum</cite> - <strong>4 minutes ago</strong></li>
|
||||
<li><q><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</a></q> <cite>Ipsum</cite> - <strong>37 minutes ago</strong></li>
|
||||
<li><q><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</a></q> <cite>Ipsum</cite> - <strong>53 minutes ago</strong></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mod">
|
||||
<div class="hd">
|
||||
<h3>Dolor</h3>
|
||||
</div>
|
||||
<div class="bd">
|
||||
<ul>
|
||||
<li><q><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</a></q> <cite>Dolor</cite> - <strong>40 minutes ago</strong></li>
|
||||
|
||||
<li><q><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</a></q> <cite>Dolor</cite> - <strong>4 minutes ago</strong></li>
|
||||
<li><q><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</a></q> <cite>Dolor</cite> - <strong>37 minutes ago</strong></li>
|
||||
<li><q><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</a></q> <cite>Dolor</cite> - <strong>53 minutes ago</strong></li>
|
||||
|
||||
<li><q><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</a></q> <cite>Dolor</cite> - <strong>1 hour, 21 minutes ago</strong></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
78
www/extras/yui/examples/tabview/orientation_bottom.html
Normal file
78
www/extras/yui/examples/tabview/orientation_bottom.html
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>TabView Example - Preventing Flicker From Existing Markup</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="css/example.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../build/tabview/assets/tabs.css">
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/tabview/assets/border_tabs.css">
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
|
||||
<script type="text/javascript" src="../../build/event/event.js"></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
||||
<script type="text/javascript" src="../../build/tabview/tabview.js"></script>
|
||||
|
||||
<style type="text/css">
|
||||
/* demo specific */
|
||||
#demo {
|
||||
width:30em; /* arbitrary width */
|
||||
}
|
||||
|
||||
#demo .yui-content {
|
||||
height:6em; /* fix height for constant tab position */
|
||||
padding:1em; /* pad content container */
|
||||
}
|
||||
</style>
|
||||
|
||||
<noscript>
|
||||
<style type="text/css">
|
||||
#demo {visibility: visible;} /* in case js not available */
|
||||
</style>
|
||||
</noscript>
|
||||
|
||||
<script type="text/javascript">
|
||||
YAHOO.example.init = function() {
|
||||
var tabView = new YAHOO.widget.TabView('demo', { orientation: 'bottom' });
|
||||
};
|
||||
|
||||
YAHOO.example.init();
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="doc">
|
||||
<h1>TabView Example - Orientation Bottom</h1>
|
||||
<p>This example demonstrates how to orient tabs to the bottom of the tabView.</p>
|
||||
|
||||
<div id="demo" class="yui-navset">
|
||||
<ul class="yui-nav">
|
||||
<li class="selected"><a href="#lorem"><em>lorem</em></a></li>
|
||||
<li><a href="#ipsum"><em>ipsum</em></a></li>
|
||||
<li><a href="#dolor"><em>dolor</em></a></li>
|
||||
</ul>
|
||||
<div class="yui-content">
|
||||
<div id="lorem">
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.</p>
|
||||
</div>
|
||||
<div id="ispum">
|
||||
<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>
|
||||
</div>
|
||||
<div id="dolor">
|
||||
<form action="#">
|
||||
<fieldset>
|
||||
<legend>Lorem Ipsum</legend>
|
||||
<label for="foo"> <input id="foo" name="foo"></label>
|
||||
<input type="submit" value="submit">
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
75
www/extras/yui/examples/tabview/orientation_left.html
Normal file
75
www/extras/yui/examples/tabview/orientation_left.html
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>TabView Example - Orientation left</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="css/example.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../build/tabview/assets/tabs.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../build/tabview/assets/border_tabs.css">
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
|
||||
<script type="text/javascript" src="../../build/event/event.js"></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
||||
<script type="text/javascript" src="../../build/tabview/tabview.js"></script>
|
||||
|
||||
<style type="text/css">
|
||||
/* demo specific */
|
||||
#demo {
|
||||
width:30em; /* arbitrary width */
|
||||
}
|
||||
|
||||
#demo .yui-content {
|
||||
height:7em; /* keep tabs from bleeding past bottom edge */
|
||||
padding:1em; /* pad content container */
|
||||
}
|
||||
|
||||
/* override default tab width */
|
||||
#demo .yui-nav { width:4em; }
|
||||
#demo { padding-left:4em; } /* map to nav width */
|
||||
</style>
|
||||
|
||||
<script type="text/javascript">
|
||||
YAHOO.example.init = function() {
|
||||
var tabView = new YAHOO.widget.TabView('demo', { orientation: 'left' });
|
||||
};
|
||||
|
||||
YAHOO.example.init();
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="doc">
|
||||
<h1>TabView Example - Orientation Bottom</h1>
|
||||
<p>This example demonstrates how to orient tabs to the left of the tabView.</p>
|
||||
|
||||
<div id="demo" class="yui-navset">
|
||||
<ul class="yui-nav">
|
||||
<li class="selected"><a href="#lorem"><em>lorem</em></a></li>
|
||||
<li><a href="#ipsum"><em>ipsum</em></a></li>
|
||||
<li><a href="#dolor"><em>dolor</em></a></li>
|
||||
</ul>
|
||||
<div class="yui-content">
|
||||
<div id="lorem">
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.</p>
|
||||
</div>
|
||||
<div id="ispum">
|
||||
<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>
|
||||
</div>
|
||||
<div id="dolor">
|
||||
<form action="#">
|
||||
<fieldset>
|
||||
<legend>Lorem Ipsum</legend>
|
||||
<label for="foo"> <input id="foo" name="foo"></label>
|
||||
<input type="submit" value="submit">
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
76
www/extras/yui/examples/tabview/orientation_right.html
Normal file
76
www/extras/yui/examples/tabview/orientation_right.html
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>TabView Example - Orientation Right</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="css/example.css">
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/tabview/assets/tabs.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../build/tabview/assets/border_tabs.css">
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
|
||||
<script type="text/javascript" src="../../build/event/event.js"></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
||||
<script type="text/javascript" src="../../build/tabview/tabview.js"></script>
|
||||
|
||||
<style type="text/css">
|
||||
/* demo specific */
|
||||
#demo {
|
||||
width:30em; /* arbitrary width */
|
||||
}
|
||||
|
||||
#demo .yui-content {
|
||||
height:7em; /* keep tabs from bleeding past bottom edge */
|
||||
padding:1em; /* pad content container */
|
||||
}
|
||||
|
||||
/* override default tab width */
|
||||
#demo .yui-nav { width:4em; }
|
||||
#demo { padding-right:4em; } /* map to nav width */
|
||||
</style>
|
||||
|
||||
<script type="text/javascript">
|
||||
YAHOO.example.init = function() {
|
||||
var tabView = new YAHOO.widget.TabView('demo', { orientation: 'right' });
|
||||
};
|
||||
|
||||
YAHOO.example.init();
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="doc">
|
||||
<h1>TabView Example - Orientation Right</h1>
|
||||
<p>This example demonstrates how to orient tabs to the right of the tabView.</p>
|
||||
|
||||
<div id="demo" class="yui-navset">
|
||||
<ul class="yui-nav">
|
||||
<li class="selected"><a href="#lorem"><em>lorem</em></a></li>
|
||||
<li><a href="#ipsum"><em>ipsum</em></a></li>
|
||||
<li><a href="#dolor"><em>dolor</em></a></li>
|
||||
</ul>
|
||||
<div class="yui-content">
|
||||
<div id="lorem">
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.</p>
|
||||
</div>
|
||||
<div id="ispum">
|
||||
<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>
|
||||
</div>
|
||||
<div id="dolor">
|
||||
<form action="#">
|
||||
<fieldset>
|
||||
<legend>Lorem Ipsum</legend>
|
||||
<label for="foo"> <input id="foo" name="foo"></label>
|
||||
<input type="submit" value="submit">
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
28
www/extras/yui/examples/tabview/php/nonsense.php
Normal file
28
www/extras/yui/examples/tabview/php/nonsense.php
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<?php
|
||||
header("Content-type: text/html");
|
||||
|
||||
$items = 5;
|
||||
$type = isset($_GET['type']) ? $_GET['type'] : 'list';
|
||||
|
||||
sleep(1);
|
||||
|
||||
if ($type == 'list') {
|
||||
|
||||
|
||||
?>
|
||||
<ul>
|
||||
<?php
|
||||
for ($i =0; $i < $items; $i++) {
|
||||
?><li><a href="#">lorem ipsum dolor sit amet</a></li>
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
</ul>
|
||||
|
||||
<?php
|
||||
} else if ($type == 'para') {
|
||||
?><p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.</p>
|
||||
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.</p>
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
74
www/extras/yui/examples/tabview/remove_events.html
Normal file
74
www/extras/yui/examples/tabview/remove_events.html
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>TabView Example - Removing Event Listeners</title>
|
||||
<link rel="stylesheet" type="text/css" href="css/example.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../build/tabview/assets/tabs.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../build/tabview/assets/border_tabs.css">
|
||||
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
|
||||
<script type="text/javascript" src="../../build/event/event.js"></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
||||
<script type="text/javascript" src="../../build/tabview/tabview.js"></script>
|
||||
|
||||
<style type="text/css">
|
||||
#demo { width:30em; }
|
||||
#demo .yui-content { padding:1em; } /* pad content container */
|
||||
</style>
|
||||
|
||||
<script type="text/javascript">
|
||||
YAHOO.example.init = function() {
|
||||
var tabView = new YAHOO.widget.TabView('demo');
|
||||
|
||||
tabView.on('contentReady', function() {
|
||||
|
||||
var handleClick = function(e) {
|
||||
alert('clicked');
|
||||
};
|
||||
|
||||
this.getTab(1).addListener('click', handleClick);
|
||||
this.getTab(1).removeListener('click', handleClick);
|
||||
});
|
||||
};
|
||||
|
||||
YAHOO.example.init();
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="doc">
|
||||
<h1>TabView Example - Removing Event Listeners</h1>
|
||||
<p>This example demonstrates how to remove event listeners.</p>
|
||||
|
||||
<div id="demo" class="yui-navset">
|
||||
<ul class="yui-nav">
|
||||
<li class="selected"><a href="#lorem"><em>lorem</em></a></li>
|
||||
<li><a href="#ipsum"><em>ipsum</em></a></li>
|
||||
<li><a href="#dolor"><em>dolor</em></a></li>
|
||||
</ul>
|
||||
<div class="yui-content">
|
||||
<div id="lorem">
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.</p>
|
||||
</div>
|
||||
<div id="ispum">
|
||||
<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>
|
||||
</div>
|
||||
<div id="dolor">
|
||||
<form action="#">
|
||||
<fieldset>
|
||||
<legend>Lorem Ipsum</legend>
|
||||
<label for="foo"> <input id="foo" name="foo"></label>
|
||||
<input type="submit" value="submit">
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
68
www/extras/yui/examples/tabview/remove_tabs.html
Normal file
68
www/extras/yui/examples/tabview/remove_tabs.html
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>TabView Example - Removeable Tabs</title>
|
||||
<link rel="stylesheet" type="text/css" href="css/example.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../build/tabview/assets/tabs.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../build/tabview/assets/border_tabs.css">
|
||||
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
|
||||
<script type="text/javascript" src="../../build/event/event.js"></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
||||
<script type="text/javascript" src="../../build/tabview/tabview.js"></script>
|
||||
|
||||
<style type="text/css">
|
||||
#demo { width:30em; }
|
||||
#demo .yui-content { padding:1em; } /* pad content container */
|
||||
</style>
|
||||
|
||||
<script type="text/javascript">
|
||||
YAHOO.example.init = function() {
|
||||
var tabView = new YAHOO.widget.TabView('demo');
|
||||
|
||||
tabView.on('contentReady', function() {
|
||||
this.removeTab(this.getTab(2));
|
||||
});
|
||||
};
|
||||
|
||||
YAHOO.example.init();
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="doc">
|
||||
<h1>TabView Example - Removeable Tabs</h1>
|
||||
<p>This example demonstrates how to remove a tab.</p>
|
||||
|
||||
<div id="demo" class="yui-navset">
|
||||
<ul class="yui-nav">
|
||||
<li class="selected"><a href="#lorem"><em>lorem</em></a></li>
|
||||
<li><a href="#ipsum"><em>ipsum</em></a></li>
|
||||
<li><a href="#dolor"><em>dolor</em></a></li>
|
||||
</ul>
|
||||
<div class="yui-content">
|
||||
<div id="lorem">
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.</p>
|
||||
</div>
|
||||
<div id="ispum">
|
||||
<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>
|
||||
</div>
|
||||
<div id="dolor">
|
||||
<form action="#">
|
||||
<fieldset>
|
||||
<legend>Lorem Ipsum</legend>
|
||||
<label for="foo"> <input id="foo" name="foo"></label>
|
||||
<input type="submit" value="submit">
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
90
www/extras/yui/examples/tabview/remove_tabs_icon.html
Normal file
90
www/extras/yui/examples/tabview/remove_tabs_icon.html
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>TabView Example - Removeable Tabs</title>
|
||||
<link rel="stylesheet" type="text/css" href="css/example.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../build/tabview/assets/tabs.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../build/tabview/assets/border_tabs.css">
|
||||
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
|
||||
<script type="text/javascript" src="../../build/event/event.js"></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
||||
<script type="text/javascript" src="../../build/tabview/tabview.js"></script>
|
||||
|
||||
<style type="text/css">
|
||||
#demo { width:30em; }
|
||||
#demo .yui-content { padding:1em; } /* pad content container */
|
||||
|
||||
.yui-nav em { margin-right:15px; } /* make room for close icon */
|
||||
|
||||
.yui-nav .close {
|
||||
background:url(img/close12_1.gif) no-repeat;
|
||||
position:absolute;
|
||||
right:5px;
|
||||
height:12px;
|
||||
width:12px;
|
||||
text-indent: -9999em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript">
|
||||
YAHOO.example.init = function() {
|
||||
var tabView = new YAHOO.widget.TabView('demo');
|
||||
|
||||
var removeTab = function(e) {
|
||||
// only remove if "close" is clicked
|
||||
if (YAHOO.util.Event.getTarget(e).className == 'close') {
|
||||
tabView.removeTab(this); /* this == tab */
|
||||
}
|
||||
};
|
||||
|
||||
tabView.on('contentReady', function() {
|
||||
YAHOO.util.Dom.batch(tabView.get('tabs'), function(tab) {
|
||||
tab.set('label', tab.get('label') +
|
||||
' <span class="close">close</span>');
|
||||
tab.on('click', removeTab);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
YAHOO.example.init();
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="doc">
|
||||
<h1>TabView Example - Removeable Tabs</h1>
|
||||
<p>This example demonstrates how to position the tabs at the bottom of the view.</p>
|
||||
|
||||
<div id="demo" class="yui-navset">
|
||||
<ul class="yui-nav">
|
||||
<li class="on"><a href="#lorem"><em>lorem</em></a></li>
|
||||
<li><a href="#ipsum"><em>ipsum</em></a></li>
|
||||
<li><a href="#dolor"><em>dolor</em></a></li>
|
||||
</ul>
|
||||
<div class="yui-content">
|
||||
<div id="lorem">
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.</p>
|
||||
</div>
|
||||
<div id="ispum">
|
||||
<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>
|
||||
</div>
|
||||
<div id="dolor">
|
||||
<form action="#">
|
||||
<fieldset>
|
||||
<legend>Lorem Ipsum</legend>
|
||||
<label for="foo"> <input id="foo" name="foo"></label>
|
||||
<input type="submit" value="submit">
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
69
www/extras/yui/examples/tabview/rounded_tabs.html
Normal file
69
www/extras/yui/examples/tabview/rounded_tabs.html
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>TabView Example - Basic From Existing Markup</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="css/example.css">
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/tabview/assets/tabs.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/round_tabs.css">
|
||||
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
|
||||
<script type="text/javascript" src="../../build/event/event.js"></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
||||
<script type="text/javascript" src="../../build/tabview/tabview.js"></script>
|
||||
|
||||
<style type="text/css">
|
||||
#demo { width:30em; }
|
||||
#demo .yui-content {
|
||||
padding:1em; /* pad content container */
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script type="text/javascript">
|
||||
YAHOO.example.init = function() {
|
||||
var tabView = new YAHOO.widget.TabView('demo');
|
||||
};
|
||||
|
||||
YAHOO.example.init();
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="doc">
|
||||
<h1>TabView Example - Basic From Existing Markup</h1>
|
||||
<p>This example demonstrates how to create a basic TabView widget from existing markup.</p>
|
||||
|
||||
<div id="demo" class="yui-navset">
|
||||
<ul class="yui-nav">
|
||||
<li class="selected"><a href="#lorem"><em>lorem</em></a></li>
|
||||
<li><a href="#ipsum"><em>ipsum</em></a></li>
|
||||
<li><a href="#dolor"><em>dolor</em></a></li>
|
||||
</ul>
|
||||
<div class="yui-content">
|
||||
<div id="lorem">
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.</p>
|
||||
</div>
|
||||
<div id="ispum">
|
||||
<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>
|
||||
</div>
|
||||
<div id="dolor">
|
||||
<form action="#">
|
||||
<fieldset>
|
||||
<legend>Lorem Ipsum</legend>
|
||||
<label for="foo"> <input id="foo" name="foo"></label>
|
||||
<input type="submit" value="submit">
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
71
www/extras/yui/examples/tabview/stop_custom_events.html
Normal file
71
www/extras/yui/examples/tabview/stop_custom_events.html
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>TabView Example - Suppressing Changes</title>
|
||||
<link rel="stylesheet" type="text/css" href="css/example.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../build/tabview/assets/tabs.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../build/tabview/assets/border_tabs.css">
|
||||
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
|
||||
<script type="text/javascript" src="../../build/event/event.js"></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
||||
<script type="text/javascript" src="../../build/tabview/tabview.js"></script>
|
||||
|
||||
<style type="text/css">
|
||||
#demo { width:30em; }
|
||||
#demo .yui-content { padding:1em; } /* pad content container */
|
||||
</style>
|
||||
|
||||
<script type="text/javascript">
|
||||
YAHOO.example.init = function() {
|
||||
var tabView = new YAHOO.widget.TabView('demo');
|
||||
|
||||
var handleTabChange = function() {
|
||||
alert('active tab change stopped');
|
||||
return false;
|
||||
};
|
||||
|
||||
tabView.on('beforeActiveTabChange', handleTabChange);
|
||||
};
|
||||
|
||||
YAHOO.example.init();
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="doc">
|
||||
<h1>TabView Example - Suppressing Changes</h1>
|
||||
<p>This example demonstrates how to suppress changes.</p>
|
||||
|
||||
<div id="demo" class="yui-navset">
|
||||
<ul class="yui-nav">
|
||||
<li class="selected"><a href="#lorem"><em>lorem</em></a></li>
|
||||
<li><a href="#ipsum"><em>ipsum</em></a></li>
|
||||
<li><a href="#dolor"><em>dolor</em></a></li>
|
||||
</ul>
|
||||
<div class="yui-content">
|
||||
<div id="lorem">
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.</p>
|
||||
</div>
|
||||
<div id="ispum">
|
||||
<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>
|
||||
</div>
|
||||
<div id="dolor">
|
||||
<form action="#">
|
||||
<fieldset>
|
||||
<legend>Lorem Ipsum</legend>
|
||||
<label for="foo"> <input id="foo" name="foo"></label>
|
||||
<input type="submit" value="submit">
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
90
www/extras/yui/examples/tabview/transition.html
Normal file
90
www/extras/yui/examples/tabview/transition.html
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>TabView Example - Adding Transition Effects</title>
|
||||
<link rel="stylesheet" type="text/css" href="css/example.css">
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/tabview/assets/tabs.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../build/tabview/assets/border_tabs.css">
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
|
||||
<script type="text/javascript" src="../../build/event/event.js"></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
||||
<script type="text/javascript" src="../../build/connection/connection.js"></script>
|
||||
<script type="text/javascript" src="../../build/animation/animation.js"></script>
|
||||
<script type="text/javascript" src="../../build/tabview/tabview.js"></script>
|
||||
|
||||
<style type="text/css">
|
||||
#demo { width:30em; }
|
||||
|
||||
#demo .yui-content {
|
||||
border:1px solid #000;
|
||||
height:4em;
|
||||
padding:0 1em;
|
||||
}
|
||||
|
||||
#demo .yui-content div {
|
||||
background-color:#f6f7ee; /* for IE double text bug */
|
||||
position:absolute; /* to overlap during transition */
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
YAHOO.example.init = function() {
|
||||
var myTabs = new YAHOO.widget.TabView('demo');
|
||||
myTabs.contentTransition = function(newTab, oldTab) {
|
||||
if ( newTab.anim && newTab.anim.isAnimated() ) {
|
||||
newTab.anim.stop(true);
|
||||
}
|
||||
|
||||
newTab.set('contentVisible', true);
|
||||
YAHOO.util.Dom.setStyle(newTab.get('contentEl'), 'opacity', 0);
|
||||
|
||||
newTab.anim = newTab.anim || new YAHOO.util.Anim( newTab.get('contentEl') );
|
||||
newTab.anim.attributes.opacity = { to: 1 };
|
||||
|
||||
var hideContent = function() {
|
||||
oldTab.set('contentVisible', false);
|
||||
oldTab.anim.onComplete.unsubscribe(hideContent);
|
||||
};
|
||||
|
||||
oldTab.anim = oldTab.anim || new YAHOO.util.Anim( oldTab.get('contentEl') );
|
||||
oldTab.anim.onComplete.subscribe(hideContent, this, true);
|
||||
oldTab.anim.attributes.opacity = { to: 0 };
|
||||
|
||||
newTab.anim.animate();
|
||||
oldTab.anim.animate();
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
YAHOO.example.init();
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="doc">
|
||||
<h1>TabView Example - Adding Transition Effects</h1>
|
||||
<p>This example demonstrates how to add transition effects.</p>
|
||||
|
||||
<div id="demo" class="yui-navset">
|
||||
<ul class="yui-nav">
|
||||
<li class="selected"><a href="#lorem"><em>lorem</em></a></li>
|
||||
<li><a href="#ipsum"><em>ipsum</em></a></li>
|
||||
<li><a href="#dolor"><em>dolor</em></a></li>
|
||||
</ul>
|
||||
<div class="yui-content">
|
||||
<div>
|
||||
<p>Lorem</p>
|
||||
</div>
|
||||
<div>
|
||||
<p>Ipsum</p>
|
||||
</div>
|
||||
<div>
|
||||
<p>Dolor</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue