With the sensationalized aura surrounding this “web 2.0” myth, there is more and more of a call for AJAX enabled sites. This demand gets higher due to sites like Facebook, MySpace, Twitter, and so forth. So when going forward with a design to implement AJAX libraries, which one is the best. The answer: Whichever one fits the job at hand. There are good points to Scriptaculous, jQuery DoJo and others. There is a good list of some of these with pros and cons at The Chandler Project, and a further list of other libraries at eDevil’s Weblog.
The one I am going to cover is a newer one, and one that is hosted elsewhere, which has its own pros and cons, and that is the Yahoo User Interface, or YUI. The documentation, the downloads (if you desire), tutorials and other information is located at http://developer.yahoo.com/yui/ and is very extensive for the different aspects it can do. What I am going to cover is something useful for long pages of content on the web, Tabbed Viewing.
Tabbed viewing allows for a load of content, to be displayed parts at a time, then when a user needs the next piece of information, they can click on a tab, and then new content is available without having to reload the page. The YUI provides great tutorials for these, and examples, with code. It is located at: http://developer.yahoo.com/yui/examples/tabview/index.html. Since the web is polluted with duplicates, I will not do that, but will instead show what I have done with this. I used the “build from markup” path on this one.
First you have your content. Now if this was really long content, we could break this up in 4 tabs. We would add the YUI libraries to be used, the following needs to be included:
<!-- This will bring in the font styles for the tab and content from the YUI hosted styles --> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.1/build/fonts/fonts-min.css" /> <!-- This will bring in the style for the tabs from the YUI hosted styles --> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.1/build/tabview/assets/skins/sam/tabview.css" /> <!-- The dependencies for the tab view --> <script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/element/element-beta-min.js"></script> <!-- Source library for the tab view --> <script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/tabview/tabview-min.js"></script>
In order to do dynamic loading, dynamic tab building and loading, there needs to be more libraries called, and you can see that in the YUI reference pages.
Now comes the styling. Since not every page will need to styled the way Yahoo! thinks it should be, I found some tags that I have replaced with inline CSS.
<style type="text/css">
.yui-navset {width: 802px; }
.yui-skin-sam .yui-navset .yui-nav, .yui-skin-sam .yui-navset .yui-navset-top .yui-nav { border-color:#38487C; border-style:solid; border-width:0pt 0pt 5px; }
.yui-skin-sam .yui-navset .yui-nav .selected a, .yui-skin-sam .yui-navset .yui-nav .selected a em { font-weight:bold; }
.yui-skin-sam .yui-navset .yui-nav .selected a, .yui-skin-sam .yui-navset .yui-nav .selected a:focus, .yui-skin-sam .yui-navset .yui-nav .selected a:hover { background:#38487C; color:#FECE55; }
.yui-skin-sam .yui-navset .yui-nav a:hover,
.yui-skin-sam .yui-navset .yui-nav a:focus {
background:#A5B7D8 url(../../../../assets/skins/sam/sprite.png) repeat-x left -1300px; /* selected tab background */
outline:0;
}
.yui-skin-sam .yui-navset .yui-content,.yui-skin-sam .yui-navset .yui-navset-top .yui-content{border:0px solid #808080; border-top-color:#243356; padding:0.25em 0.5em;}
.yui-skin-sam .yui-navset-left .yui-content{border:1px solid #808080;border-left-color:#243356;}
.yui-skin-sam .yui-navset-bottom .yui-content,.yui-skin-sam .yui-navset .yui-navset-bottom {border:1px solid #808080;border-bottom-color:#243356;}
.yui-skin-sam .yui-navset .yui-content{background:#FFFFFF;}
.yui-navset .yui-content{zoom:1;}
.yui-content{border:0px solid #808080;border-bottom-color:#243356;}
</style>
By resetting these, it will overwrite the styles for the tabs, the content area and the hover properties. Again, if you are fine with the Yahoo! method, that is fine. If not, these tags should help you on your own theme style.
It is important to ID the tab area DIV tag what you call out in the TabView() method. Add DIV tags to surround the tabbed area to set up a “boundary”. And then add the DIV tag for the tabbed area to be placed inside.
<div class='yui-skin-sam'>
<div id='content_area_name' class='yui-navset'>
ALL CONTENT WOULD GO HERE
</div>
</div>
Now the tabs. The tabs are UL and LI elements styled up. They are the first things in the DIV ‘content_area_name’ tag.
<ul class="yui-nav">
<li class="selected"><a href="#content1"><em>Content One</em></a></li>
<li><a href="#content2"><em>Content Two</em></a></li>
<li><a href="#content3"><em>Content Three</em></a></li>
<li><a href="#content4"><em>Content Four</em></a></li>
</ul>
You can choose which tab shows up first by adding the “selected” class to the LI tag. The EM tags are important to provide the padding and the spacing for the tabs. If you choose to leave those out, the text in the tabs will have no spacing and the tabs will lose some of their styling.
Now we add a DIV tag to show the content area for each tab, then a DIV tag with the ID of the href listed above for each tab section.
<div class="yui-content">
<div id="content1">
CONTENT GOES HERE
</div>
<div id="content2">
CONTENT GOES HERE
</div>
<div id="content3">
CONTENT GOES HERE
</div>
<div id="content4">
CONTENT GOES HERE
</div>
</div>
We need to include the script to call out the DIV area for the tabbed events, and content in these tabs.
<script>
(function() {
var tabView = new YAHOO.widget.TabView('content_area_name');
})();
</script>
And that should create the tabs, content is now available and will load the different tabs without reloading the page.
The entire code would look like this now:
<!-- This will bring in the font styles for the tab and content from the YUI hosted styles -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.1/build/fonts/fonts-min.css" />
<!-- This will bring in the style for the tabs from the YUI hosted styles -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.1/build/tabview/assets/skins/sam/tabview.css" />
<!-- The dependencies for the tab view -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/element/element-beta-min.js"></script>
<!-- Source library for the tab view -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/tabview/tabview-min.js"></script>
<style type="text/css">
.yui-navset {width: 802px; }
.yui-skin-sam .yui-navset .yui-nav, .yui-skin-sam .yui-navset .yui-navset-top .yui-nav { border-color:#38487C; border-style:solid; border-width:0pt 0pt 5px; }
.yui-skin-sam .yui-navset .yui-nav .selected a, .yui-skin-sam .yui-navset .yui-nav .selected a em { font-weight:bold; }
.yui-skin-sam .yui-navset .yui-nav .selected a, .yui-skin-sam .yui-navset .yui-nav .selected a:focus, .yui-skin-sam .yui-navset .yui-nav .selected a:hover { background:#38487C; color:#FECE55; }
.yui-skin-sam .yui-navset .yui-nav a:hover,
.yui-skin-sam .yui-navset .yui-nav a:focus {
background:#A5B7D8 url(../../../../assets/skins/sam/sprite.png) repeat-x left -1300px; /* selected tab background */
outline:0;
}
.yui-skin-sam .yui-navset .yui-content,.yui-skin-sam .yui-navset .yui-navset-top .yui-content{border:0px solid #808080; border-top-color:#243356; padding:0.25em 0.5em;}
.yui-skin-sam .yui-navset-left .yui-content{border:1px solid #808080;border-left-color:#243356;}
.yui-skin-sam .yui-navset-bottom .yui-content,.yui-skin-sam .yui-navset .yui-navset-bottom {border:1px solid #808080;border-bottom-color:#243356;}
.yui-skin-sam .yui-navset .yui-content{background:#FFFFFF;}
.yui-navset .yui-content{zoom:1;}
.yui-content{border:0px solid #808080;border-bottom-color:#243356;}
</style>
<div class='yui-skin-sam'>
<div id='content_area_name' class='yui-navset'>
<ul class="yui-nav">
<li class="selected"><a href="#content1"><em>Content One</em></a></li>
<li><a href="#content2"><em>Content Two</em></a></li>
<li><a href="#content3"><em>Content Three</em></a></li>
<li><a href="#content4"><em>Content Four</em></a></li>
</ul>
<div class="yui-content">
<div id="content1">
CONTENT GOES HERE
</div>
<div id="content2">
CONTENT GOES HERE
</div>
<div id="content3">
CONTENT GOES HERE
</div>
<div id="content4">
CONTENT GOES HERE
</div>
</div>
</div>
</div>
<script>
(function() {
var tabView = new YAHOO.widget.TabView('content_area_name');
})();
</script>
You can put all of the code inside the BODY tags, and sometimes you have to based on templates being used. Or you can take the CSS, JavaScript calls, and inline styles, put those in the HEADER tags, and put the rest in the BODY tags.
Here are a couple of sample pages with the YUI Tab View, both in their styles, and in the new style listed above.
Thanks for information. Friends send me a link. Intresting. Subscribed on RSS! Want to read your blog more and more!