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.

[FiMeTi]

Why not just try it? ^^

Hey bob looks like you aint have plenty of time, but please buddy I need that loading.gif error fixxed, because this error is a pain in the azz.
I want to go online very soon and hopefully without any bugs on my site.

Regards
FiMeTi

[glorify]

Hey Bob-o,

I want to combine this hack with this because the tab content script conflicts with vb's ajax.

If you have any idea or can point me in the direction, please lemme know.

I tried screwing with it, but get all the posters tabs in the first post.

[Sworm]

For a newbye is impossible to install this hack, very hard explanation.

[glorify]

This isn't your average hack to install. It's not like it's a straight plugin. You have to have some knowledge but bob is very good at supporting his hacks. Just ask.

[Ozidoggy]

Don't worry... sorted it out!

GREAT MOD!!!!!

[S]Can anyone show me how to set a tab up to include my own content/html and still use the forum style? I want to put some tables with links in them. I have no problems with all the html, I just don't know how to put this content in for a tab.

I am new to this, so any help would be appreciated.[/S]

[bobster65]

Oye! Lots to catch up on!! Sorry guys, going through a rough time in personal life right now, so my dev time has taken a serious hit.... Family comes first.. hope you can all understand that.

Originally Posted by SoulSuite

Is it possible to show per category? Not threads but topics..

I'm not sure I understand what you are asking for. Can you give me an example. Btw, you can write any content file you want and feel free to use/modify the ones I've written to do what you need to do. Yer not limited to using the ones I've provided.

Originally Posted by ikastara

Just want to share my experience,
I think this mod assumed that cmps resides inside vbulletin root folder. I have my cmps file 1 folder up from vB, and i can not get this working by following original instruction.
After a lot of trial and error I finally geit it working by changing path in the template to point to the content php files. Then after that also need to edit content files to add required path.

hope this is useful for somebody

*ps: bobster65, if this is not how you intend it to be can please let me know what is the correct approach ?
Thanks ! great mod !

Ya, the path thing works for some setups and not for others. I'll try and explain that better in the install instructions and also try and work in some fixes to alleviate that issue.

Originally Posted by Tianuc

Can I use it?

NEW GARS 02-07-2008 - https://vborg.vbsupport.ru/showp...&postcount=113 - GARS Content File - ZiG

Don't see why you couldn't.. as long as its written for the version of Gars that you have, you should be good to go.

Originally Posted by FiMeTi

Why not just try it? ^^

Hey bob looks like you aint have plenty of time, but please buddy I need that loading.gif error fixxed, because this error is a pain in the azz.
I want to go online very soon and hopefully without any bugs on my site.

Regards
FiMeTi

ya ya ya ... I got that as a "bug" its buggin me too, just have not had the time with all that's going on right now... I'm sure its a simple CSS fix. Hang tight!

[bobster65]

Originally Posted by glorify

Hey Bob-o,

I want to combine this hack with this because the tab content script conflicts with vb's ajax.

If you have any idea or can point me in the direction, please lemme know.

I tried screwing with it, but get all the posters tabs in the first post.

Sup G.. damn your chargers anyway! lol

Not sure what you mean by combining... yer still running the ver 2 of AJAX Tabs right? that other hack uses the same JS from dynamic drive, so its probably just some variable clashes.. they both should work fine together..

Or are you wanting to convert his mod to use YUI?

Originally Posted by Sworm

For a newbye is impossible to install this hack, very hard explanation.

my appologies.. this was never written to be a XML plugin for easy install. Its done this way so that it is beyond flexable for multiple uses and ease of customization. Its really not that difficult... if you are having problems with a certain step, just ask.

Originally Posted by glorify

This isn't your average hack to install. It's not like it's a straight plugin. You have to have some knowledge but bob is very good at supporting his hacks. Just ask.

I try my best, but right now its been difficult because of some real life issues.. I still try tho.

Originally Posted by Ozidoggy

Don't worry... sorted it out!

GREAT MOD!!!!!

[S]Can anyone show me how to set a tab up to include my own content/html and still use the forum style? I want to put some tables with links in them. I have no problems with all the html, I just don't know how to put this content in for a tab.

I am new to this, so any help would be appreciated.[/S]

Glad you got it figured out.. hope you didn't waste to much time figuring it out

[glorify]

Originally Posted by bobster65

Sup G.. damn your chargers anyway! lol

Not sure what you mean by combining... yer still running the ver 2 of AJAX Tabs right? that other hack uses the same JS from dynamic drive, so its probably just some variable clashes.. they both should work fine together..

Or are you wanting to convert his mod to use YUI?

Yep, convert it to YUI

[bobster65]

Originally Posted by glorify

Yep, convert it to YUI

ok, I'll chat with him about it. He's testing this out right now, so he might upgrade his to YUI by seeing how this one works.. hang tight!

[joeldaviddc]

i have installed it in a fresh vbulletin instalation for tests, i can see the tabs, but no the contents

the tabsample files are in place (root directory), the headinclude was correct (i have added my url path to the href..but the same result)

i have added your template code to forumhome (after main section), i can see the tabs, but no the content