Simple Tabs (MooTools v1.2x)

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
- CSS made by Oliver Georgi http://phpwcms.de
CMS version: >= V1.44 r388
Version: V1.0
Update: 26.01.10 by MP (pepe) - http://phpwcms-templates.de Manfred Peperkorn
- For better integration of CPs and articles with the tag {SHOW_CONTENT:….}

Tag:

Filename: mootools.SimpleTabs.js
Folder: /template/lib/mootools/plugin-1.2/

Filename: simpletabs01.tmpl
Folder: /template/inc_cntpart/tabs/

Filename: reg_tabs_simpletabs01.css
Folder: /template/inc_css/specific/mootools/

Condition: $phpwcms['allow_cntPHP_rt'] = 1;/config/phpwcms/conf.inc.php —-




Description

1. Update to the very latest version

2. Login and goto ADMIN → Templates - see the new options

  • choose MooTools 1.2, load instantly (?), use google ajax lib if you prefer.
    It's just important to choose MooTools 1.2 :!:

3. Installation:

  • Copy and paste the three files below into the specified folder.

4. In use:

  • Setup a Register/tabs content part with your entries.
  • Choose the simpletabs01.tmpl
  • Save and you should be done :-)

<note> There is a new Template replacer to add JavaScript dynamically.
Have a look: http://code.google.com/p/phpwcms/source/detail?r=381 Example:

<!-- JS: SimpleTabs -->

need exactly the following file in that path
template/lib/mootools/plugin-1.2/mootools.SimpleTabs.js you can use something like

<!-- JS: http://digitarald.de/project/simple-tabs/1-0/source/SimpleTabs.js -->

too. :!: Not tested :!:

thats for the template.

In php scripts (at example special frontend_render cases or modules) you can use

<?php
initJSPlugin('SimpleTabs');
?>

it's the same.

In case you call a plugin in these ways, MooTools Lib will always be included.
That's all.

</note>

JavaScript

