The Arcive of Official vBulletin Modifications Site.It is not a VB3 engine, just a parsed copy! |
|
Module CMPS: AJAX Tabbed Content Details »» | |||||||||||||||||||||||||
AJAX Tabs - Version 1.5
Note: Version 1.0 is still available as a secondary option and is located in post 2 of this thread. Note 2: Altho this "How To" is written for implementation within CMPS, this can be easily implemented within vB , ie on custom vB pages or within current vB pages. Whats changed within this release?: This new version (based on the AJAX Tabs script written by Dynamic Drive - http://www.dynamicdrive.com/dynamici...tent/index.htm) utilizes Ajax to display a selection of external content on your page inside a DIV and via CSS tabs. Below lists the features of this script that together make it highly adaptable in the real world:
This is what I've done so far to implement AJAX Tabs functionality within vBadvance for my websites and others.... CMPS Version Note: Coded for CMPS v3.0 RC1. Modifications can be made to the php files (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: ajaxtabs.js, ajaxtabs.css, Sample Content Files, images(3) Note: I've included sample files in the attached Zip File to use with the step by step how to. Step 1. Upload the ajaxtabs directory (located in the attached Zip File) to the FORUMS Root. This directory contains the ajaxtabs.js file & the ajaxtabs.css file path example: /www/forums/ajaxtabs/ajaxtabs.js Step 2. Modify CSS file. Change paths to images to reflect your domain and forum root (2 lines)... Note: Additional Modifications to this file can be made once you get the initial sample system up and running. CSS file - Name: ajaxtabs.css Code:
.shadetabs{ padding: 3px 0; margin-left: 0; margin-top: 1px; margin-bottom: 0; font: bold 12px Verdana; list-style-type: none; text-align: left; /*set to left, center, or right to align the menu as desired*/ } .shadetabs li{ display: inline; margin: 0; } .shadetabs li a{ text-decoration: none; padding: 3px 7px; margin-right: 3px; border: 1px solid #778; color: #FFFFFF; background: #343958 url(http://www.domain.com/forums/ajaxtabs/shade.gif) top left repeat-x; } .shadetabs li a:visited{ color: #FFFFFF; } .shadetabs li a:hover{ text-decoration: underline; color: #FFFFFF; } .shadetabs li.selected{ position: relative; top: 1px; } .shadetabs li.selected a{ /*selected main tab style */ background-image: url(http://www.domain.com/forums/ajaxtabs/shadeactive.gif); border-bottom-color: gray; } .shadetabs li.selected a:hover{ /*selected main tab style */ text-decoration: none; } .contentstyle{ border: 1px solid gray; width: 425px; margin-bottom: 0em; padding: 2px; background: white; } Step 3. Create, Name and Upload Multiple "Content" files. I've included working samples in the attached Zip File. The location I chose for these was the FORUMS root. path example: /www/forums You can name these files anything you want. For example, I chose a naming convention - tabexternal.htm, tabexternal2.php, tabrecentnews.php, tabvbookie.php, ..etc etc Note: Modifications to these files can be made once you get the initial system up and running. Sample PHP "Content" file - Sample name: tabexternal.php PHP Code:
Code:
<img src="ajaxtabs/bird.jpg" style="float: left; margin: 0 10px 5px; border: 1px solid gray" /> Birds are bipedal, warm-blooded, oviparous vertebrate animals characterized primarily by feathers, forelimbs modified as wings, and hollow bones. <br style="clear: left" /> 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_Main Code:
<tr><td> <head> <link rel="stylesheet" type="text/css" href="/forums/ajaxtabs/ajaxtabs.css" /> <script type="text/javascript" src="/forums/ajaxtabs/ajaxtabs.js"> /*********************************************** * Ajax Tabs Content script- ? Dynamic Drive DHTML code library (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code ***********************************************/ </script> </head> <body> <ul id="maintab" class="shadetabs"> <li class="selected"><a href="http://www.domain.com/forums/tabexternal.php" rel="ajaxcontentarea">Tab 1</a></li> <li><a href="http://www.domain.com/forums/tabexternal2.php" rel="ajaxcontentarea">Tab 2</a></li> <li><a href="http://www.domain.com/forums/tabexternal3.php" rel="ajaxcontentarea">Tab 3</a></li> <li><a href="http://www.domain.com/forums/tabexternal4.php" rel="ajaxcontentarea">Tab 4</a></li> </ul> <div id="ajaxcontentarea" class="contentstyle"> <p>Congrats, AJAX Tabbed Content is working on your site!</p> </div> <script type="text/javascript"> //Start Ajax tabs script for UL with id="maintab" Separate multiple ids each with a comma. startajaxtabs("maintab") </script> </body> </td></tr> EDIT 1 - Path location of the ajaxtabs.css file created in step 2. Simply edit this line in the template to the correct path. Code:
<link rel="stylesheet" type="text/css" href="/forums/ajaxtabs/ajaxtabs.css" /> Code:
<script type="text/javascript" src="/forums/ajaxtabs/ajaxtabs.js"> Code:
<li><a href="http://www.domain.com/forums/tabexternal4.php" rel="ajaxcontentarea">Tab 4</a></li> 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 4 tabs named Tab 1, Tab 2, Tab 3, Tab 4. The content for Tab 1 will initially say "Congrats, AJAX Tabbed Content is working on your site!" as that will preload, Click on Tab 1 and it will retrieve via AJAX, the code created in the external file for tab 1. Click on the other tabs to retrieve the info created within those external files.. CUSTOMIZATION Style: Modify CSS File 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><a href="http://www.domain.com/forums/tabexternal.php" rel="ajaxcontentarea">Announcements</a></li> Content: Modify "Content" File(s) 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:
ADDING MORE TABS To add more tabs, you will need to modify the template created in Step 5 and create a new "content" file for each new tab (as explained in Step 3). Step 1. Add the following line of code to the Template that you created in Step 5 for each new Tab that you want to appear. Its a good idea when you add the lines that you keep them in order with the other lines currently in the file. Code:
<li><a href="http://www.domain.com/forums/CONTENT FILE" rel="ajaxcontentarea">TAB NAME</a></li> Code:
<li><a href="http://www.domain.com/forums/tabcontent5.php" rel="ajaxcontentarea">Sports News</a></li> If you want to read up on AJAX Tabs, check out the Ajax Tabs Content script over at Dynamic Drive (http://www.dynamicdrive.com/dynamici...tent/index.htm) ....thats it in a nutshell.... I do hope that I explained things well enough to at least get a head start on AJAX Tabbed Modules. Let me know if you have any problems or need further explanation on anything... Thanks and enjoy Bobster Screen Shots Explained: The 1st is an example of some dynamic content based on the user. The 2nd is an example of modified recentthreads.php used within a tab. The 3rd is an example of using modified vbarticles within a tab. The 4th and 5th are examples of custom dynamic content within a tab. Show Your Support
|
Comments |
#42
|
|||
|
|||
This is an excellent mod. I am wondering, does the tabs support bb code? I am guessing it does not, but of that is the case, that is fine, I'll just use regular html/css.
*installed |
#43
|
|||
|
|||
Quote:
|
#44
|
||||
|
||||
Quote:
|
#45
|
|||
|
|||
Quote:
Use CMPS 3.0. + Many Module. |
#46
|
||||
|
||||
You can either post your code or PM it to me.. post both the template and php file..
|
#47
|
|||
|
|||
Quote:
I didn't customised. Thanks |
#48
|
||||
|
||||
yes
|
#49
|
|||
|
|||
i think i didn't customised any template and php file
BTW,can you tell me how to create a tab with recent posts?I confused when look the code in recentpost.php |
#50
|
||||
|
||||
Well, I've had a few peeps that when editing the template and php file to change the paths to fit their site, make a simple syntax error... the only thing that I can think of without taking a look at it is there might be a possible conflict with another Custom Module that is using a custom java script. What the link to your site?
|
#51
|
||||
|
||||
AJAX TABS version 2.0 is now available as the primary option of this thread.... please review the new information as released today.
Version 1.0 information has been moved into the 2nd post of this thread for historical purposes as well as reference for those that have installed. Thanks.. Bobster |
Thread Tools | |
|
|
X vBulletin 3.8.12 by vBS Debug Information | |
---|---|
|
|
More Information | |
Template Usage:
Phrase Groups Available:
|
Included Files:
Hooks Called:
|