Add-On Releases - AJAX Tabs Content Script - Version 3.0 (YUI)

AJAX Tabs Content Script - Version 3.0 (YUI)

This is written for implementation within both vBa CMPS AND within vbulletin (can add to any existing vbulletin template or custom template for use on custom vB pages)

Description/Whats changed within this new release?: This newest released version is based on YUI TabView http://developer.yahoo.com/yui/tabview/.

NOTE: This is an initial release with some of the basic features of YUI TabView. More Powerful Enhancements Addons/Enhanced Configuration settings will be released as soon as I write them up. I already have multiple enhancements underway. All Content Files that have been release with previous versions still work.

Note: I've included sample content files in the attached Zip File to use with the step by step how to.


THE BASICS TO GET YOU STARTED

The Following 5 easy steps will get the base system installed. Once you have the base system installed and tested, then move onto the Advanced Customization Steps.

Step 1. Upload the clientscript directory (located in the attached Zip File) to your vbulletin root directory (This will add all the new YUI files to the existing vbulletin clientscript/yui directory).

Step 2. EDIT and Upload the 3 sample content files (located in the SAMPLE CONTENT FILES FOLDER within the attached Zip File) to your vbulletin root directory.

NOTE: Edit the 3 sample content files to change the MODIFICATION CONTROL OPTIONS (starting at line 31) for your testing (mainly the ForumIDs so you can see sample result data)

NOTE 2: For those of you that have used previous versions, you can use your existing content files. (simple edit the template in step 4 to use your existing content files to test instead of the samples)

Step 3. Add the below code to the end of your HEADINCLUDE TEMPLATE.

<!-- YUI CSS for TabView -->
<link rel="stylesheet" type="text/css" href="clientscript/yui/tabview/assets/tabview.css" />
<link rel="stylesheet" type="text/css" href="clientscript/yui/tabview/assets/tabview-skin.css" />
<!-- JavaScript Dependencies for Tabview: -->
<script type="text/javascript" src="clientscript/yui/utilities/utilities.js"></script>
<script type="text/javascript" src="clientscript/yui/element/element-beta-min.js"></script>
<!-- Source file for TabView -->
<script type="text/javascript" src="clientscript/yui/tabview/tabview-min.js"></script>
<!-- Source file for Dispatcher -->
<script type="text/javascript" src="clientscript/yui/tabview/dispatcher-min.js"></script>

STEPS 4 and 5 are for vBa CMPS Use Only.... Skip these steps and follow the ALT Step for vB Pages.

Step 4 (FOR vBa CMPS ONLY). Create a new TEMPLATE Module.

Module Title: What ever you want to name it.(ie, Tab Content)
Template to Include: What ever you want to name it (ie, Tab_Content_Main)
Select the Styles you want it added to.
Template Content: Paste the below code into the box.
Use Module Wrapper Template: NO
Usergroup Permissions: Set your perms to your liking

<!-- YUI Tabs Display Start -->

<div id="tab_container"></div>

<script type="text/javascript">
var tabView = new YAHOO.widget.TabView();

	YAHOO.plugin.Dispatcher.delegate( new YAHOO.widget.Tab({ label: 'tab 1', dataSrc: 'tabsample1.php', cacheData: false, active: true }), tabView);
	YAHOO.plugin.Dispatcher.delegate( new YAHOO.widget.Tab({ label: 'tab 2', dataSrc: 'tabsample2.php', cacheData: false }), tabView);
   	YAHOO.plugin.Dispatcher.delegate( new YAHOO.widget.Tab({ label: 'tab 3', dataSrc: 'tabsample3.php', cacheData: false }), tabView);
   	tabView.appendTo('tab_container');

</script>

<!-- YUI Tabs Display End  -->

Step 5 (FOR vBa CMPS ONLY). Add the New Module to a page and test it out. You should have a Tabbed Module with 3 Tabs (tab 1, tab 2 and tab 3) and all 3 should display a layout similar to the Recent Threads Module (unless you used your own custom content modules).


ALT Step for vB Pages(To Use on any vB Page). Simply add the following code to any vBulletin Template for where you want Tabs to display.

<!-- YUI Tabs Display Start -->

