<h4 class="ui header">Opening tabs with menus</h4>
<p>Tabs are usually used in concert with an element that activates the tab.</p>
<p>When using tabs, unlike other UI components, the menu or activating element is initialized instead of the tab.</p>
<div class="first no example">
<div class="ignored ui info message">
Tabs are connected to their activators with a metadata attribute <code>data-tab</code>. This should be added to both the activating element and the tab itself.
<h4 class="ui header">Opening tabs with menus</h4>
<p>Tabs are usually used in concert with an element that activates the tab. When using tabs, unlike other UI components, the menu or activating element is initialized instead of the tab.</p>
<p>Tabs are connected to their activators with a metadata attribute <code>data-tab</code>. This should be added to both the activating element and the tab itself.</p>
<div class="ignored ui info message">
<h4 class="ui header">Default tabs</h4>
<p>After any tab is opened it will look for a default tab to open inside of the current tab. This is the first tab that begins with the same stem url as the parent tab. For example a tab with the path <code>data-tab="home"</code> might open a tab automatically <code>data-tab="/home/inbox"</code>.</p>
<p>This will happen recursively for every tab open, allowing as many levels of tabs as you like</p>
<h4 class="ui header">Managing Back/Forward Buttons with Tabs</h4>
<p>Tabs can attach to a history change event to allow for tabs to maintain history events. Tabs use Asual's <a href="https://github.com/asual/jquery-address">Address library</a> to provide cross-browser push state support. This makes sure in browser that don't support push state, <code>hashchange</code> is used with in page anchors to provide history functionality.</p>
<div class="ignored ui warning message">
<div class="header">Use proper path</div>
Make sure when you use history to specify the proper path. This is required for determining the stem url from the part of the url maintaining in page history. Using the incorrect path will cause the module to work incorrectly, producing unexpected results.
</div>
<div class="ignored ui warning message">
<div class="header">Route your URLs</div>
Be sure to set up routes on your server for any url used with history. If you use history to change the url to a location that does not exist, it will 404 on the next refresh. For example this documentation will 404 on refresh because Github Pages are only set up to server static site content.
<h4 class="ui header">Managing History with Tabs</h4>
<p>Tabs can attach to a history change event to allow for tabs to maintain history events. Tabs use Asual's <a href="https://github.com/asual/jquery-address">Address library</a> to provide cross-browser push state support. This makes sure in browser that don't support push state, <code>hashchange</code> is used with in page anchors to provide history functionality.</p>
<div class="ignored ui warning message">
<h4 class="header">Setup Paths</h4>
Make sure when you use history to specify the path. This is required for determining the stem url from the part of the url maintaining in page history. The path is the URL without any tabs open. This cannot usually be set automatically because on future page refreshes the URL may include an internal link. Using the incorrect path will cause the module to work incorrectly, producing unexpected results.
</div>
<div class="ignored ui red message">
<h4 class="header">Route your URLs</h4>
Be sure to set up routes on your server for any url used with history. If you use history to change the url to a location that does not exist, it will 404 on the next refresh. The docs for example, are static github hosted pages, so will 404 if the page url changes
</div>
<div class="code" data-type="javascript">
$('.history.example .menu .item')
.tab({
context : '.history.example',
history : true,
path : '/modules/tab.html'
})
;
</div>
<div class="ui pointing secondary menu">
<a class="active item" data-tab="first">First</a>
<a class="item" data-tab="second">Second</a>
<a class="item" data-tab="third">Third</a>
</div>
<div class="ui active tab segment" data-tab="first">
<div class="ui top attached tabular menu">
<a class="active item" data-tab="first/a">1A</a>
<a class="item" data-tab="first/b">1B</a>
<a class="item" data-tab="first/c">1C</a>
</div>
<div class="ui bottom attached active tab segment" data-tab="first/a">1A</div>
<p>The easiest way to setup dynamic content is to use the parameter <code>auto</code>, this will automatically retrieve content at a remote url matching the url set in the browser. The URL will receive an addition HTTP Header <code>'X-Remote': true</code>. You can use this on your server's back-end to determine whether a request is an AJAX request from a tab</p>
<p>This uses a similar technique to <a href="https://github.com/defunkt/jquery-pjax">pJax</a> or Rail's <a href="https://github.com/rails/turbolinks/">turbolinks</a>.</p>
<div class="ignored ui info message">There are a variety of settings for configuring dynamic content behavior. Visit the tab settings section for more information</div>
jlukic
11 years ago