SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 33 of 33

Thread: Tabs

  1. #26
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well... just look at them

    The basic demo only illustrates the fundamental ideas used by xTabPanelGroup. And it doesn't yet have any styling.

    xTabPanelGroup uses more Js from my library but is more flexible, and it's demo is a "finished page" from which you can start. xTabPanelGroup allows you to specify the width of the object - or it can be liquid (flow with the page), for example: TPG with liquid width. xTabPanelGroup has been used and tested by many different people.

    Actually, I think the basic demo has turned out pretty nice. It uses much less Js and gives you the option of styling it and the page in your own way. But I don't yet consider the basic demo to be "finished". The basic demo is very useful for learning how "progressive enhancement" was accomplished in the xTabPanelGroup demo.


  2. #27
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So, can the xTabPanelGroup be used as an include like the basic demo?

  3. #28
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes. View the source of the page. All Js is in external files - except for the onload and onunload code which is minimal and could also be put in an external file.

    All CSS is also in external files. Note that 'tpg_def.css' gets loaded by default and 'tpg_dyn.css' only gets loaded if Js is enabled (it overrides properties in tpg_def). I use a 'document.write' for this - if you use XHTML it can be done differently but I always use a HTML4.01 Strict doctype.

    If you are asking about including the HTML with PHP then yes that can be done with either demo.

  4. #29
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you want to use the xTabPanelGroup demo then it might be easier to just download my library distribution file. It contains the demo page and all the other files you'll need. The quick-start page (also in the zip) describes what you'll find after you unzip the file.

    Btw - in the folder "cross-browser.com/x/examples" you'll also find CSS files which provide an alternate styling on the tabs: tpg_def_org.css and tpg_dyn_org.css.

  5. #30
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But how can i have tab groups on different pages and use one include file to make them work like I said before?

    Sorry about all of this but as soon as i can use an include for the xtabpanelgroup demo then I can get it inserted into my site.

    Thanks

    Neil

  6. #31
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For example, here is the HTML for one of the tab groups from the demo:
    Code:
    <h3>Demo 1</h3>
    <div>
    <div id='tpg1' class='tabPanelGroup'>
    
      <div class='tabGroup'>
        <a href='#tpg11' class='tabDefault'>General</a><span class='linkDelim'>&nbsp;|&nbsp;</span>
        <a href='#tpg12' class='tabDefault'>Javascript</a><span class='linkDelim'>&nbsp;|&nbsp;</span>
        <a href='#tpg13' class='tabDefault'>CSS</a><span class='linkDelim'>&nbsp;|&nbsp;</span>
        <a href='#tpg14' class='tabDefault'>HTML</a>
      </div>
      
      <div id='tpg11' class='tabPanel'>
        <h4>General</h4>
        <p>Tab panel groups. Multiple objects can be instantiated on one page.</p>
      </div>
      
      <div id='tpg12' class='tabPanel'>
        <h4>Javascript</h4>
        <p>Cross-browser, downgradeable, and unobtrusive. Disable Javascript and reload this page.</p>
      </div>
      
      <div id='tpg13' class='tabPanel'>
        <h4>CSS</h4>
        <p>In 2 files: tpg_def.css for default styles, and tpg_dyn.css for dynamic overrides when Javascript is enabled.</p>
      </div>
      
      <div id='tpg14' class='tabPanel'>
        <h4>HTML</h4>
        <p>The content is in the HTML - it is not written with Javascript.</p>
      </div>
      
    </div>
    </div>
    Now, cut out the HTML for "tpg1" and paste it into a new file (tpg1_html.php), and php-include it with the following:
    Code:
    <h3>Demo 1</h3>
    <div>
    <?php include tpg1_html.php; ?>
    </div>

  7. #32
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's the javascript behind which makes it work which i want to "include". I want to "include" the javascript once so i can have many tpg's and they all use the 1 javascript file to make them all work. How?

  8. #33
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Did you download the demo and experiment with it?

    Give us a link to your test page and I'll check it out.


Bookmarks

Posting Permissions

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