<div id="tab_container"></div>

<script type="text/javascript">
var tabView = new YAHOO.widget.TabView();

	YAHOO.plugin.Dispatcher.delegate( new YAHOO.widget.Tab({ label: 'tab 1', dataSrc: 'tabsample1.php', cacheData: false, active: true }), tabView);
	YAHOO.plugin.Dispatcher.delegate( new YAHOO.widget.Tab({ label: 'tab 2', dataSrc: 'tabsample2.php', cacheData: false }), tabView);
   	YAHOO.plugin.Dispatcher.delegate( new YAHOO.widget.Tab({ label: 'tab 3', dataSrc: 'tabsample3.php', cacheData: false }), tabView);
   	tabView.appendTo('tab_container');

</script>

<!-- YUI Tabs Display End  -->

Now that you have added the code to a template, test the page out. You should have a Tabbed Layout with 3 Tabs (tab 1, tab 2 and tab 3) and all 3 should display a layout similar to the Recent Threads Module (unless you used your own custom content modules)



ADVANCED CUSTOMIZATION

Now that you have the new base system installed, its time to Customize the Tabs. Customization includes CSS to match your style(s), Controlling the Tabs and Custom Content for each Tab


TABS

To control the tabs, you will need to modify the template created in Step 4.

Lets examine a tab (the line of code in the template for each tab). The first example is for the ACTIVE tab (the one that is launched when the page is first displayed). The 2nd is for all other tabs since you only have one active tab.

What you need to be concerned with is what is inside the {} (I've highlited this in RED)

lable: This is the Display Name of the Tab
dataSrc: This is the content file associated with the specific tab
cacheData: This allows you to control whether the content from the dataSrc is to be cached or to be called each time the tab is selected. Set this to false if you want the data to be updated when you click on the tab. Set it to True if you want the data to be cached upon page launch
active: true .. only use this for the first tab.

ACTIVE TAB EXAMPLE

YAHOO.plugin.Dispatcher.delegate( new YAHOO.widget.Tab({ label: 'tab 1', dataSrc: 'tabsample1.php', cacheData: false, active: true }), tabView);

NON ACTIVE TAB EXAMPLE

YAHOO.plugin.Dispatcher.delegate( new YAHOO.widget.Tab({ label: 'tab 2', dataSrc: 'tabsample2.php', cacheData: false }), tabView);

CSS

You will probably notice that there are TWO CSS Files that are being called in the HEADINCLUDE template (tabview.css & tabview-skin.css). I broke the CSS into two files so that the control elements that SHOULD NOT be edited are contained in one file (tabview.css) and the control elements that CAN be edited are in the other (tabview-skin.css).

I made plenty of comments in the tabview-skin.css file that should help you change the tab colors to match your style. Just simply look for the Color Elements and match them to the color elements of your Styles CSS. I am FAR from a CSS guru.. I learned by playing around with the settings

The tabview-skin.css file is located in: clientscript/yui/tabview/assets/tabview-skin.css


Content Files

Please see posts 2&3 of this thread for additional enhancements. Members are encourage to provide their custom content file for inclusion in Post 3.

[Mazinger]

I want this to display content in the same page, not an external page. Any help?

[bobster65]

Originally Posted by Mazinger

I want this to display content in the same page, not an external page. Any help?

That is what this does.. I don't understand what you are having problems with. Can you explain what you've done so far and what you are attempting to do?

[Mazinger]

I noticed it fetches content from external pages. I want it to fetch content from the same page.. something like this: http://www.dynamicdrive.com/dynamicindex17/tabcontent/

[bobster65]

Originally Posted by Mazinger

I noticed it fetches content from external pages. I want it to fetch content from the same page.. something like this: http://www.dynamicdrive.com/dynamicindex17/tabcontent/

This CAN do the same thing. YUI is FAR superior to the Dynamic Drive scripts (which I have also released.. https://vborg.vbsupport.ru/showthread.php?t=161197 )

As I mentioned in the First post, there is A TON that YUI Tab view CAN do.. if you just want non ajax tabbed content, You can read up on YUI Tab View here.. http://developer.yahoo.com/yui/tabview/

Try this and see if its more in tune of what you want to do..

Use the same two CSS Files, but there is no need for the Dispatcher.js, so you can use a different connection method.. (Replace the rest of the HEADINCLUDE from step 3 with the below:

<!-- JavaScript Dependencies for Tabview: --> 
<script type="text/javascript" src="yui/yahoo-dom-event/yahoo-dom-event.js"></script> 
<script type="text/javascript" src="yui/element/element-beta-min.js"></script> 
<!-- OPTIONAL: Connection (required for dynamic loading of data) --> 
<script type="text/javascript" src="yui/connection/connection-min.js"></script> 
<!-- Source file for TabView --> 
<script type="text/javascript" src="yui/tabview/tabview-min.js"></script>

Then you can use one of the following two content methods.....


TabViews can be created from existing HTML markup or entirely through JavaScript. Each Tab in the TabView is a list item (<li>). The root element of the TabView is a <div> element.

The TabView control is defined by YAHOO.widget.TabView. To create a TabView from existing markup you can simply pass the id (or object reference) for the HTMLElement that will become the TabView. If you follow the default markup pattern outlined below, the tabs will be constructed automatically. The list item with class="selected" becomes the active tab.

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

<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>

In the this example, the TabView is generated entirely through JavaScript. Here the TabView's DOM structure will be assembled in a new element and appended to the existing document.body.

<script type="text/javascript">
    var myTabs = new YAHOO.widget.TabView("demo");
	
    myTabs.addTab( new YAHOO.widget.Tab({
        label: 'Tab One Label',
        content: '<p>Tab One Content</p>',
        active: true
    }));
    
    myTabs.addTab( new YAHOO.widget.Tab({
        label: 'Tab Two Label',
        content: '<p>Tab Two Content</p>'
    }));
    
    myTabs.addTab( new YAHOO.widget.Tab({
        label: 'Tab Three Label',
        content: '<p>Tab Three Content</p>'
    }));
    
    myTabs.appendTo(document.body);
</script>

[FiMeTi]

Anyone solved the problem with the loading.gif?
Check first post on page 4 in this thread. ^^

peaze

[bobster65]

Originally Posted by FiMeTi

Anyone solved the problem with the loading.gif?
Check first post on page 4 in this thread. ^^

peaze

sorry, not yet.. I have not even had 5 minutes to look into it yet. I am sure its something simple tho as it works, just that its showing up in ALL the divs lol

[derandechser]

Hi Bobster and thank you again for the "Album-Pics"-Feature.
Is it possible to show latest comments for Album-Pics in a seperate Tab.
This would be helpful.

Another thing is this. I´m showing up the latest events from calendar on my forumhome. Now, i like to put it in a seperate tab, to clean up my forumhome. I tried a few things but that didn´t work. maybe you got an idea how to solve it?

Sorry for my questions, i know, you must be very busy.
Thanks for your support and for this very useful addon!

Greetings, Peter

[bobster65]

Originally Posted by derandechser

Hi Bobster and thank you again for the "Album-Pics"-Feature.
Is it possible to show latest comments for Album-Pics in a seperate Tab.
This would be helpful.

Another thing is this. I?m showing up the latest events from calendar on my forumhome. Now, i like to put it in a seperate tab, to clean up my forumhome. I tried a few things but that didn?t work. maybe you got an idea how to solve it?

Sorry for my questions, i know, you must be very busy.
Thanks for your support and for this very useful addon!

Greetings, Peter

Hi Peter,

I do have a couple different calendar/event content files.. however, they were written over a year ago, so I will have to update those before I release them.. if you want to PM me a mock up of what you are looking for, go ahead and do that and I'll try and get something out soon..

As far as latest comments for album pics, I'll look into it.. shouldn't be to tough.

[Magnumutz]

Is it possible to use this Tabs Content Script to replace the forumhome?
Like your other one can: https://vborg.vbsupport.ru/showthread.php?t=175687 ?
Cuz i was thinking of getting rid of the vBAdvanced portal

[gwerzal]

Hi

Again thanks for a great mod

I have this installed on my site as a vba module but would there be any way to have a second module with different tabs.

Thank you in advance
Ben Jones