preparing for 2.6 yui upgrade
This commit is contained in:
JT Smith
parent
eea207b3ec
commit
a041e93da8
1632 changed files with 0 additions and 812103 deletions
File diff suppressed because one or more lines are too long
|
|
@ -1,87 +0,0 @@
|
|||
<!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>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,52 +0,0 @@
|
|||
.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 */
|
||||
}
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
<?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>
|
||||
|
|
@ -1,68 +0,0 @@
|
|||
.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;
|
||||
}
|
||||
|
|
@ -1,115 +0,0 @@
|
|||
/* 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; }
|
||||
|
|
@ -1,107 +0,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; }
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,93 +0,0 @@
|
|||
<!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>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,64 +0,0 @@
|
|||
<!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>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,73 +0,0 @@
|
|||
<!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>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,85 +0,0 @@
|
|||
<!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>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,67 +0,0 @@
|
|||
<!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>
|
||||
File diff suppressed because one or more lines are too long
Loading…
Add table
Add a link
Reference in a new issue