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.

[ButtKrust]

Is there a way to pass the Forum ID through so that the forum ID can be used for various things within the PHP files (tabsampel1.php, tabsample2.php, tabsample3.php, ect)? Or is there another way to about grabbing the current Forum ID of where the php file is currently being viewed? Hope that makes sense.

[bobster65]

Originally Posted by ButtKrust

Is there a way to pass the Forum ID through so that the forum ID can be used for various things within the PHP files (tabsampel1.php, tabsample2.php, tabsample3.php, ect)? Or is there another way to about grabbing the current Forum ID of where the php file is currently being viewed? Hope that makes sense.

Not sure I follow you .. can you try and explain in more detail..

[wmlvb]

Originally Posted by bobster65

Hi Lark,

Yes, those tabs use the default recent threads content module.. that was designed to mimic the output of the default vBa CMPS Recent Thread Module. The best way to do this is to edit each custom content file and add the output of the "ALT" text (or preview) .. I know YOU can't easily do this, but I can, so just email me. And no, you can't just "over write" these files with code from another file as there are specific setting in them to tell them what Forum to pull from, how many thread to pull, what order, etc etc etc...

Bob

Hey bob,

had not heard back! Was wondering about any update on this add-on? Thanks

[bobster65]

Originally Posted by wmlvb

Hey bob,

had not heard back! Was wondering about any update on this add-on? Thanks

I wrote you back, said that I would try and work on something for you during my free time (which I don't have a lot of).. If you need something done faster, put in a request for paid services, there are a ton of people here that can easily assist you and you might even find someone that can do it for free.. I just don't have time to do a bunch of free customizations for people..

[ButtKrust]

Originally Posted by bobster65

Not sure I follow you .. can you try and explain in more detail..

Well for some reason when i try to program in php in the files that are being viewed through the tabs (tabsample1, tabsample2, tabsample3), I've make new files and put my own code in and I can't use the $foruminfo['forumid'] to do anything, whether it be echo the value or use a condition. Are there certain files i need to include in those? I have global.php included, and i've tried having several others included, but not matter what i do i can't get the forum id of the forum currently viewing the ajax tabs to show the id inside that tab. I hope that makes sense. I can get what i need to show through the tabs, now i just need that to change based on the forumid without having to make a new module with a new set of tabs. Thanks for any help you can give.

For example, INSIDE the php file tabsample1.php, pretent i've made my own file out of it. I need to be able to say if($foruminfo[forumid]==5) show this, and if it is something else, show that. "Echo $foruminfo" shows the word "array", but $foruminfo[forumid] shows nothing at all. So it clearly isn't being able to pick up the forumid. Unless i'm doing something wrong like not including the right support files or not coding something right.

[wmlvb]

Originally Posted by bobster65

I wrote you back, said that I would try and work on something for you during my free time (which I don't have a lot of).. If you need something done faster, put in a request for paid services, there are a ton of people here that can easily assist you and you might even find someone that can do it for free.. I just don't have time to do a bunch of free customizations for people..

Thanks for the reply bob
I guess my original request was for something similar to what was requested a few post before mine which would be an addon .php file. I think you mentioned to that poster you were working on that additional option. Is that no longer in the works?

[bobster65]

Originally Posted by wmlvb

Thanks for the reply bob
I guess my original request was for something similar to what was requested a few post before mine which would be an addon .php file. I think you mentioned to that poster you were working on that additional option. Is that no longer in the works?

which post, there are so many lol.. it might have been one of the addons for TFH (Tabbed Forum Home) ?

One of these days, members might actually realize that they can release and support content files for this...

[ButtKrust]

Ignore what i said earlier, and let me put it this way.

When i create a new PHP MODULE with vbadvanced, and in the settings section i set the "Initialize Forum Permissions" to YES, it allows me to use $foruminfo[forumid] in the php file and it works fine. When i copy this exact same file and call it with the TEMPLATE module for this AJAX TABS, (EX: Datasrc: "tabsample1.php") i CAN NOT use $foruminfo[forumid]. It simply doesn't work. Is this because "Initialize Forum Permissions" haven't been allowed for this? Is it because this is a TEMPLATE module rather than a PHP module? Is there a way to set TEMPLATE modules to have this very same setting? Is there a way i can go about getting $foruminfo[forumid] to work when the php files are called through these AJAX tabs? I hope to God in heaven this made sense. I really need this to work.

[kfiasche81]

it's work on 3.8.x ?

[bobster65]

Originally Posted by ButtKrust

Ignore what i said earlier, and let me put it this way.

When i create a new PHP MODULE with vbadvanced, and in the settings section i set the "Initialize Forum Permissions" to YES, it allows me to use $foruminfo[forumid] in the php file and it works fine. When i copy this exact same file and call it with the TEMPLATE module for this AJAX TABS, (EX: Datasrc: "tabsample1.php") i CAN NOT use $foruminfo[forumid]. It simply doesn't work. Is this because "Initialize Forum Permissions" haven't been allowed for this? Is it because this is a TEMPLATE module rather than a PHP module? Is there a way to set TEMPLATE modules to have this very same setting? Is there a way i can go about getting $foruminfo[forumid] to work when the php files are called through these AJAX tabs? I hope to God in heaven this made sense. I really need this to work.

If you are needing to include variables that are created by a specific function, then you need to include that function within the content php file.

Originally Posted by kfiasche81

it's work on 3.8.x ?

yes