Newscoop 4.1 Cookbook
Tabs with jQuery
jQuery tabs are an efficient way to show content like Most Recent Articles or Most Recent Comments in one place. You can read a lot about the jQuery UI Tabs widget at their site, http://jqueryui.com/demos/tabs/
Here is an example jQuery tab (see the chapters on Most Recent Articles or Most Recent Comments to see how those are generated):
Here's the jQuery part:
$(function(){
$('#container-1 ul').tabs();
});
The rest is done inside Newscoop templates.
Here's the logic:
<div id="container-1">
<ul>
<li><a href="#fragment-1">Title 1</a></li> {{* first tab title *}}
<li><a href="#fragment-2">Title 2</a></li> {{* second tab title *}}
</ul>
<div id="fragment-1">
{{* first tab content *}}
</div>
<div id="fragment-2">
{{* second tab content *}}
</div>
</div>
And here's the actual example:
<div id="container-1">
<ul>
<li><a href="#fragment-1"><span> </span></a></li> {{* first tab title *}}
<li><a href="#fragment-2"><span> </span></a></li> {{* second tab title *}}
</ul>
<div id="fragment-1"> {{* first tab content *}}
{{set_section number="1"}}
{{list_articles length="12" constraints="onfrontpage is off onsection is on" ignore_issue="true"}}
<h4><a href="{{uri options="article"}}">{{ $campsite->article->name}}</a>{{if $campsite->article->has_video}}<i class="ico video"></i>{{/if}}{{if $campsite->article->has_photo}}<i class="ico photo"></i>{{/if}}{{if $campsite->article->has_audio}}<i class="ico audio"></i>{{/if}}</h4>
<p class="container-date">{{$campsite->article->publish_date|camp_date_format:"%d %M %Y."}}</p>
<p>{{$campsite->article->Intro_front}}{{if $campsite->article->comment_count>0}}<a href="{{uri options="article"}}#comments" class="comments_counter">{{$campsite->article->comment_count}}</a>{{/if}}</p>
{{/list_articles}}
{{set_default_section}}
</div>
<div id="fragment-2"> {{* second tab content *}}
{{local}}
{{unset_issue}}
{{list_issues length="2" order="bynumber desc"}}
{{list_sections constraints="number greater 9 number smaller 70"}}
{{list_articles length="4" constraints="topic is \ :ru" order="bynumber desc"}}
<h4><a href="{{uri options="article"}}">{{$campsite->article->name}}</a>{{if $campsite->article->has_video}}<i class="ico video"></i>{{/if}}{{if $campsite->article->has_photo}}<i class="ico photo"></i>{{/if}}{{if $campsite->article->has_audio}}<i class="ico audio"></i>{{/if}}</h4>
<p class="container-date">{{$campsite->article->publish_date|camp_date_format:"%d %M %Y."}}</p>
<p>{{$campsite->article->intro}}{{if $campsite->article->comment_count>0}}<a href="{{uri options="article"}}#comments" class="comments_counter">{{$campsite->article->comment_count}}</a>{{/if}}</p>
{{/list_articles}}
{{/list_sections}}
{{/list_issues}}
{{/local}}
</div>
</div>