Go Back   vb.org Archive > vBulletin Modifications > vBulletin 3.8 Modifications > vBulletin 3.8 Add-ons
FAQ Community Calendar Today's Posts Search

Reply
 
Thread Tools
AJAX Tabs Content Script - Version 3.0 (YUI) Details »»
AJAX Tabs Content Script - Version 3.0 (YUI)
Version: 3.0, by bobster65 bobster65 is offline
Developer Last Online: Nov 2023 Show Printable Version Email this Page

Category: Add-On Releases - Version: 3.8.x Rating:
Released: 09-16-2008 Last Update: Never Installs: 125
Additional Files Translations  
No support by the author.

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.

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

Code:
<!-- 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.

Code:
<!-- 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
Code:
YAHOO.plugin.Dispatcher.delegate( new YAHOO.widget.Tab({ label: 'tab 1', dataSrc: 'tabsample1.php', cacheData: false, active: true }), tabView);
NON ACTIVE TAB EXAMPLE
Code:
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.

Download Now

File Type: zip AJAX Tabs YUI.zip (101.0 KB, 1052 views)

Show Your Support

  • This modification may not be copied, reproduced or published elsewhere without author's permission.
3 благодарности(ей) от:
caoducanh9x, kotkerk

Comments
  #132  
Old 02-18-2009, 04:34 PM
bobster65's Avatar
bobster65 bobster65 is offline
 
Join Date: Mar 2006
Location: Montana
Posts: 1,169
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by chompboard View Post
I'm also awaiting an upcoming events features. Thanks. I'll be watching this mod.
Never did get a mock up from the guy, so if you want to provide me a mock up and or some specs that you are after, I'll try and get one knocked out.. probably will add it to TFH as a module as well..
Reply With Quote
  #133  
Old 02-21-2009, 08:47 PM
wmlvb's Avatar
wmlvb wmlvb is offline
 
Join Date: May 2008
Posts: 200
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Hey bob,

You customized my mod a while back at www.usafacommunity.com. The tabs I have now have thread titles only coming into them! I would like to have the actual content from the most recent post from those thread coming through. I think it maybe news.php. Is that correct? Where do I go to change the data source?.

If you want a sample of what I am looking for please see my homepage on the right and the module called "recent post" That is the type of data I want coming into my tabs!

Is there a way to copy the file that generate that recent post module and just paste it into the file that generates each tab I want like that?

Thanks for you help!
Reply With Quote
  #134  
Old 02-22-2009, 02:03 PM
bobster65's Avatar
bobster65 bobster65 is offline
 
Join Date: Mar 2006
Location: Montana
Posts: 1,169
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by wmlvb View Post
Hey bob,

You customized my mod a while back at www.usafacommunity.com. The tabs I have now have thread titles only coming into them! I would like to have the actual content from the most recent post from those thread coming through. I think it maybe news.php. Is that correct? Where do I go to change the data source?.

If you want a sample of what I am looking for please see my homepage on the right and the module called "recent post" That is the type of data I want coming into my tabs!

Is there a way to copy the file that generate that recent post module and just paste it into the file that generates each tab I want like that?

Thanks for you help!
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
Reply With Quote
  #135  
Old 02-24-2009, 07:40 AM
otto07 otto07 is offline
 
Join Date: Nov 2008
Posts: 11
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

hello i noticed how this displays threads from spacific forums. i would like this to display a whole section of my site like the Whole General section which contains the news,rules,intro and so forth. how can i get my tabs to display something like that.

here is a demo of what i am trying to do

http://www.consolediscussions.com/forum/
Reply With Quote
  #136  
Old 02-24-2009, 08:06 AM
bobster65's Avatar
bobster65 bobster65 is offline
 
Join Date: Mar 2006
Location: Montana
Posts: 1,169
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by otto07 View Post
hello i noticed how this displays threads from spacific forums. i would like this to display a whole section of my site like the Whole General section which contains the news,rules,intro and so forth. how can i get my tabs to display something like that.

here is a demo of what i am trying to do

http://www.consolediscussions.com/forum/
I see you are running my version 1 Tabbed Forum Home.. v2 of TFH is based on the same YUI Tabview JS as this mod is...

v2 also has a Modules capability that will run any of the content modules that I built for this... so in essence, you could configure TFH to have a recent thread module for each category ie, Tab 1 = Cat 1, but using the Recent thread module would display all recent threads from all forums within that Category... or you could just break out your tabs by Multiple Categories like you are doing with the non ajax version now, cept with v2, its all done via the Admin CP.. Setup is a breeze compared to ver 1 or 1.5
Reply With Quote
  #137  
Old 02-26-2009, 04:53 AM
KrU$ty's Avatar
KrU$ty KrU$ty is offline
 
Join Date: Oct 2007
Posts: 180
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

I'm trying to get attachments to display inline on each post within the tabs, but i cant see any settings for it. Is there a way to do this by adding some code to the content files?
Reply With Quote
  #138  
Old 02-26-2009, 04:59 AM
bobster65's Avatar
bobster65 bobster65 is offline
 
Join Date: Mar 2006
Location: Montana
Posts: 1,169
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by KrU$ty View Post
I'm trying to get attachments to display inline on each post within the tabs, but i cant see any settings for it. Is there a way to do this by adding some code to the content files?
ya, no settings or code included to do that right now, but its doable ... I don't have time right now to do it, but most coders here should be able to help you out without a problem.. If I run across anyone that has done it, I will certainly let you know..
Reply With Quote
  #139  
Old 02-26-2009, 11:06 PM
Froggfish Froggfish is offline
 
Join Date: Oct 2006
Posts: 7
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Ny indications when v.2 will be ready for the public?
I am very close to installing this version since I already are running the vba version, but it will be pointless if a new version are very close.
Reply With Quote
  #140  
Old 02-26-2009, 11:13 PM
bobster65's Avatar
bobster65 bobster65 is offline
 
Join Date: Mar 2006
Location: Montana
Posts: 1,169
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by Froggfish View Post
Ny indications when v.2 will be ready for the public?
I am very close to installing this version since I already are running the vba version, but it will be pointless if a new version are very close.
huh? are you asking about TFH (Tabbed Forum Home) .. This mod is different than that one..
Reply With Quote
  #141  
Old 03-01-2009, 10:33 AM
FiMeTi FiMeTi is offline
 
Join Date: May 2008
Location: Germany
Posts: 157
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Hi @ all!

Could anyone fixx the small .css error for the loading.gif yet?
This beautiful hack is 99% perfect ... lets make it 100% please!

Cheers!
Reply With Quote
Reply


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 01:40 PM.


Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2024, vBulletin Solutions Inc.
X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.05274 seconds
  • Memory Usage 2,361KB
  • Queries Executed 26 (?)
More Information
Template Usage:
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (1)ad_showthread_beforeqr
  • (5)bbcode_code
  • (5)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)modsystem_post
  • (1)navbar
  • (4)navbar_link
  • (120)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (4)pagenav_pagelink
  • (2)pagenav_pagelinkrel
  • (11)post_thanks_box
  • (2)post_thanks_box_bit
  • (11)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (1)post_thanks_postbit
  • (11)post_thanks_postbit_info
  • (10)postbit
  • (1)postbit_attachment
  • (11)postbit_onlinestatus
  • (11)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available:
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files:
  • ./showthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_post_thanks.php 

Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • forumjump
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • post_thanks_function_post_thanks_off_start
  • post_thanks_function_post_thanks_off_end
  • post_thanks_function_fetch_thanks_start
  • fetch_musername
  • post_thanks_function_fetch_thanks_end
  • post_thanks_function_thanked_already_start
  • post_thanks_function_thanked_already_end
  • post_thanks_function_fetch_thanks_bit_start
  • post_thanks_function_show_thanks_date_start
  • post_thanks_function_show_thanks_date_end
  • post_thanks_function_fetch_thanks_bit_end
  • post_thanks_function_fetch_post_thanks_template_start
  • post_thanks_function_fetch_post_thanks_template_end
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_attachment
  • postbit_display_complete
  • post_thanks_function_can_thank_this_post_start
  • pagenav_page
  • pagenav_complete
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • showthread_complete