File: /template/lib/mootools/plugin-1.2/mootools.SimpleTabs.js
(identical to http://digitarald.de/project/simple-tabs/1-0/source/SimpleTabs.js)

mootools.SimpleTabs.js

/**
 * SimpleTabs - Unobtrusive Tabs with Ajax
 *
 * @example
 *
 *    var tabs = new SimpleTabs($('tab-element'), {
 *         selector: 'h2.tab-tab'
 *    });
 *
 * @version        1.0
 *
 * @license        MIT License
 * @author        Harald Kirschner <mail [at] digitarald.de>
 * @copyright    2007 Author
 */
var SimpleTabs = new Class({
 
    Implements: [Events, Options],
 
    /**
     * Options
     */
    options: {
        show: 0,
        selector: '.tab-tab',
        classWrapper: 'tab-wrapper',
        classMenu: 'tab-menu',
        classContainer: 'tab-container',
        onSelect: function(toggle, container, index) {
            toggle.addClass('tab-selected');
            container.setStyle('display', '');
        },
        onDeselect: function(toggle, container, index) {
            toggle.removeClass('tab-selected');
            container.setStyle('display', 'none');
        },
        onRequest: function(toggle, container, index) {
            container.addClass('tab-ajax-loading');
        },
        onComplete: function(toggle, container, index) {
            container.removeClass('tab-ajax-loading');
        },
        onFailure: function(toggle, container, index) {
            container.removeClass('tab-ajax-loading');
        },
        onAdded: Class.empty,
        getContent: null,
        ajaxOptions: {},
        cache: true
    },
 
    /**
     * Constructor
     *
     * @param {Element} The parent Element that holds the tab elements
     * @param {Object} Options
     */
    initialize: function(element, options) {
        this.element = $(element);
        this.setOptions(options);
        this.selected = null;
        this.build();
    },
 
    build: function() {
        this.tabs = [];
        this.menu = new Element('ul', {'class': this.options.classMenu});
        this.wrapper = new Element('div', {'class': this.options.classWrapper});
 
        this.element.getElements(this.options.selector).each(function(el) {
            var content = el.get('href') || (this.options.getContent ? this.options.getContent.call(this, el) : el.getNext());
            this.addTab(el.innerHTML, el.title || el.innerHTML, content);
        }, this);
        this.element.empty().adopt(this.menu, this.wrapper);
 
        if (this.tabs.length) this.select(this.options.show);
    },
 
    /**
     * Add a new tab at the end of the tab menu
     *
     * @param {String} inner Text
     * @param {String} Title
     * @param {Element|String} Content Element or URL for Ajax
     */
    addTab: function(text, title, content) {
        var grab = $(content);
        var container = (grab || new Element('div'))
            .setStyle('display', 'none')
            .addClass(this.options.classContainer)
            .inject(this.wrapper);
        var pos = this.tabs.length;
        var evt = (this.options.hover) ? 'mouseenter' : 'click';
        var tab = {
            container: container,
            toggle: new Element('li').grab(new Element('a', {
                href: '#',
                title: title
            }).grab(
                new Element('span', {html: text})
            )).addEvent(evt, this.onClick.bindWithEvent(this, [pos])).inject(this.menu)
        };
        if (!grab && $type(content) == 'string') tab.url = content;
        this.tabs.push(tab);
        return this.fireEvent('onAdded', [tab.toggle, tab.container, pos]);
    },
 
    onClick: function(evt, index) {
        this.select(index);
        return false;
    },
 
    /**
     * Select the tab via tab-index
     *
     * @param {Number} Tab-index
     */
    select: function(index) {
        if (this.selected === index || !this.tabs[index]) return this;
        if (this.ajax) this.ajax.cancel().removeEvents();
        var tab = this.tabs[index];
        var params = [tab.toggle, tab.container, index];
        if (this.selected !== null) {
            var current = this.tabs[this.selected];
            if (this.ajax && this.ajax.running) this.ajax.cancel();
            params.extend([current.toggle, current.container, this.selected]);
            this.fireEvent('onDeselect', [current.toggle, current.container, this.selected]);
        }
        this.fireEvent('onSelect', params);
        if (tab.url && (!tab.loaded || !this.options.cache)) {
            this.ajax = this.ajax || new Request.HTML();
            this.ajax.setOptions({
                url: tab.url,
                method: 'get',
                update: tab.container,
                onFailure: this.fireEvent.pass(['onFailure', params], this),
                onComplete: function(resp) {
                    tab.loaded = true;
                    this.fireEvent('onComplete', params);
                }.bind(this)
            }).setOptions(this.options.ajaxOptions);
            this.ajax.send();
            this.fireEvent('onRequest', params);
        }
        this.selected = index;
        return this;
    }
 
});


Template

File: /template/inc_cntpart/tabs/simpletabs01.tmpl

And please have a look to the new [TABTITLE_ELSE] section command.
If you need any empty title option, use single ”-” in CP Register, which allows forced [TABTITLE_ELSE] section.

<note> And please have a look to the new [TABTITLE_ELSE] section command.
(http://code.google.com/p/phpwcms/source/detail?r=372)
If you need any empty title option, use single ”-” in CP Register, which allows forced [TABTITLE_ELSE] section.

</note>

Update: 26.01.10 by MP (pepe) - http://phpwcms-templates.de Manfred Peperkorn
- For better integration of CPs and articles with the tag {SHOW_CONTENT:….}

selector: \'h3\' --> selector: \'h3.moo_registerTab\'
<h3 title="{TABTITLE}">{TABTITLE}</h3> --> <h3 class="moo_registerTab" title="{TABTITLE}">{TABTITLE}</h3>
<h3 title="TabElse">TabElse</h3> --> <h3 class="moo_registerTab" title="TabElse">TabElse</h3>

simpletabs01.tmpl

/* ********************************************************************
  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
  26.01.10 Update: MP (pepe) - [[http://phpwcms-templates.de]] Manfred Peperkorn
  selector: \'h3\' -> selector: \'h3.moo_registerTab\'
  <h3 title="{TABTITLE}">{TABTITLE}</h3> -> <h3 class="moo_registerTab" title="{TABTITLE}">{TABTITLE}</h3>
  <h3 title="TabElse">TabElse</h3> -> <h3 class="moo_registerTab" title="TabElse">TabElse</h3>
  ---
  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.moo_registerTab\'
        });
 
    });
 
    //* ]]> *//
  </script>';
 
[/PHP]
 
</div> <!--  END id="rgt_content" //-->
<!--TABS_END//-->
 
<!--TABS_ENTRY_START//-->
[TABTITLE]
<h3 class="moo_registerTab" title="{TABTITLE}">{TABTITLE}</h3>
[/TABTITLE]
[TABTITLE_ELSE]
<h3 class="moo_registerTab" title="TabElse">TabElse</h3>
[/TABTITLE_ELSE]
    [TABCONTENT]
    <div>
        [TABHEADLINE]<h4>{TABHEADLINE}</h4>[/TABHEADLINE]
        [TABTEXT]{TABTEXT}[/TABTEXT]
    </div>
    [/TABCONTENT]
 
<!--TABS_ENTRY_END//-->

CSS

File: /template/inc_css/specific/mootools/reg_tabs_simpletabs01.css

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;
}
english/phpwcms-system/article/contentparts/register-tabs/simple-tabs.txt · Last modified: 2018/06/03 18:09 (external edit)
www.planmatrix.de www.chimeric.de Creative Commons License Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0