Jump to:

1382 Posts in 491 Topics by 521 members

Themes

SilverStripe Forums » Themes » Generate jQuery Tabs Based On Children

Discuss SilverStripe Themes.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Page: 1
Go to End
Author Topic: 2081 Views
  • goodness
    Avatar
    Community Member
    38 Posts

    Generate jQuery Tabs Based On Children Link to this post

    Hello,

    I am fairly new to SilverStripe.

    What I want to do is create a page that uses tabs for content much like this:

    http://jqueryui.com/tabs/#default

    What I would like to do is something similar to the StaffHolder and StaffPage found in the tutorial where the staff holder page is populated based on the individual children (staff) pages.

    In this case, I believe the TabHolder page would run <% loop Children %> and then insert/create tabs based on the Child pages that are associated with it.

    I'm just not sure how to write the code to accomplish this.

    Can anyone please help me with this?

    Thanks!

  • Willr
    Avatar
    Forum Moderator
    5497 Posts

    Re: Generate jQuery Tabs Based On Children Link to this post

    If you use the HTML from that demo it would look something like follows in 3.0

    TabHolder.ss

    <div id="tabs">
    <ul>
    <% loop Children %>
    <li><a href="#tab-$Pos">$Title</a></li>
    <% end_loop %>
    </ul>

    <% loop Children %>
    <div id="tabs-$Pos">
    $Content
    </div>
    <% end_loop %>
    </div>

  • goodness
    Avatar
    Community Member
    38 Posts

    Re: Generate jQuery Tabs Based On Children Link to this post

    Will,

    Thanks for the reply.

    I have created two new page types: TabHolder.php and TabPage.php and placed them in the code folder.
    I also created two new layouts: TabHolder.ss and TabPage.ss and placed them in the /mytheme/templates/Layout/ folder

    For some reason when I place sone content on the page that uses the TabHolder page type, the content shows up twice.

    I.e:

    This is a test FAQ page and should have tabs below.

    This is a test FAQ page and should have tabs below.

    Also, when I create a child is shows up as a normal <li> within a <ul> with it's content below it.

    I've attached a quick screen shot to show you my results.

    I have tried to attach the javascript files and css files from within the TabHolder.ss file that's located in the Layout folder.

    This is the code from my TabHolder.ss file:

    <!-- Attach the CSS -->
           <link rel="stylesheet" href="/themes/simple/css/jquery-ui.css">
           
    <!-- Attach necessary JS -->
          <script type="text/javascript" src="/themes/simple/javascript/jquery-1.9.1.js"></script>
          <script type="text/javascript" src="/themes/simple/javascript/jquery-ui.js"></script>
          
    <% include SideBar %>
    <div class="content-container unit size3of4 lastUnit">
    <article>
    <h1>$Title</h1>
    $Content
    <div class="content">$Content</div>
    </article>

    <div id="tabs">
          <ul>
          <% loop Children %>
          <li><a href="#tab-$Pos">$Title</a></li>
          <% end_loop %>
          </ul>

          <% loop Children %>
          <div id="tabs-$Pos">
          $Content
          </div>
          <% end_loop %>
       </div>
       
    </div>

    LASTLY - If I de-select "Show in menus?" under Visability in the Settings tab for the child (TabPage) pages - the child pages (TabPage) content no longer shows up on the parent (TabHolder) page.

    Again - Thank you so much for being willing to help me with this.

  • Willr
    Avatar
    Forum Moderator
    5497 Posts

    Re: Generate jQuery Tabs Based On Children Link to this post

    Use AllChildren to get an unfiltered list.

  • goodness
    Avatar
    Community Member
    38 Posts

    Re: Generate jQuery Tabs Based On Children Link to this post

    Will (or anyone willing to help a new guy out),

    I used AllChildren in place of Children in the loops and that made the child pages that are not included in the menus show up.

    I also had to add the following to my TabHolder.ss file in the Layout folder to get the tabs to show up:

    <script>
    $(function() {
    $( "#tabs" ).tabs();
    });
    </script>

    Here's the complete code for my TabHolher.ss file:

    <!-- Attach the CSS -->
           <link rel="stylesheet" href="/themes/simple/css/jquery-ui.css">
           
          <!-- Attach necessary JS -->
          <script type="text/javascript" src="/themes/simple/javascript/jquery-1.9.1.js"></script>
          <script type="text/javascript" src="/themes/simple/javascript/jquery-ui.js"></script>
          
    <% include SideBar %>

    <script>
    $(function() {
    $( "#tabs" ).tabs();
    });
    </script>

    <div class="content-container unit size3of4 lastUnit">
    <article>
    <h1>$Title</h1>
    <!--$Content-->
    <div class="content">$Content</div>
    </article>

    <div id="tabs">
          <ul>
          <% loop AllChildren %>
          <li><a href="#tab-$Pos">$Title</a></li>
          <% end_loop %>
          </ul>

          <% loop AllChildren %>
          <div id="tabs-$Pos">
          $Content
          </div>
          <% end_loop %>
       </div>
       
    </div>

    What is happening is the tabs show on the page but are not selectable. And the content for both of the tabs (I'm only using two as a test at this point) shows up under the 1st tab.

    Again, I've attached a screen shot to show you my progress and issues.

    I feel like I'm close and hope to get this figured out soon.

    Thanks again for your willingness to help me.

  • goodness
    Avatar
    Community Member
    38 Posts

    Re: Generate jQuery Tabs Based On Children Link to this post

    I FOUND THE SOLUTION

    For anyone also attempting to implement this. The code I used in my TabHolder.ss file (located in the Layout folder) had a flaw.

    Originally that file had this:

    <div id="tabs">
          <ul>
          <% loop AllChildren %>
          <li><a href="#tab-$Pos" style="font-size: 90%">$Title</a></li>
          <% end_loop %>
          </ul>

          <% loop AllChildren %>
          <div id="tabs-$Pos">
          $Content
          </div>
          <% end_loop %>
       </div>

    The problem came from the 2nd loop where <div id="tabs-$Pos"> had tabs (plural):

          <% loop AllChildren %>
          <div id="tabs-$Pos">
          $Content
          </div>
          <% end_loop %>

    This caused the $Content off all the tabs to be generated in the 1st tab.
    By removing the "s" from that string you get:

    <% loop AllChildren %>
          <div id="tab-$Pos">
          $Content
          </div>
          <% end_loop %>
       </div>

    which works perfectly!

    2081 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.