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!

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>

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.

Use AllChildren to get an unfiltered list.

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.

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!