AJAX Tabs Content Script - Version 3.0 (YUI)

[bobster65]

AJAX Tabs Content Script - Version 3.0 (YUI)

Altho this is written for implementation within vBa CMPS, this can also be easily implemented anywhere within vB , ie on custom vB pages or within current vB pages.

Description/Whats changed within this new release?: This newest released version is based on YUI TabView http://developer.yahoo.com/yui/tabview/. This is an Initial release with the basic features of YUI TabView. More Powerful Enhancements/Configuration settings will be released as they are developed. I already have multiple enhancements underway.

vBa CMPS Version Note: Coded for v3x Modifications can be made to the php content files (Require Back-End) to work with vBa CMPS v2.x

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>

Step 4. 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. 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).



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.

[bobster65]

Additional Enhancements

** Coming Soon ** (Adding on the fly lol)

[bobster65]

** ADDITIONAL CONTENT FILES **

Coming soon! be patient.. all content files released for previous versions DO WORK with this

Album-Pictures - Side by Side display, default is 5 photos (simple change of a variable to increase/decrease).. sort by dateline or random.

Recent Blogs - This is a NEW Recent Blogs layout (similar to Recent Threads, but for Blogs)..

Blog Entry - This is a NEW Blog Entry style layout. It displays the entire entry. Can display random entires, more than one entry etc..

new vBclassifieds - vBclassifieds user submitted content file located here: http://www.vbadvanced.com/forum/show...&postcount=154 Submitted by: OYMjohn

new Shoutcast - Shoutcast user submitted content file located here: http://www.vbadvanced.com/forum/show...&postcount=161 Submitted by: ChipW

[greggus]

Greeeeeeeeeat

Will try this soon. Very nice work bobster65

[bobster65]

Originally Posted by greggus

Greeeeeeeeeat

Will try this soon. Very nice work bobster65

Cool Beans.. let me know how it goes and if you have any suggestions, Ideas etc .... As mentioned, this is just the basics of YUI TabView.. more advanced YUI Controls will be explained when I get a chance to write them up.

[Nordinho]

Hey Bob, great work! The thumbview_sidebyside is the one I needed.

What would be the best way to set up multiple tabview modules? Copying a module kind off works, however if I move one module the other one moves with it.

And is it possible to use a wrapper?

Btw adding width and height attributes to the attachment and a valign="top" give a more streamlined look (imo)

tabs.JPG

[bobster65]

Originally Posted by Nordinho

Hey Bob, great work! The thumbview_sidebyside is the one I needed.

What would be the best way to set up multiple tabview modules? Copying a module kind off works, however if I move one module the other one moves with it.

And is it possible to use a wrapper?

Btw adding width and height attributes to the attachment and a valign="top" give a more streamlined look (imo)

Attachment 4755

Thank You

ok, to do multiple modules, its just a matter of some IDs (Vars and Divs) within the template..

So lets take a look at the base template:

I've highlighted in RED the VAR Name that needs to be unique for each instance (and the same within each instance). NOTE: Pay attention to the end of each tab line as there is a VAR at the end that needs to match

I've highlighted in GREEN, the Div ID that needs to be unique for each instance (and the same within each instance).

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

So if you want a 2nd Module, you would do something like this.. (I just added the number 2 to everything to make it unique and identify it as the 2nd module.. you can name them anything you want***

<!-- YUI Tabs Display Start -->

<div id="tab_container2"></div>

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

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

</script>

<!-- YUI Tabs Display End  -->

** NOTE: Altho I said you can name them anything you want to, we need to also be careful in doing so.. for example, using myTabs will conflict with vbulletins use of the YUI Tabs within the profiles.. so come up with something unique to your site when naming these.. also, DO NOT USE TabView (Capital T and capital V) ... that is a no no as its part of the TabView Function lol.

Hope this made sense?

[bobster65]

Originally Posted by Nordinho

And is it possible to use a wrapper?

I've used wrappers with them in the past. I don't see why you couldn't. You might need to create a custom wrapper to achieve the look you want tho.

Originally Posted by Nordinho

Btw adding width and height attributes to the attachment and a valign="top" give a more streamlined look (imo)

Attachment 4755

I agree.. I have a little more work to do on the basic file. I just knocked that one out really quick to see if it was what the requesting member wanted. Its pretty easy to customize tho

[Nordinho]

Thanks,

Knew I was close, but forgot the last one "tabView2.appendTo"..no wonder it didn't work ...I'll give the wrapper some tries...

[KW802]

Bobster65,

Sounds good! Any links available of seeing the new version in action?

[ZenMastr1968]

Originally Posted by Nordinho

Thanks,

Knew I was close, but forgot the last one "tabView2.appendTo"..no wonder it didn't work ...I'll give the wrapper some tries...

You can use the same beginning and end formatting as before to make it "live" within the collapseable boxes....

add to your template

<tr>
<td class="$bgclass">

---YOUR CODE HERE ----

</td></tr>

Then turn on UseModuleWrapperTemplate in the module settings...

[ZenMastr1968]

Bob,
Just a couple of quick things... The new one looks great, looks like more options! Second, I managed to fix the port of Tom M. CURL RSS module and have it working in the v3.0 tabs along with the original tab_blog script. Thanks again...

[bobster65]

Originally Posted by KW802

Bobster65,

Sounds good! Any links available of seeing the new version in action?

Hey Bud.. long time no see

You can check out http://www.usafacommunity.com/ They just added it today.. the YUI TabView is SOOOOOOOOOOO much better (and so much more powerful) .. I am just touching the tip of the iceberg with the power it has.

[bobster65]

Originally Posted by Nordinho

Thanks,

Knew I was close, but forgot the last one "tabView2.appendTo"..no wonder it didn't work ...I'll give the wrapper some tries...

http://www.usafacommunity.com/ I just got done upgrading this site and used the default Module wrapper .. it works ok ..

[Nordinho]

Originally Posted by ZenMastr1968

You can use the same beginning and end formatting as before to make it "live" within the collapseable boxes....

add to your template

<tr>
<td class="$bgclass">

---YOUR CODE HERE ----

</td></tr>

Then turn on UseModuleWrapperTemplate in the module settings...

Thanks..worked like a charm!

[CFodder]

Oooh, oooohm, I'm gonna try this NOW!

[Nameless]

hmm not getting this to show on me site atall any ideaS?

Heres a example code from the start

<?php

// ++=========================================================================++
// || vBadvanced CMPS v3.0 RC1 (vB 3.6) - 30278
// || © 2003-2007 vBadvanced.com & PlurPlanet, LLC - All Rights Reserved
// || This file may not be redistributed in whole or significant part.
// || http://vbadvanced.com
// || Downloaded 10:58, Mon May 21st 2007
// || 
// ++ ========================================================================++

// ####################### SET PHP ENVIRONMENT ###########################
error_reporting(E_ALL & ~E_NOTICE);

// #################### DEFINE IMPORTANT CONSTANTS #######################
define('NO_REGISTER_GLOBALS', 1);
define('THIS_SCRIPT', 'Tabnews'); // change this depending on your filename

// ################### PRE-CACHE TEMPLATES AND DATA ######################
// get special phrase groups
$phrasegroups = array(
        'calendar',
		'adv_portal',
		'postbit'

);

// get special data templates from the datastore
$specialtemplates = array(

);

// pre-cache templates used by all actions

$globaltemplates = array(
    'adv_portal_newsbits',
    'vbnewscms_articlebit',
    'vbnewscms_articlelist',
     'adv_portal_tab_content_main',
    'vbnewscms_sectionhead'

[karlm]

Looking forward to trying this. I had a question about 20 minutes ago, then I got distracted, and I've forgotten my very important question. Damn!

[Frogger]

Is it possible to add forum title into tabrecentthreadsexp2.php

In the 2.0 release there were one version with the forum titles, but with no forum marking, and one version with the forum marking but without the forum titles.
I got a big wish to have both features in one release

[CFodder]

That would be most excellent Frogger .

Installed it last night and all working perfeck, great update thanks Bob .