[UPHPU] So they want tabs, huh?

[Marcellus Barrus]

Cole,

I use tabs all over the place.  I used to create them myself, but the
javascript got to cumbersome.  I found the Yahoo! UI Library has a great
foundation for creating tabs.

Include the tab javascript dependencies and css provided by YUI...
Define your tab in javascript...
Display divs that control your tab content....

<!-- Dependencies -->
<!-- core CSS -->
<link rel="stylesheet" type="text/css" href="tabview.css">

<!-- optional skin for border tabs -->
<link rel="stylesheet" type="text/css" href="border_tabs.css">

<script type="text/javascript" src="yahoo.js"></script>
<script type="text/javascript" src="dom.js"></script>
<script type="text/javascript" src="event.js"></script>

<!-- OPTIONAL: Connection (required for dynamic loading of data) -->
<script type="text/javascript" src="connection.js"></script>

<!-- Source file -->
<script type="text/javascript" src="tabview.js"></script>

<!-- This is where we define the tabview within javascript -->
<script type="text/javascript">
var myTabs = new YAHOO.widget.TabView("demo");
</script> 

<!-- This is tabview tab markup -->
<div id="demo" class="yui-navset">
    <ul class="yui-nav">
        <li class="selected"><a href="#tab1"><em>Tab One Label</em></a></li>
        <li><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>

The example is very basic but works.  It might not be exactly what you are
looking for, but might give you a starting point.  I have including links
where you can get more information about YUI and the YUI Tabview.

http://developer.yahoo.com/yui/
http://developer.yahoo.com/yui/tabview/

Best Regards,
-M



> -----Original Message-----
> From: uphpu-bounces at uphpu.org [mailto:uphpu-bounces at uphpu.org] On Behalf
> Of cole at colejoplin.com
> Sent: Wednesday, January 31, 2007 5:52 PM
> To: uphpu at uphpu.org
> Subject: [UPHPU] So they want tabs, huh?
> 
> Hi Everyone,
> 
> I've started down the road a bit here, I've got a solution, but wanted
> to throw this at the group. We have on our site a javascript popup,
> that has a price comparison for DVDs. Here's an example, the big
> yellow Compare Prices button at
> http://movies.toptenreviews.com/reviews/mr88.htm. Please don't get me
> started on page design here, let's just say I'd love to see some
> changes, all over the place. I have boundaries to observe, and there
> are lots of other hands involved.
> 
> They want to compare prices widescreen to widescreen, fullscreen to
> fullscreen, director's cuts, extended editions...you get the idea from
> the popup. They want to lose the popup, and have tabs within the page
> to do the display. My first reaction was AJAX, and I've already got a
> solution that does that. I was inspired by an example at
> (http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/), but
> have made some additions to do simple content, with no external file
> loading involved. I'll use PHP to create the tab content.
> 
> What I like about it is the vertical resizing. No one is sqeamish
> about javascript here. My question: are there any alternatives I
> should consider. I have to have a working demo on Monday.
> 
> Thanks.  -- Cole
> 
> P.S. In case someone is shocked to see actual tables in the popup
> page, note they are strictly for *tabular data* only. The movie page
> itself has no tables at all, and is a treasure trove of layout
> challenges.
> 
> 
> 
> _______________________________________________
> 
> UPHPU mailing list
> UPHPU at uphpu.org
> http://uphpu.org/mailman/listinfo/uphpu
> IRC: #uphpu on irc.freenode.net