hypejunction/ui_tabs

AJAX Tabs component for Elgg

Installs: 193

Dependents: 3

Suggesters: 0

Stars: 2

Watchers: 2

Forks: 2

Open Issues: 1

Language:JavaScript

Type:elgg-plugin

1.1.4 2016-08-11 13:06 UTC

README

Elgg 2.0

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

  • An example of custom usage can be found in theme_sandbox/components:

Tabs


// in my/module/content.php
<div id="inline-tab1" class="elgg-content">
	<h3>Inline content</h3>
	<p><?= elgg_view('developers/ipsum') ?></p>
</div>

<div id="inline-tab2" class="elgg-content hidden">
	<h3>Inline content 2</h3>
	<p><?= elgg_view('developers/ipsum') ?></p>
</div>

// 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
));