jQuery UI Tabs

tab_sort_section_jquery.tmpl

/**
 ********************************************************************
 * Template to build in a jQuery tab snippet using jQuery-UI
 * tab_sort_section_query.tmpl for the CP Register (Tabs)
 * http://jqueryui.com/demos/tabs/
 *
 * 15.02.10 Knut Heermann (flip-flop) - http://planmatrix.de
 * ------------------------------------------------------------------
 * Selector: #tabs
 
 * Corresponding with the basic css file:
 * - template/inc_css/specific/jquery/themes/base/ui.all.css.css
 *
 * Uses the js files:
 * - template/lib/jquery/plugin/jquery.jquery-ui.min.js  (UI)
 * - template/lib/jquery/jquery-1.4.min.js (Core)
 *
 * Recomended:
 * - template/inc_script/frontend_init/cp_trig_sort_section.php
 *
 *
 * Put this file into the Folder
 * - template/inc_cntpart/tabs/*
 *
 * Switch in your conf.inc.php -> $phpwcms['allow_cntPHP_rt']   = 1;
 *********************************************************************
*/
 
<!--TABS_START//-->
<!--SORT_INTO_NEW_BLOCKS//-->
 
[PHP]
// ===========================================================================
// ---- Load the right css classes
$GLOBALS['block']['css']['jquery_ui_tabs'] = 'specific/jquery/themes/base/ui.all.css';
 
// ---- Load the right JS plugin
initJSPlugin('jquery-ui.min');
 
// ---- Load the right js
$GLOBALS['block']['custom_htmlhead']['jqueryui-tabs'] = '  <script type="text/javascript">
    //<![CDATA[
    $(function() {
        $("#tabs").tabs({
            collapsible: true
        });
 
        //setter
        $("#tabs").tabs(\'option\', \'fx\', { height: \'toggle\', opacity: \'toggle\' });
    });
    //]]>
 
    </script>';
 
 
 
 
// ===========================================================================
[/PHP]
 
 
[TITLE]<h3>{TITLE}</h3>[/TITLE]
[SUBTITLE]<h4>{SUBTITLE}</h4>[/SUBTITLE]
 
[CP_TRIG_DEFINITION]
 
[BLOCK_01X_PREFIX]<ul class="tabnav">[/BLOCK_01X_PREFIX]
[BLOCK_01X_SUFFIX]</ul>[/BLOCK_01X_SUFFIX]
 
[BLOCK_02X_PREFIX][/BLOCK_02X_PREFIX]
[BLOCK_02X_SUFFIX][/BLOCK_02X_SUFFIX]
 
[/CP_TRIG_DEFINITION]
 
[TABS_ENTRIES]
 
<div style="width: 560px;">
<div id="tabs">
[CP_TRIG_WRAP_CONTENT]
    {TABS_ENTRIES}
[/CP_TRIG_WRAP_CONTENT]
</div><!--/tabs-->
</div>
 
 
[/TABS_ENTRIES]
<!--TABS_END//-->
 
 
<!--TABS_ENTRY_START//-->
 
[CP_TRIG_CONTENT]
 
[BLOCK_01X]
    <li><a href="#tabs-[COUNTX]">[TABTITLE]<b>{TABTITLE}</b>[/TABTITLE][TABTITLE_ELSE]<b>New Title</b>[/TABTITLE_ELSE]</a></li>
[/BLOCK_01X]
 
[BLOCK_02X]
[TABCONTENT]<div id="tabs-[COUNTX]">
    [TABHEADLINE]<h3>{TABHEADLINE}</h3>[/TABHEADLINE]
    [TABTEXT]{TABTEXT}[/TABTEXT]
</div>[/TABCONTENT]
[/BLOCK_02X]
 
 
 
[/CP_TRIG_CONTENT]
 
<!--TABS_ENTRY_END//-->

reg_tabs_simpletabs01.css

/* CSS for simpletabs in RT "Register Tabs" */
 
#rgt_content {
    font-size:1em;
    line-height:135%;
    margin:10px 35px 0pt 20px;
    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;
}