Posted At : September 22, 2008 3:30 PM
| Posted By : Nicole Henningsen
YUI Library TabView modifying CSS
If you have looked at Yahoo's Tabview UI Library you have probably tried to dig into the CSS a little bit to modify it to meet your design needs. What a task! I have created an example of incorporating your own tabs based off of the sam skin provided by Yahoo. When I first looked at the tabview CSS I thought the 300+ lines of CSS in the file was a bit extreme! I started breaking it down to see what I needed and what I didn't need. This is what I came up with.
The HTML for this is really pretty basic. You will have 3 JS files and 1 CSS file that you will need to include.
yahoo-dom-event.js
element-beta-min.js
tabview-min.js
tabview.css
You can download the zip file for this example here
Now create a new CSS file and copy the css below. Save the file as tabview.css. Again I used the Yahoo sam skin and just removed what I didn't need and added my own images. The images are included in the zip file above.
/*
Copyright (c) 2008, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.5.2
*/
body {font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}table {font-size:inherit;font:100%;}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;}
.yui-navset-top
.yui-nav li,.yui-navset
.yui-nav li{
margin:0 0 0.0em;
}
.yui-nav,.yui-nav li{
margin:0;
padding:0;
list-style:none;
}
.yui-navset li em{
font-style:normal;
}
.yui-navset .yui-content{zoom:1;}
.yui-navset
.yui-nav li{
display:inline-block;
display:-moz-inline-stack;
*display:inline;
vertical-align:bottom;
cursor:pointer;
zoom:1;
}
.yui-nav li{
display:block;
}
.yui-nav a{
position:relative;
}
.yui-nav li a{
display:block;
display:inline-block;
vertical-align:bottom;
zoom:1;
}
.yui-nav li a em{
display:inline;
}
.yui-skin-sam
.yui-navset
.yui-nav li,
.selected{
margin:0 0.16em -1px 0;
}
.yui-skin-sam
.yui-navset
.yui-nav a,
.yui-skin-sam
.yui-navset
.yui-navset-top
.yui-nav a{
background:url(../images/close.jpg);
background-repeat:no-repeat;
width:90px;
height:19px;
border:none;
color:#000;
text-decoration:none;
}
.yui-nav a em{
border:solid #bdd75b;
border-width:1px 0 0;
cursor:hand;
padding:0.15em .75em;
left:0;
right:0;
bottom:0;
top:-1px;
position:relative;
}
.yui-navset
.yui-nav
.selected a,
.selected a:hover{
background:url(../images/open.jpg);
width:81px;
height:19px;
background-repeat:no-repeat;
color:#000;
}
.yui-nav a:focus{
background:url(../images/close.jpg);
background-repeat:no-repeat;
width:90px;
height:18px;
outline:0;
}
.yui-content{
background:#ffffff;
border-left:1px solid #2d70d6;
border-right:1px solid #2d70d6;
border-top:1px solid #2d70d6;
border-bottom:none;
padding:0.25em 0.5em;
}
.yui-nav a em{
border:none;
top:auto;
}
Now create a new HTML file and ad the code below. The unordered list creates your tabs at the top. If you would like to include more than two tabs simply add another opening and closing li tag below the code for the closed tab. Your content for the tabs will fall within its own div and paragraph tags. So if your adding another tab be sure to add another set of opening and closing div and paragraph tags below the closing div for tab 2s content. You can view the comment lines in the below html for more detail. Copyright (c) 2008, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.5.2
*/
body {font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}table {font-size:inherit;font:100%;}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;}
.yui-navset-top
.yui-nav li,.yui-navset
.yui-nav li{
margin:0 0 0.0em;
}
.yui-nav,.yui-nav li{
margin:0;
padding:0;
list-style:none;
}
.yui-navset li em{
font-style:normal;
}
.yui-navset .yui-content{zoom:1;}
.yui-navset
.yui-nav li{
display:inline-block;
display:-moz-inline-stack;
*display:inline;
vertical-align:bottom;
cursor:pointer;
zoom:1;
}
.yui-nav li{
display:block;
}
.yui-nav a{
position:relative;
}
.yui-nav li a{
display:block;
display:inline-block;
vertical-align:bottom;
zoom:1;
}
.yui-nav li a em{
display:inline;
}
.yui-skin-sam
.yui-navset
.yui-nav li,
.selected{
margin:0 0.16em -1px 0;
}
.yui-skin-sam
.yui-navset
.yui-nav a,
.yui-skin-sam
.yui-navset
.yui-navset-top
.yui-nav a{
background:url(../images/close.jpg);
background-repeat:no-repeat;
width:90px;
height:19px;
border:none;
color:#000;
text-decoration:none;
}
.yui-nav a em{
border:solid #bdd75b;
border-width:1px 0 0;
cursor:hand;
padding:0.15em .75em;
left:0;
right:0;
bottom:0;
top:-1px;
position:relative;
}
.yui-navset
.yui-nav
.selected a,
.selected a:hover{
background:url(../images/open.jpg);
width:81px;
height:19px;
background-repeat:no-repeat;
color:#000;
}
.yui-nav a:focus{
background:url(../images/close.jpg);
background-repeat:no-repeat;
width:90px;
height:18px;
outline:0;
}
.yui-content{
background:#ffffff;
border-left:1px solid #2d70d6;
border-right:1px solid #2d70d6;
border-top:1px solid #2d70d6;
border-bottom:none;
padding:0.25em 0.5em;
}
.yui-nav a em{
border:none;
top:auto;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--The include files can be downloaded in the zip file located above--->
<link rel="stylesheet" type="text/css" href="tabview/tabview.css">
<script type="text/javascript" src="tabview/yahoo-dom-event.js"></script>
<script type="text/javascript" src="tabview/element-beta-min.js"></script>
<script type="text/javascript" src="tabview/tabview-min.js"></script>
<title>Nicole Rutter-YUI Tabview</title>
</head>
<!---you must have the body class for this to work--->
<body class="yui-skin-sam">
<!---I included a table because it is easier to span the tabview exactly how I want it--->
<table style="width:250px; margin-left: 20px;">
<tr>
<td>
<!---opening div for tabs--->
<div id="demo" class="yui-navset">
<ul class="yui-nav">
<!--- selected is the tab this is currently open--->
<li class="selected"><a href="#tab1"><em>Open</em></a></li>
<li><a href="#tab2"><em>Closed</em></a></li>
<!---this is where you would add another tab -->
</ul>
<!---start of content div--->
<div class="yui-content">
<div>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at urna. Nam id quam ac risus scelerisque malesuada. In hac habitasse platea dictumst.
Suspendisse potenti. Quisque tortor neque, volutpat viverra, hendrerit id, ornare at, ligula. Pellentesque eget metus. Fusce libero dolor, lacinia et,
pulvinar vitae, sollicitudin ut, purus. Ut congue ullamcorper sapien. Donec eu mi id sapien iaculis consequat. Donec eget lectus non nulla adipiscing
fermentum. Aliquam ac lectus et lectus fermentum sodales. Nulla sit amet purus. Sed consectetuer, sem pharetra malesuada commodo, diam odio feugiat augue,
at dictum leo dolor sit amet tellus. Ut porttitor mi interdum ante. Fusce diam sem, aliquam vitae, dictum vitae, mollis vel, libero. In scelerisque,
mauris eget tincidunt facilisis, urna nibh rhoncus nibh, at semper dui quam nec dui.
</p>
</div>
<div>
<p>
Cras commodo. Cras molestie risus in mauris. Integer urna tellus, pharetra vel, rhoncus at, interdum nec, eros. Fusce quam nisi, porttitor nec, accumsan
vel, adipiscing id, leo. In tristique, lacus quis consectetuer hendrerit, lacus lacus adipiscing est, nec cursus sapien nisl quis erat. Vivamus id urna in
arcu suscipit aliquet. Vestibulum sodales sapien nec dui. Suspendisse augue arcu, tempus aliquet, dapibus at, malesuada sit amet, risus. Ut sodales, nulla
at pretium elementum, tellus ipsum hendrerit felis, quis molestie tortor elit sed odio. Mauris sed dolor vel magna interdum mollis.
</p>
</div>
<!---if you are creating another tab you would need the following code--->
<!---
<div>
<p>
</p>
</div>
--->
</div><!---end of content div--->
<img src="http://nicole.cfwebtools.com/images/tabBottom.jpg"/>
</div>
<!---important script tabs--->
<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>
</td>
</tr>
</table>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--The include files can be downloaded in the zip file located above--->
<link rel="stylesheet" type="text/css" href="tabview/tabview.css">
<script type="text/javascript" src="tabview/yahoo-dom-event.js"></script>
<script type="text/javascript" src="tabview/element-beta-min.js"></script>
<script type="text/javascript" src="tabview/tabview-min.js"></script>
<title>Nicole Rutter-YUI Tabview</title>
</head>
<!---you must have the body class for this to work--->
<body class="yui-skin-sam">
<!---I included a table because it is easier to span the tabview exactly how I want it--->
<table style="width:250px; margin-left: 20px;">
<tr>
<td>
<!---opening div for tabs--->
<div id="demo" class="yui-navset">
<ul class="yui-nav">
<!--- selected is the tab this is currently open--->
<li class="selected"><a href="#tab1"><em>Open</em></a></li>
<li><a href="#tab2"><em>Closed</em></a></li>
<!---this is where you would add another tab -->
</ul>
<!---start of content div--->
<div class="yui-content">
<div>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at urna. Nam id quam ac risus scelerisque malesuada. In hac habitasse platea dictumst.
Suspendisse potenti. Quisque tortor neque, volutpat viverra, hendrerit id, ornare at, ligula. Pellentesque eget metus. Fusce libero dolor, lacinia et,
pulvinar vitae, sollicitudin ut, purus. Ut congue ullamcorper sapien. Donec eu mi id sapien iaculis consequat. Donec eget lectus non nulla adipiscing
fermentum. Aliquam ac lectus et lectus fermentum sodales. Nulla sit amet purus. Sed consectetuer, sem pharetra malesuada commodo, diam odio feugiat augue,
at dictum leo dolor sit amet tellus. Ut porttitor mi interdum ante. Fusce diam sem, aliquam vitae, dictum vitae, mollis vel, libero. In scelerisque,
mauris eget tincidunt facilisis, urna nibh rhoncus nibh, at semper dui quam nec dui.
</p>
</div>
<div>
<p>
Cras commodo. Cras molestie risus in mauris. Integer urna tellus, pharetra vel, rhoncus at, interdum nec, eros. Fusce quam nisi, porttitor nec, accumsan
vel, adipiscing id, leo. In tristique, lacus quis consectetuer hendrerit, lacus lacus adipiscing est, nec cursus sapien nisl quis erat. Vivamus id urna in
arcu suscipit aliquet. Vestibulum sodales sapien nec dui. Suspendisse augue arcu, tempus aliquet, dapibus at, malesuada sit amet, risus. Ut sodales, nulla
at pretium elementum, tellus ipsum hendrerit felis, quis molestie tortor elit sed odio. Mauris sed dolor vel magna interdum mollis.
</p>
</div>
<!---if you are creating another tab you would need the following code--->
<!---
<div>
<p>
</p>
</div>
--->
</div><!---end of content div--->
<img src="http://nicole.cfwebtools.com/images/tabBottom.jpg"/>
</div>
<!---important script tabs--->
<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>
</td>
</tr>
</table>
</body>
</html>
That's it. You are ready to go. Don't forget to include the script tabs at the bottom it will not run without this! You can view my example here.
