sharing post: 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

sharing post

Wednesday, December 17, 2008

Make Tabview with YUI

2 comments: