AJAX Tabs Content Script - Version 3.0 (YUI)

本帖由 Collect2008-10-17 发布。版面名称:vBulletin 3.7.X 英文插件

  1. Collect

    Collect 普通会员

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








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




    var tabView = new YAHOO.widget.TabView();

    YAHOO.plugin.Dispatcher.delegate( new YAHOO.widget.Tab({ label'tab 1'dataSrc'tabsample1.php'cacheDatafalseactivetrue }), tabView);
    YAHOO.plugin.Dispatcher.delegate( new YAHOO.widget.Tab({ label'tab 2'dataSrc'tabsample2.php'cacheDatafalse }), tabView);
    YAHOO.plugin.Dispatcher.delegate( new YAHOO.widget.Tab({ label'tab 3'dataSrc'tabsample3.php'cacheDatafalse }), tabView);
    tabView.appendTo('tab_container');



    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:

    PHP:




    var tabView = new YAHOO.widget.TabView();

    YAHOO.plugin.Dispatcher.delegate( new YAHOO.widget.Tab({ label'tab 1'dataSrc'tabsample1.php'cacheDatafalseactivetrue }), tabView);
    YAHOO.plugin.Dispatcher.delegate( new YAHOO.widget.Tab({ label'tab 2'dataSrc'tabsample2.php'cacheDatafalse }), tabView);
    YAHOO.plugin.Dispatcher.delegate( new YAHOO.widget.Tab({ label'tab 3'dataSrc'tabsample3.php'cacheDatafalse }), tabView);
    tabView.appendTo('tab_container');



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

    Code:
    PHP:
    YAHOO.plugin.Dispatcher.delegate( new YAHOO.widget.Tab({ label'tab 2'dataSrc'tabsample2.php'cacheDatafalse }), 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 [​IMG]

    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.
     

    附件文件:

  2. Collect

    Collect 普通会员

    x.t 汉化下 上面~~~安装吧~~~~~~~~~~
     
  3. lyfeng703

    lyfeng703 普通会员

    不知道有什么用.......
     
  4. Collect

    Collect 普通会员

  5. Xiao.T

    Xiao.T 管理员 技术员

    这没有要汉化的东西. 就是修改模板和增加文件.
     
  6. composee

    composee 普通会员

    good job!: )
     
  7. osh

    osh Guest

    Bütün beğendiğim dosyalar bu sitede maşallah
     
  8. golden76

    golden76 普通会员

    这个是要有BLOG才能用的吧。和1.5的不是一个东西。不过用了YUI。
    BOBSTER 的VBB TAB我会汉化下。实际上就是些个安装过程。
     
  9. wlast

    wlast 普通会员

    好复杂的说,在本机搞了半天,头大了!!
     
  10. kjones

    kjones 普通会员

    :high:
    下载了,但不太会用,研究中...
     
  11. hacker168

    hacker168 普通会员

    好像还不错,研究一下~~
     
  12. leonarts

    leonarts 普通会员

    Very good thank you, I will try it on my forum
     
正在加载...