Version 1.0 ahahLib.js AJAX Tabs
This is what I've done so far to implement AJAX Tabs functionality within vBadvance for my websites and others using the ahahLib.js version of AJAX Tabs...
CMPS Version Note: Coded for CMPS v3.0 RC1. Modifications can be made to the php file (Require Back-End) to work with CMPS v2.x
CMPS Module Type: TEMPLATE w/Alternative Module Wrapper Template
Templates: adv_portal_Tab_Block, adv_portal_alt_module_wrapper (
optional)
Files: ahahLib.js, TabAJAX.css, tabcontent.php
Note:
I've included sample files in the attached Zip File to use with the step by step how to.
Download the latest ahahLib.js file from crackajax.net (
http://www.crackajax.net/ahahLib.js) (now included in the zip file)
Step 1.
Upload the ahahLib.js file.
No modifications to this file are needed. The location I chose was the clientscript folder that comes default with your vBulletin installation.
path example: /www/forums/clientscript
It doesn't HAVE to go there, I just chose to put it there since its a common place for js files.
Step 2.
Create, Name and Upload CSS file.
The location I chose was the vbulletin_css folder that comes default with your vBulletin installation.
path example: /www/forums/clientscript/vbulletin_css
Again, it doesn't HAVE to go there, I just chose to put it there since its a common place for css files. You can name the css file anything you like.. I named mine TabAJAX.css .
Note:
Modifications to this file can be made once you get the initial sample system up and running.
CSS file - Sample Name: TabAJAX.css
Code:
pre {text-indent: 30px}
#tabmenu {
color: #000;
border-bottom: 1px solid black;
margin: 12px 0px 0px 0px;
padding: 0px;
z-index: 1;
padding-left: 10px }
#tabmenu li {
display: inline;
overflow: hidden;
list-style-type: none; }
#tabmenu a, a.active {
color: #aaaaaa;
background: #295229;
font: normal 1em verdana, Arial, sans-serif;
border: 1px solid black;
padding: 2px 5px 0px 5px;
margin: 0px;
text-decoration: none;
cursor:hand; }
#tabmenu a.active {
background: #ffffff;
border-bottom: 3px solid #ffffff; }
#tabmenu a:hover {
color: #fff;
background: #ADC09F; }
#tabmenu a:visited {
color: #E8E9BE; }
#tabmenu a.active:hover {
background: #ffffff;
color: #DEDECF; }
#content {font: 0.9em/1.3em verdana, sans-serif;
text-align: justify;
background: #ffffff;
padding: 20px;
border: 1px solid black;
border-top: none;
z-index: 2; }
#content a {
text-decoration: none;
color: #E8E9BE; }
#content a:hover { background: #aaaaaa; }
Step 3.
Create, Name and Upload PHP file.
The location I chose was the FORUMS root.
path example: /www/forums
You can name this file anything you want. I named mine tabcontent.php
Note:
Modifications to this file can be made once you get the initial system up and running.
PHP file - Sample name: tabcontent.php
PHP Code:
<?php
// ####################### SET PHP ENVIRONMENT ###########################
error_reporting(E_ALL & ~E_NOTICE);
// #################### DEFINE IMPORTANT CONSTANTS #######################
define('NO_REGISTER_GLOBALS', 1);
define('THIS_SCRIPT', 'tabcontent'); // change this depending on your filename
// ################### PRE-CACHE TEMPLATES AND DATA ######################
// get special phrase groups
$phrasegroups = array(
);
// get special data templates from the datastore
$specialtemplates = array(
);
// pre-cache templates used by all actions
$globaltemplates = array(
'TAB',
);
// pre-cache templates used by specific actions
$actiontemplates = array(
);
// ######################### REQUIRE BACK-END ############################
require_once('./global.php');
require_once('./includes/vba_cmps_include_template.php');
require_once('./includes/vba_cmps_global.php');
// #######################################################################
// ######################## START MAIN SCRIPT ############################
// #######################################################################
?>
<?php
if ($_GET['content'] == 1) {
echo 'Congrats, Insert Dynamic or Static Code here for Tab 1';
}
if ($_GET['content'] == 2) {
echo 'Insert Dynamic or Static Code here for Tab 2';
}
if ($_GET['content'] == 3) {
echo 'Insert Dynamic or Static Code here for Tab 3';
}
?>
Step 4. (
optional)
Create an Alternative Module Wrapper Template.
I chose to do this, because I didn't want to use the standard Module Wrapper that comes default with vBadvanced.
NOTE: Use the default wrapper if you choose not to create your own custom one. I named mine - adv_portal_alt_module_wrapper
Alternative Module Wrapper Template - Sample name: adv_portal_alt_module_wrapper
Code:
<div style="padding-bottom:$vba_style[portal_vspace]px">
<table align="center" border="0" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" width="100%">
<tbody id="collapseobj_module_$mods[collapse]" style="$modcollapse">
<if condition="$show['tablerow']">
<tr>
<td class="$bgclass">
$modulehtml
</td>
</tr>
<else />
$modulehtml
</if>
</tbody>
</table>
</div>
Step 5.
Create a new Template.
This template will be the one that you include with the module that you will create in Step 6. I've included the code for the template below,
HOWEVER, there are some edits that you will need to make to the code based upon steps 1-3 above.
Custom Template Sample name: adv_portal_Tab_Block
Code:
<tr><td >
<body onload="makeactive(1)">
<link href="http://www.domain.com/forums/clientscript/vbulletin_css/TabAJAX.css" rel="stylesheet" type="text/css">
<script language="JavaScript" type="text/javascript" src="http://www.domain.com/forums/clientscript/ahahLib.js"></script>
<script language="JavaScript" type="text/javascript">
function makeactive(tab) {
document.getElementById("tab1").className = "";
document.getElementById("tab2").className = "";
document.getElementById("tab3").className = "";
document.getElementById("tab"+tab).className = "active";
callAHAH('http://www.domain.com/forums/tabcontent.php?content= '+tab, 'content', 'getting content for tab '+tab+'. Wait...', 'Error');
}
</script>
<ul id="tabmenu" >
<li onclick="makeactive(1)"><a class="" id="tab1">Tab 1</a></li>
<li onclick="makeactive(2)"><a class="" id="tab2">Tab 2</a></li>
<li onclick="makeactive(3)"><a class="" id="tab3">Tab 3</a></li>
</ul>
<div id="content" class="smallfont"></div>
</td></tr>
EDITS NEEDED TO THE ABOVE TEMPLATE:
EDIT 1 - Path location of the CSS file created in step 2. Simply edit this line in the template to the correct path where you uploaded the CSS File.
Code:
<link href="http://www.domain.com/forums/clientscript/vbulletin_css/TabAJAX.css" rel="stylesheet" type="text/css">
EDIT 2 - Path location of the ahahLib.js file in step 1. Simply edit this line in the template to the correct path where you uploaded the ahahLib.js file.
Quote:
|
<script language="JavaScript" type="text/javascript" src="http://www.domain.com/forums/clientscript/ahahLib.js"></script>
|
EDIT 3 - Path location of the PHP file created in step 3. Simply edit this line in the template to the correct path where you uploaded the PHP file.
Code:
callAHAH('http://www.domain.com/forums/tabcontent.php?content= '+tab, 'content', 'getting content for tab '+tab+'. Wait...', 'Error');
NOTE: the body onload function is to force a tab active when the page is first loaded... I added this to the template so that you could designate a tab other than the first tab to be opened in case of an important issue that you may want people to see in (for example) tab 3. Its set at 1 default. To force the opening of another tab, change the # to the tab you wish to be open... the below will open Tab 3 when ever the page is first accessed or refreshed.
Code:
<body onload="makeactive(3)">
Step 6.
Create a new CMPS TEMPLATE Module.
Name it what ever you like. Include the template that you created in Step 5 above. Make sure that you either use the Module Wrapper Template OR the Alternative Module Wrapper Template that you created in optional Step 4 above. Give permission(s) to the user groups that you want to be able to view this.
Step 7.
Add the Module to a CMPS page.
Add the module created in Step 6 above to any CMPS page (make a test page if you want to)...
Step 8.
Load the CMPS page that you added the module to.
If you performed the above steps correctly, the result will be a tabbed block module with 3 tabs named Tab 1, Tab 2, Tab 3. The content for Tab 1 will say "Congrats, Insert Dynamic or Static Code here for Tab 1"
CUSTOMIZATION
Style: Modify CSS File created in Step 2 to match the Style of your site.
Tab Names: Modify Template created in Step 5 to change the NAME of the tabs themselves - ie.. from Tab 1 to Announcements (see below)
Code:
<li onclick="makeactive(1)"><a class="" id="tab1">Announcements</a></li>
Content: Modify PHP File created in Step 3 to generate content. You can add static content or Dynamic Content. Below is a very very basic sample of what can be done.
Sample mix of static and dynamic content
PHP Code:
if ($_GET['content'] == 1) {
echo "Welcome Back {$vbulletin->userinfo['username']}!<br><br>
Hope you are enjoying the off season so far. The Draft & Mini Camps are complete, now its just a few weeks away from Training Camp 2007.
<br><br>
Im sure these next few months will be fun to follow and make the upcoming season even more exciting. Good luck with your team {$vbulletin->userinfo['username']}!";
}
NOTE: You can get as creative as you want to with content. For example, I took code from the recentthreads.php file, modified it and included that as tab content to display recent threads within a tab on my site (as seen in the screen shots attached in Post 1 of this thread).
ADDING MORE TABS
To add more tabs, you will need to modify the template created in Step 5 and the PHP file created in Step 3.
Step 1. Add the following 2 lines of code to the Template that you created in Step 5 for each new Tab that you want to appear. Make sure that when you add the lines that you keep them in order with the other lines currently in the file.
Code:
document.getElementById("tab4").className = "";
Code:
<li onclick="makeactive(4)"><a class="" id="tab4">Tab 4</a></li>
Step 2. Add the following block of code to the PHP file created in Step 3. Make sure that you keep it in order with the other blocks of code currently in the file.
PHP Code:
if ($_GET['content'] == 4) {
echo 'Insert Dynamic or Static Code here for Tab 4';
}
If you want to read up on AJAX Tabs, check out the Ajax Project - Tabbed Page Interface over at crackajax (
http://www.crackajax.net/tabs.php)
Well....thats it in a nutshell....Sorry for such a long post. I do hope that I explained things well enough to at least get a head start on AJAX Tabbed Modules using the ahahLib.js script. Let me know if you have any problems or need further explanation on anything...
Thanks and enjoy
Bobster
More Information