README

功能

标准化的UI/UX，用于显示和更新选项卡模块
支持浏览器历史状态

用法

该插件将自动将使用content布局和filter的所有页面AJAX化
自定义用法的示例可以在theme_sandbox/components中找到

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

为了在AJAX请求中更新浏览器状态，请用data-title和data-url属性包裹您的内容。

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

hypejunction / ui_tabs

维护者

详细信息

README

功能

用法