Wednesday, December 17, 2008

Make Tabview with YUI

Sharing this time, I want to share the experience step by step how to create Tabview with YUI. Results from this sharing, which is tabview in this blog.

Step by step how to make:

1. Add the code below before : ]]></b:skin>

/* tabview sharingpost*/

* {
margin: 0;
padding: 0;
}
body {
font:x-small Georgia Serif;
}
p {
font-size: 1.5em;
margin-bottom: 10px;
}

a {
text-decoration: none;
}
a:hover {
color: #990000;
}

h2 { font-size: 1.5em; }

.clear {
clear: both;
}

#page-wrap {
width: 600px;
margin: 20px auto;
}
#content-explorer {
padding-top: 10px;
width:100%;
line-height:normal;
}
#content-explorer ul {
padding: 10px 10px 0;
list-style: none;
max-width: 640px;
border-bottom:1px solid #fff;
height: 31px;
}
#content-explorer ul li {
float: left;
background: #fbe0c5;
border-top:1px solid #fff;
text-align: center;
overflow: hidden;
margin-left: 5px;
}
#content-explorer ul li a {
display: block;
background: #fbe0c5;
border-top:1px solid #fff;
border-right:1px solid #fff;
border-left:1px solid #fff;
padding: 10px 20px 6px 20px;
font-weight: bold;
color: #999;
}
#content-explorer ul li a:hover {
color: #990000;
}
#content-explorer ul li.selected {
background: #fad00d;
border-top:1px solid #fff;
border-right:1px solid #fff;
border-left:1px solid #fff;
}
#content-explorer ul li.selected a {
background: #71572a;
border-top:1px solid #fff;
border-right:1px solid #fff;
border-left:1px solid #fff;
padding-bottom: 8px;
color: #ffffff;
}
div.yui-content {
overflow: auto;
background: #71572a;
border-bottom: 1px solid white;
border-right: 1px solid white;
border-left: 1px solid white;
padding: 15px;
}

2. Add the code below before : </head>

<script src='http://yui.yahooapis.com/2.5.0/build/yahoo-dom-event/yahoo-dom-event.js' type='text/javascript'/>
<script src='http://yui.yahooapis.com/2.5.0/build/element/element-beta-min.js' type='text/javascript'/>
<script src='http://yui.yahooapis.com/2.5.0/build/connection/connection-min.js' type='text/javascript'/>
<script src='http://yui.yahooapis.com/2.5.0/build/tabview/tabview-min.js' type='text/javascript'/>


3. Add the following code in the page elements or <body>:

<div id="page-wrap">

<script type="text/javascript"> var myTabs = new YAHOO.widget.TabView("content-explorer");</script>

<div id="content-explorer">

<ul class="yui-nav">
<li class="selected"><a href="#">
Title1</a></li>
<li><a href="#">Title2</a></li>
<li><a href="#">Title3</a></li>
<li><a href="#">Title4</a></li>
</ul>

<div class="yui-content">
<div>
<p>additional text</p>
<a href="#">Text1</a>
<br/>
<a href="#">text2</a>
<br/>
additional text & URL
<br/>
<br/>
<center><p>additional text </p></center>
</div>
<div>
<p>additional text</p>
<a href="#">Text1</a>
<br/>
<a href="#">text2</a>
<br/>
additional text & URL
<br/>
<br/>
<center><p>additional text </p></center>
</div>
<div>
<p>additional text</p>
<a href="#">Text1</a>
<br/>
<a href="#">text2</a>
<br/>
additional text & URL
<br/>
<br/>
<center><p>additional text </p></center>
</div>
<div>
<p>additional text</p>
<a href="#">Text1</a>
<br/>
<a href="#">text2</a>
<br/>
additional text & URL
<br/>
<br/>
<center><p>additional text </p></center>
</div>
<div>
<p>additional text</p>
<a href="#">Text1</a>
<br/>
<a href="#">text2</a>
<br/>
additional text & URL
<br/>
<br/>
<center><p>additional text </p></center>
</div>
</div>
</div>
</div>


Please add the URL or the inclination according Image
You can view the source code of this blog to see variations from the text or URL

Congratulations to try

2 comments:

iEn said...

alrite mas... thanks.. will try it later :D

Prototype said...

do you have a live demo of this?

Post a Comment

 

Recent Post