NAVIGATION
This is an old revision of the document!
A short version in english - for using the simple tabs from Harald Kirschner in the cp register/tabs.
“Small, simple and unobtrusive Tab plugin for MooTools (v1.2x) including support for Ajax content. Overlays semantic XHTML markup with a tabbed interface without additional changes. Customise the style and behaviour by changing the simplified CSS or via various custom Events.”
SimpleTabs - Unobtrusive Tabs + Ajax (v1.0)
Frontend:
Backend:
Docu: –
Forum: –
Autor: K.Heermann (flip-flop) http://planmatrix.de 2009/12/27
CMS version: >= V1.44
Version: V1.0
Update: –
Tag: –
Filename: simpletabs01.tmpl
Folder: /template/inc_cntpart/tabs/
Condition: $phpwcms['allow_cntPHP_rt'] = 1; → /config/phpwcms/conf.inc.php —-
1. update to the very latest version
- >= phpwcms version 1.4.4, rev 388, 2009/12/06 or
- DEV - Version ZIP Format!
check the new configvars in config.inc.php
2. login and goto ADMIN > Templates - see the new options - choose mootools, load instantly (?), use google ajax lib if you prefer.
* Setup a Register/tabs Contentpart with your entries. * Choose the simpletabs01.tmpl template provided with the zip file. * Save and you should be done
There is a new Template replacer to add JavaScript dynamically
<!-- JS: featured_slider -->
need exactly the following file in that path template/lib/jquery/plugin/jquery.featured_slider.js you can use something like
<!-- JS: http:/ /ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js -->
too.
thats for the template.
In php scripts (at example special frontend_render cases or modules) you can use
<?php initJSPlugin('featured_slider'); ?>
it's the same.
In case you call a plugin in these ways, jQuery (mootools) Lib will always be included.
That's all.
/* ******************************************************************** moo_simpletabs01.tmpl for the CP Register (Tabs) http://digitarald.de/project/simple-tabs/1-0/showcase/tabbed/ 26.12.09 KH (flip-flop) - http://planmatrix.de Knut Heermann Corresponding with the file /template/inc_css/specific/reg_tabs_simpletabs01.css Uses the js file lib/mootools/plugin-1.2/mootools.SimpleTabs.js - and lib/mootools/mootools-1.2-core-yc.js - Put this file into the Folder /template/inc_cntpart/tabs/* - Switch in your conf.inc.php -> $phpwcms['allow_cntPHP_rt'] = 1; *********************************************************************** */ <!--TABS_START//--> <div id="rgt_content"> [TITLE]<h1>{TITLE}</h1>[/TITLE] [SUBTITLE]<h4>{SUBTITLE}</h4>[/SUBTITLE] <div id="simpletabs"> [TABS_ENTRIES]{TABS_ENTRIES}[/TABS_ENTRIES] </div> [PHP] initJSPlugin('SimpleTabs'); $GLOBALS['block']['css']['reg_tabs_simpletabs01'] = 'specific/mootools/reg_tabs_simpletabs01.css'; $GLOBALS['block']['custom_htmlhead']['reg_tabs_simpletabs01'] = ' <script type="text/javascript"> //* <![CDATA[ *// window.addEvent(\'domready\', function() { var tabs = new SimpleTabs(\'simpletabs\', { selector: \'h3\' }); }); //* ]]> *// </script>'; [/PHP] </div> <!-- END id="rgt_content" //--> <!--TABS_END//--> <!--TABS_ENTRY_START//--> [TABTITLE] <h3 title="{TABTITLE}">{TABTITLE}</h3> [/TABTITLE] [TABTITLE_ELSE] <h3 title="TabElse">TabElse</h3> [/TABTITLE_ELSE] [TABCONTENT] <div> [TABHEADLINE]<h4>{TABHEADLINE}</h4>[/TABHEADLINE] [TABTEXT]{TABTEXT}[/TABTEXT] </div> [/TABCONTENT] <!--TABS_ENTRY_END//-->
/* CSS for simpletabs in RT "Register Tabs" */ #rgt_content { font-size:1em; line-height:135%; margin:100px 35px 0pt 220px; padding-bottom:55px; position:relative; z-index:5; width: 500px; } #rgt_content p { margin:0pt 0pt 10px; padding:0pt; } #rgt_content h1, #rgt_content h2, #rgt_content h3, #rgt_content h4, #rgt_content h5, #rgt_content h6 { margin:0pt 0pt 15px; padding:0pt; } #rgt_content div#simpletabs div.tab-wrapper { padding: 8px 8px 4px 8px; border: 1px solid #d0d0d0; background-color: #f0f0f0; z-index: 5; } #rgt_content div#simpletabs ul.tab-menu { list-style: none; padding: 0; margin: 0; position: relative; height: 21px; z-index: 10; top: 1px; /* border-bottom: 1px solid #dedede; */ } #rgt_content div#simpletabs ul.tab-menu li { float: left; margin: 0 2px 0 0; padding: 0; } #rgt_content div#simpletabs ul.tab-menu li a { float: left; display: block; padding: 0 0 0 10px; /* background: #dedede url(picture/navi/tabs/simple/inactive_tab.png) no-repeat left top; */ background-color: #dedede; color: #808080; font-weight: bold; text-decoration: none; height: 21px; overflow: hidden; line-height: normal; } #rgt_content div#simpletabs ul.tab-menu li a span { float: left; display: block; padding: 2px 10px 0 0; /* background: #dedede url(picture/navi/tabs/simple/inactive_tab.png) no-repeat right top; */ background-color: #dedede; height: 21px; cursor: pointer; } #rgt_content div.simpletabs ul.tab-menu li a:focus span { } #rgt_content div#simpletabs ul.tab-menu li.tab-selected a { /* background: #FDCC00 url(picture/navi/tabs/simple/active_tab.png) no-repeat scroll left top; */ background-color: #FDCC00; } #rgt_content div#simpletabs ul.tab-menu li.tab-selected a span { /* background: #FDCC00 url(picture/navi/tabs/simple/active_tab.png) no-repeat scroll right top; */ background-color: #FDCC00; color: #4E4E4E; } #rgt_content div#simpletabs ul.tab-menu li a:hover, #rgt_content div#simpletabs ul.tab-menu li a:hover span { background-color: #FF946F; color: #1E1E1E; } #rgt_content div#simpletabs ul.tab-menu li.tab-selected a:hover, #rgt_content div#simpletabs ul.tab-menu li.tab-selected a:hover span { background-color: #FFAD1F; color: #2E2E2E; }