hypejunction/ui_tabs

AJAX Tabs component for Elgg

AJAX Tabs component for Elgg

, _(*1)

Features

• Standardized UI/UX for displaying and updating tabbed modules
• Support for browser history states

Usage

• The plugin will automatically AJAXify all pages built using content layout and have a filter, _(*2)

• An example of custom usage can be found in theme_sandbox/components:, _(*3)

, _(*4)

// in my/module/content.php



    
Inline content
    
= elgg_view('developers/ipsum') ?>, (*5)








    
Inline content 2
    
= elgg_view('developers/ipsum') ?>, (*6)

// in my/module/tabs.php
echo elgg_view('navigation/tabs', array(
    'tabs' => array(
        'inline' => array(
            'text' => 'Inline Content',
            'href' => '#inline-tab1',
            'selected' => true,
        ),
        'page' => array(
            'text' => 'Activity Page',
            'href' => '/activity',
        ),
        'view' => array(
            'text' => 'Ajax View',
            'href' => '/ajax/view/my/module/ajax_context',
        ),
        'inline2' => array(
            'text' => 'Inline Content 2',
            'href' => '#inline-tab2',
        )
    ),
));

// in my/module.php

echo elgg_view('components/tabs', array(
    'id' => 'my-module-tabs',
    'tabs' => elgg_view('my/module/tabs'),
    'content' => elgg_view('my/module/content'),
));

• In order to update the browser state on AJAX requests, wrap your content with data-title and data-url attributes.

// my/module/ajax_content.php

echo elgg_format_element('div', array(
    'class' => > 'elgg-content',
    'data-title' => 'New page title',
    'data-url' => 'http://example.com/new-page-url',
    'data-title-selector' => '.elgg-heading-main,.my-module-title', // update text of these selectors
));