jQuery Tabs & AdvancedContent : a nice combination
Posted: Mon Nov 21, 2011 4:47 pm
For a while I was looking for a user friendly solution that allows non-technical contributors to add tabbed content to webpages, whitout writing specific code HTML, jQuery script, or whatever).
Thanks to a tip from Ken Griffith, I invested some time in analysing and evaluating the features and possibilities of the AdvancedContent Module. Surprisingly it contained all I needed for my solution. Here is my "tip & trick" for this. It is probably not the perfect solution, but it works for me. (sorry for the long post)
The described solution offers the possibility to add a tabbed content container to a webpage, consisting of :
* 4 tabs which can be individually edited (title; content; on/off)
* a pre-text (text paragraph shown before the tabs)
* a post-text (text paragraph shown after the tabs)
Step-by-Step :
1) I made a copy of the existing webpage template and renamed it "tabbed content"
2) I wrote some extra template code, using the parameters of the AC-module which allowed me to define the different content blocks but also to structure the layout of the backend interface in 1 go !
This code is placed in the DIV were the normal page content is shown
3) The template code was further completed with some smarty logic {if}{/if} to analyse the content blocks and HTML code to display tabbed content in the frontend as per editor settings in the backend.
The template code : (check the AC-module help file for clarification of the different parameters)
4) the jQuery script to show the tabs is included in a Global Content Block. The script was called externally as the CMS jQueryTools module does not contain the Tabs functionallity
the Global Content Block :
5) specific CSS page was created and added to the template page for a nice look of the tabs. You will also notice that CSS-sprites technique is used to show the tab picture.
6) Creating page content :
* Set the content type to "Advanced Content"
* Set the page template to "Tabbed Content"
-> you get the extra interface in the page editing backend, containing the checkboxes & contentblocks of the tabbed container element
I'm not a professional webdeveloper, so this solution has a trial & error development path. It contains copy/paste code elements that I've found on different websites covering the use of jQueryTools.
Unfortunately I can't recall the people of whom I've used the code snippets (jQuery script and CSS). Sorry for that.
I hope this will help other people to integrate tabbed content in their website and to further improve this solution.
Kind Regards
Dirk
Thanks to a tip from Ken Griffith, I invested some time in analysing and evaluating the features and possibilities of the AdvancedContent Module. Surprisingly it contained all I needed for my solution. Here is my "tip & trick" for this. It is probably not the perfect solution, but it works for me. (sorry for the long post)
The described solution offers the possibility to add a tabbed content container to a webpage, consisting of :
* 4 tabs which can be individually edited (title; content; on/off)
* a pre-text (text paragraph shown before the tabs)
* a post-text (text paragraph shown after the tabs)
Step-by-Step :
1) I made a copy of the existing webpage template and renamed it "tabbed content"
2) I wrote some extra template code, using the parameters of the AC-module which allowed me to define the different content blocks but also to structure the layout of the backend interface in 1 go !
This code is placed in the DIV were the normal page content is shown
3) The template code was further completed with some smarty logic {if}{/if} to analyse the content blocks and HTML code to display tabbed content in the frontend as per editor settings in the backend.
The template code : (check the AC-module help file for clarification of the different parameters)
Code: Select all
{* Tabbed Content Template layout based on AdvancedContent Module features *}
{* Content can be edited in separate pagetab in backend *}
{* Define & Assign different elements *}
{content block='tabs_flag' block_type='checkbox' assign='tabs_flag' description='Check this box to turn on the tabs on this page.' default=false wysiwyg="false" page_tab="Tabbed Content" block_tab="General" collapse="false"}
{content block="pretabtext" label="Pre-Tab Container Text" assign="pretabtxt" wysiwyg="true" page_tab="Tabbed Content" block_tab="Pre/Post Text" collapse="true" description="Enter here the text that will be displayed above the Tabbed Content Container"}
{content block="posttabtext" label="Post-Tab Container Text" assign="posttabtxt" wysiwyg="true" page_tab="Tabbed Content" block_tab="Pre/Post Text" collapse="false" description="Enter here the text that will be displayed below the Tabbed Content Container"}
{content block='tab1_flag' label="Active ? " block_type='checkbox' assign='tab1_flag' description='Check this box to activate this panel.' default=false wysiwyg="false" page_tab="Tabbed Content" block_tab="Panel 1" block_group="Panel Parameters" no_collapse="true" collapse="false"}
{content block="tab1_title" label="Title" assign="tab1_title" wysiwyg="false" page_tab="Tabbed Content" block_tab="Panel 1" block_group="Panel Parameters" no_collapse="true" collapse="false" oneline="true"}
{content block="tab1_content" label="Content" assign="tab1_content" wysiwyg="true" page_tab="Tabbed Content" block_tab="Panel 1" block_group="Panel Parameters" no_collapse="true" collapse="false"}
{content block='tab2_flag' label="Active ? " block_type='checkbox' assign='tab2_flag' description='Check this box to activate this panel.' default=false wysiwyg="false" page_tab="Tabbed Content" block_tab="Panel 2" block_group="Panel Parameters" no_collapse="true" collapse="false"}
{content block="tab2_title" label="Title" assign="tab2_title" wysiwyg="false" page_tab="Tabbed Content" block_tab="Panel 2" block_group="Panel Parameters" no_collapse="true" collapse="false" oneline="true"}
{content block="tab2_content" label="Content" assign="tab2_content" wysiwyg="true" page_tab="Tabbed Content" block_tab="Panel 2" block_group="Panel Parameters" no_collapse="true" collapse="false"}
{content block='tab3_flag' label="Active ? " block_type='checkbox' assign='tab3_flag' description='Check this box to activate this panel.' default=false wysiwyg="false" page_tab="Tabbed Content" block_tab="Panel 3" block_group="Panel Parameters" no_collapse="true" collapse="false"}
{content block="tab3_title" label="Title" assign="tab3_title" wysiwyg="false" page_tab="Tabbed Content" block_tab="Panel 3" block_group="Panel Parameters" no_collapse="true" collapse="false" oneline="true"}
{content block="tab3_content" label="Content" assign="tab3_content" wysiwyg="true" page_tab="Tabbed Content" block_tab="Panel 3" block_group="Panel Parameters" no_collapse="true" collapse="false"}
{content block='tab4_flag' label="Active ? " block_type='checkbox' assign='tab4_flag' description='Check this box to activate this panel.' default=false wysiwyg="false" page_tab="Tabbed Content" block_tab="Panel 4" block_group="Panel Parameters" no_collapse="true" collapse="false"}
{content block="tab4_title" label="Title" assign="tab4_title" wysiwyg="false" page_tab="Tabbed Content" block_tab="Panel 4" block_group="Panel Parameters" no_collapse="true" collapse="false" oneline="true"}
{content block="tab4_content" label="Content" assign="tab4_content" wysiwyg="true" page_tab="Tabbed Content" block_tab="Panel 4" block_group="Panel Parameters" no_collapse="true" collapse="false"}
{* END define & assign elements*}
{if $tabs_flag} {* check if tabs/panels container needs to be activated *}
{if $tab1_flag or $tab2_flag or $tab3_flag or $tab4_flag}
{* at least 1 panel must be activated inside the container to run the script *}
{global_content name='GCB_jQs_tabs'} {* execute jQueryTools script *}
{/if}
{if $pretabtxt !=""}
<p>{$pretabtxt}</p> {* Display text above container if not empty *}
{/if}
{if $tab1_flag or $tab2_flag or $tab3_flag or $tab4_flag}
{* at least 1 panel must be activated inside the container to display layout *}
<ul class="tabs"> {* show tabbed content container *}
{if $tab1_flag}
<li><a href="#tabs-1"> {* Activate panel and show title in tab *}
{if $tab1_title !=""}
{$tab1_title}</a>
{else}
Panel 1</a>
{/if}
</li>
{/if}
{if $tab2_flag}
<li><a href="#tabs-2">
{if $tab2_title !=""}
{$tab2_title}</a>
{else}
Panel 2</a>
{/if}
</li>
{/if}
{if $tab3_flag}
<li><a href="#tabs-2">
{if $tab3_title !=""}
{$tab3_title}</a>
{else}
Panel 3</a>
{/if}
</li>
{/if}
{if $tab4_flag}
<li><a href="#tabs-4">
{if $tab4_title !=""}
{$tab4_title}</a>
{else}
Panel 4</a>
{/if}
</li>
{/if}
</ul>
{/if}
{if $tab1_flag or $tab2_flag or $tab3_flag or $tab4_flag}
{* at least 1 panel must be activated inside the container to display layout *}
<div class="panes"> {* show panels content *}
{if $tab1_flag}
<div id="tabs-1">
{if $tab1_content !=""}
{$tab1_content}
{else}
{* No Text Here *}
{/if}
</div>
{/if}
{if $tab2_flag}
<div id="tabs-2">
{if $tab2_content !=""}
{$tab2_content}
{else}
{* No Text Here *}
{/if}
</div>
{/if}
{if $tab3_flag}
<div id="tabs-3">
{if $tab3_content !=""}
{$tab3_content}
{else}
{* No Text Here *}
{/if}
</div>
{/if}
{if $tab4_flag}
<div id="tabs-4">
{if $tab4_content !=""}
{$tab4_content}
{else}
{* No Text Here *}
{/if}
</div>
{/if}
</div>
{/if}
{if $posttabtxt !=""}
<p>{$posttabtxt}</p> {* Display text below container if not empty *}
{/if}
{/if} {* END of tab flag check *}
{* END of Tabbed Content template block *}4) the jQuery script to show the tabs is included in a Global Content Block. The script was called externally as the CMS jQueryTools module does not contain the Tabs functionallity
the Global Content Block :
Code: Select all
{literal} <!-- Call jQuery Library + ALL jQuery Tools -->
<__script__ src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></__script>
<__script__ type="text/javascript">
$(function() {
$("ul.tabs").tabs("div.panes > div", {
effect: 'fade',
onBeforeClick: function(event, i) {
// get the pane to be opened
var pane = this.getPanes().eq(i);
// only load once. remove the if ( ... ){ } clause if you want the page to be loaded every time
if (pane.is(":empty")) {
// load it with a page specified in the tab's href attribute
pane.load(this.getTabs().eq(i).attr("href"));
}
}
});
});
</__script>
{/literal}Code: Select all
/* root element for tabs */
ul.tabs {
list-style:none;
margin:0 !important;
padding:0;
border-bottom:1px solid #666;
height:30px;
list-style-type: none !important;
}
/* single tab */
ul.tabs li {
float:left;
text-indent:0;
padding:0;
margin:0 !important;
list-style-image:none !important;
}
/* link inside the tab. uses a background image */
ul.tabs a {
background: url([[root_url]]/uploads/images/icon/blue.png) no-repeat -420px 0;
font-size:11px;
display:block;
height: 30px;
line-height:30px;
width: 134px;
text-align:center;
text-decoration:none;
color:#333;
padding:0px;
margin:0px;
position:relative;
top:1px;
}
ul.tabs a:active {
outline:none;
}
/* when mouse enters the tab move the background image */
ul.tabs a:hover {
background-position: -420px -31px;
color:#fff;
}
/* active tab uses a class name "current". its highlight is also done by moving the background image. */
ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a {
background-position: -420px -62px;
cursor:default !important;
color:#000 !important;
}
/* Different widths for tabs: use a class name: w1, w2, w3 or w2 */
/* width 1 */
ul.tabs a.s { background-position: -553px 0; width:81px; }
ul.tabs a.s:hover { background-position: -553px -31px; }
ul.tabs a.s.current { background-position: -553px -62px; }
/* width 2 */
ul.tabs a.l { background-position: -248px -0px; width:174px; }
ul.tabs a.l:hover { background-position: -248px -31px; }
ul.tabs a.l.current { background-position: -248px -62px; }
/* width 3 */
ul.tabs a.xl { background-position: 0 -0px; width:248px; }
ul.tabs a.xl:hover { background-position: 0 -31px; }
ul.tabs a.xl.current { background-position: 0 -62px; }
/* initially all panes are hidden */
.panes .pane {
display:none;
}
/* tab pane styling */
.panes div {
display:none;
padding:15px 10px;
border:1px solid #999;
border-top:0;
font-size:12px;
background-color:#fff;
}* Set the content type to "Advanced Content"
* Set the page template to "Tabbed Content"
-> you get the extra interface in the page editing backend, containing the checkboxes & contentblocks of the tabbed container element
I'm not a professional webdeveloper, so this solution has a trial & error development path. It contains copy/paste code elements that I've found on different websites covering the use of jQueryTools.
Unfortunately I can't recall the people of whom I've used the code snippets (jQuery script and CSS). Sorry for that.
I hope this will help other people to integrate tabbed content in their website and to further improve this solution.
Kind Regards
Dirk