Newscoop 4 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>