Page 1 of 25 123411 ... LastLast
Results 1 to 20 of 495

Thread: AJAX Tabs Content Script - Version 3.0 (YUI)

  1. #1
    Join Date
    Mar 2006
    Posts
    587

    Default AJAX Tabs Content Script - Version 3.0 (YUI)

    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.

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

    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. 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
    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.
    Last edited by bobster65; 10-07-2009 at 06:18 PM.
    Bob
    Custom vBa & vB Mods, Installs, Configuration, DBA etc...If you need professional assistance, please feel free to PM me

    My Mods:
    [AJAX] Tabs - v3.0 (YUI) | [AJAX] Tabs - v2.0 Enhanced | [AJAX] Tabs - v2.0 | [AJAX] Tabs - v1.0

  2. #2
    Join Date
    Mar 2006
    Posts
    587

    Default

    Additional Enhancements

    ** Coming Soon ** (Adding on the fly lol)
    Bob
    Custom vBa & vB Mods, Installs, Configuration, DBA etc...If you need professional assistance, please feel free to PM me

    My Mods:
    [AJAX] Tabs - v3.0 (YUI) | [AJAX] Tabs - v2.0 Enhanced | [AJAX] Tabs - v2.0 | [AJAX] Tabs - v1.0

  3. #3
    Join Date
    Mar 2006
    Posts
    587

    Default

    ** 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
    Last edited by bobster65; 01-02-2009 at 10:27 AM.
    Bob
    Custom vBa & vB Mods, Installs, Configuration, DBA etc...If you need professional assistance, please feel free to PM me

    My Mods:
    [AJAX] Tabs - v3.0 (YUI) | [AJAX] Tabs - v2.0 Enhanced | [AJAX] Tabs - v2.0 | [AJAX] Tabs - v1.0

  4. #4
    Join Date
    Apr 2006
    Posts
    8

    Default

    Greeeeeeeeeat

    Will try this soon. Very nice work bobster65

  5. #5
    Join Date
    Mar 2006
    Posts
    587

    Default

    Quote Originally Posted by greggus View Post
    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.
    Bob
    Custom vBa & vB Mods, Installs, Configuration, DBA etc...If you need professional assistance, please feel free to PM me

    My Mods:
    [AJAX] Tabs - v3.0 (YUI) | [AJAX] Tabs - v2.0 Enhanced | [AJAX] Tabs - v2.0 | [AJAX] Tabs - v1.0

  6. #6

    Default

    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

  7. #7
    Join Date
    Mar 2006
    Posts
    587

    Default

    Quote Originally Posted by Nordinho View Post
    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).

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

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

    Code:
    <!-- 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?
    Bob
    Custom vBa & vB Mods, Installs, Configuration, DBA etc...If you need professional assistance, please feel free to PM me

    My Mods:
    [AJAX] Tabs - v3.0 (YUI) | [AJAX] Tabs - v2.0 Enhanced | [AJAX] Tabs - v2.0 | [AJAX] Tabs - v1.0

  8. #8
    Join Date
    Mar 2006
    Posts
    587

    Default

    Quote Originally Posted by Nordinho View Post
    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.

    Quote Originally Posted by Nordinho View Post
    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
    Bob
    Custom vBa & vB Mods, Installs, Configuration, DBA etc...If you need professional assistance, please feel free to PM me

    My Mods:
    [AJAX] Tabs - v3.0 (YUI) | [AJAX] Tabs - v2.0 Enhanced | [AJAX] Tabs - v2.0 | [AJAX] Tabs - v1.0

  9. #9

    Default

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

  10. #10
    Join Date
    Mar 2004
    Location
    A galaxy far, far away...
    Posts
    6,609

    Default

    Bobster65,

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

  11. #11
    Join Date
    Jul 2008
    Posts
    19

    Default

    Quote Originally Posted by Nordinho View Post
    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
    Code:
    <tr>
    <td class="$bgclass">
    
    ---YOUR CODE HERE ----
    
    </td></tr>
    Then turn on UseModuleWrapperTemplate in the module settings...

  12. #12
    Join Date
    Jul 2008
    Posts
    19

    Default

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

  13. #13
    Join Date
    Mar 2006
    Posts
    587

    Default

    Quote Originally Posted by KW802 View Post
    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.
    Bob
    Custom vBa & vB Mods, Installs, Configuration, DBA etc...If you need professional assistance, please feel free to PM me

    My Mods:
    [AJAX] Tabs - v3.0 (YUI) | [AJAX] Tabs - v2.0 Enhanced | [AJAX] Tabs - v2.0 | [AJAX] Tabs - v1.0

  14. #14
    Join Date
    Mar 2006
    Posts
    587

    Default

    Quote Originally Posted by Nordinho View Post
    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 ..
    Bob
    Custom vBa & vB Mods, Installs, Configuration, DBA etc...If you need professional assistance, please feel free to PM me

    My Mods:
    [AJAX] Tabs - v3.0 (YUI) | [AJAX] Tabs - v2.0 Enhanced | [AJAX] Tabs - v2.0 | [AJAX] Tabs - v1.0

  15. #15

    Default

    Quote Originally Posted by ZenMastr1968 View Post
    You can use the same beginning and end formatting as before to make it "live" within the collapseable boxes....

    add to your template
    Code:
    <tr>
    <td class="$bgclass">
    
    ---YOUR CODE HERE ----
    
    </td></tr>
    Then turn on UseModuleWrapperTemplate in the module settings...
    Thanks..worked like a charm!

  16. #16

    Default

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

  17. #17

    Default

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

    Heres a example code from the start


    Code:
    <?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://www.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'

  18. #18
    Join Date
    Jul 2006
    Location
    England
    Posts
    142

    Default

    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!

  19. #19
    Join Date
    Oct 2006
    Posts
    28

    Default

    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

  20. #20

    Default

    That would be most excellent Frogger .

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

Page 1 of 25 123411 ... LastLast

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Similar Threads

  1. AJAX Tabs Content Script v2.0 enhanced
    By bobster65 in forum Add-On Modules (version 3.x & 2.x)
    Replies: 568
    Last Post: 07-01-2010, 12:05 PM
  2. Slideshow and AJAX Tabs
    By glorify in forum Show off your vBadvanced!
    Replies: 5
    Last Post: 04-27-2009, 07:07 PM
  3. AJAX Tabs not rendering correct on Opera browser
    By glennybee in forum Module & Modification Discussion & Requests
    Replies: 5
    Last Post: 03-13-2008, 04:26 PM
  4. AJAX Tabbed Content Module
    By bobster65 in forum Add-On Modules (version 3.x & 2.x)
    Replies: 39
    Last Post: 09-11-2007, 12:47 PM
  5. Online Users Module (AJAX version)?
    By ERuiz in forum Module & Modification Discussion & Requests
    Replies: 1
    Last Post: 07-05-2007, 12:54 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •