Wednesday 30 March 2011 8:19:44 pm - 5 replies
hello
i would really like to create tabbed blocks on my pages. just simple blocks with tabbed menu where a click on a tab changes the visible content of the block and makes tab active. with or without page reloading, i don't care. i failed to find a ready solution in google and in project section on this webpage...
in which direction should i go?
any help will be much appreciated.
Thursday 31 March 2011 10:40:33 am
this is a page we have that does exactly what you need
of cource you also need to include the relevant javascript files to achieve the tab effect. Take a look at jquery tabs.
{*departmental resources*}<div class="top-right"> <h2>{$node.name}</h2> {def $contentitems = <span> </span>fetch('content','list',hash('parent_node_id',$node.node_id, <span> </span> 'sort_by', array( priority, true ), <span> </span> 'class_filter_type','include', <span> </span> 'class_filter_array',array('department_content')))} {def $count = 1} {def $count2 = 1} <div id="tabs"> <ul> {foreach $contentitems as $contentitem} <li><a href="#fragment-{$count}"><span>{$contentitem.data_map.title.content}</span></a></li> {set $count = inc($count)} {/foreach} </ul> {foreach $contentitems as $contentitem} <div id="fragment-{$count2}"> {include uri='design:edit_button.tpl' active_node=$contentitem} {set $count2 = inc($count2)} {$contentitem.data_map.content.content.output.output_text} </div> {/foreach} </div> </div><div class="top-left"> <h2>Resources</h2> {def $resources= <span> </span>fetch('content','list',hash('parent_node_id',$node.parent_node_id, <span> </span> 'sort_by', array( priority, true ), <span> </span> 'class_filter_type','include', <span> </span> 'class_filter_array',array('department_resources')))} <ul> {foreach $resources as $resource} <li><a href={$resource.url|ezurl}>{$resource.name}</a></li> {/foreach} </ul> <div class="related-info"> <h2>Related Information</h2> {def $parentnode=fetch( 'content', 'node', hash( 'node_id', $node.parent_node_id ) )} {def $similar = fetch(ezfind, moreLikeThis,hash('query_type','text', <span> </span> 'query',$parentnode.data_map.description.content.output.output_text))} <ul> {foreach $similar.SearchResult as $result} <li><a href={$result.url|ezurl()}>{$result.name}</a> ({$result.object.class_identifier})</li> {/foreach} </ul> {*{$similar.SearchResult.0|attribute(show)} *} </div></div>{*departmental resources*}<div class="top-right"> <h2>{$node.name}</h2> {def $contentitems = <span> </span>fetch('content','list',hash('parent_node_id',$node.node_id, <span> </span> 'sort_by', array( priority, true ), <span> </span> 'class_filter_type','include', <span> </span> 'class_filter_array',array('department_content')))} {def $count = 1} {def $count2 = 1} <div id="tabs"> <ul> {foreach $contentitems as $contentitem} <li><a href="#fragment-{$count}"><span>{$contentitem.data_map.title.content}</span></a></li> {set $count = inc($count)} {/foreach} </ul> {foreach $contentitems as $contentitem} <div id="fragment-{$count2}"> {include uri='design:edit_button.tpl' active_node=$contentitem} {set $count2 = inc($count2)} {$contentitem.data_map.content.content.output.output_text} </div> {/foreach} </div> </div><div class="top-left"> <h2>Resources</h2> {def $resources= <span> </span>fetch('content','list',hash('parent_node_id',$node.parent_node_id, <span> </span> 'sort_by', array( priority, true ), <span> </span> 'class_filter_type','include', <span> </span> 'class_filter_array',array('department_resources')))} <ul> {foreach $resources as $resource} <li><a href={$resource.url|ezurl}>{$resource.name}</a></li> {/foreach} </ul> <div class="related-info"> <h2>Related Information</h2> {def $parentnode=fetch( 'content', 'node', hash( 'node_id', $node.parent_node_id ) )} {def $similar = fetch(ezfind, moreLikeThis,hash('query_type','text', <span> </span> 'query',$parentnode.data_map.description.content.output.output_text))} <ul> {foreach $similar.SearchResult as $result} <li><a href={$result.url|ezurl()}>{$result.name}</a> ({$result.object.class_identifier})</li> {/foreach} </ul> {*{$similar.SearchResult.0|attribute(show)} *} </div></div>
Modified on Thursday 31 March 2011 10:41:45 am by nicholas king
You must be logged in to post messages in this topic!