Page 1 of 1
[solved] Tabbed Panel on the CMS made simplae home page
Posted: Tue Dec 29, 2009 6:32 pm
by gtfisher
Hi
I was not sure which forum to post to so I thought I would try here, having just installed CMS madesimple version 1.6.6, I have noticed the tab panel on the CMS madesimple home page, which I would like to use on my cms content pages, is there and extension module for doing creating the tab panels?
Any help much appreciated.
Regards, G
Re: Tabbed Panel on the CMS made simplae home page
Posted: Wed Dec 30, 2009 10:13 am
by hexdj
Not sure exactly what you mean, you want to use the Tabbed panels that you see in the Admin section?
Re: Tabbed Panel on the CMS made simplae home page
Posted: Wed Dec 30, 2009 10:27 am
by gtfisher
I just would like to use tabbed panels in my content pages, is there an eay way to do this with cmsms
Re: Tabbed Panel on the CMS made simplae home page
Posted: Wed Dec 30, 2009 5:20 pm
by hexdj
Depends, what you consider easy. I find it easy to implement them with
jQuery Tools.
Re: Tabbed Panel on the CMS made simplae home page
Posted: Thu Dec 31, 2009 6:46 pm
by Dr.CSS
I believe they are talking about the tabs on the cmsms home page under the menu to the right...
[Solved] Re: Tabbed Panel on the CMS made simplae home page
Posted: Sun Jan 03, 2010 9:25 am
by gtfisher
Hi All
thanks for your help, got this sorted by using jQuery as suggested, took a little time though to find a standalone version of jQuery tabs that worked ok, eventualy used this example:
http://flowplayer.org/tools/demos/tabs/
I then created a tabs template as shown below. This needs some tidying up, but proved the point for a prototype.
Thanks again for your help
G
Code: Select all
<__html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
{* Change lang="en" to the language of your site *}
<head>
<title>{sitename} - {title}</title>
{* The sitename is changed in Site Admin/Global settings. {title} is the name of each page *}
{metadata}
{* Don't remove this! Metadata is entered in Site Admin/Global settings. *}
{stylesheet}
{* This is how all the stylesheets attached to this template are linked to *}
<!-- tab pane styling -->
{literal}
<link rel="stylesheet" type="text/css" href="uploads/jQuery/standalone.css">
<!-- default set of jQuery Tools + jQuery 1.3.2 -->
<__script__ src="uploads/jQuery/jquery.js"></__script>
<!-- without body tag IE may have unprodictable behaviours -->
<__script__ charset="utf-8" id="injection_graph_func" src="index_files/injection_graph_func.js"></__script>
<style>
/* tab pane styling */
div.panes div {
display:none;
padding:15px 10px;
border:1px solid #999;
border-top:0;
/*height:100px;*/
font-size:14px;
background-color:#fff;
}
</style>
{/literal}
</head>
</__body>
{* Start Content *}
<div>
<!-- the tabs -->
<ul class="tabs">
<li>{anchor anchor='first' text='Tab 1'}</a></li>
<li>{anchor anchor='second' text='Tab 2'}</a></li>
<li><a href="#third">Tab 3</a></li>
</ul>
<!-- tab "panes" -->
<div class="panes">
<div>{content block='firstTab'}</div>
<div>{content block='secondTab'}</div>
<div>Third tab content</div>
</div>
<br />{* to insure space below content *}
</div>
{* End Content *}
{literal}
<__script__>
// perform JavaScript after the document is scriptable.
$(function() {
// setup ul.tabs to work as tabs for each div directly under div.panes
$("ul.tabs").tabs("div.panes > div");
});
</__script>
{/literal}
<__body>
</__html>