jlukic
11 years ago
11 changed files with 388 additions and 72 deletions
Split View
Diff Options
-
2RELEASE NOTES.md
-
23build/less/modules/tab.js
-
23build/minified/modules/tab.js
-
23build/uncompressed/modules/tab.js
-
2node/src/documents/introduction/getting-started.html.eco
-
265node/src/documents/modules/tab.html.eco
-
23node/src/files/build/less/modules/tab.js
-
23node/src/files/build/minified/modules/tab.js
-
23node/src/files/build/uncompressed/modules/tab.js
-
30node/src/files/javascript/tab.js
-
23src/modules/tab.js
@ -0,0 +1,265 @@ |
|||
--- |
|||
layout : 'default' |
|||
css : 'side' |
|||
|
|||
title : 'Tab' |
|||
description : 'A tab is a section of content tied to a navigation menu' |
|||
type : 'UI Module' |
|||
--- |
|||
|
|||
<script src="/javascript/tab.js"></script> |
|||
|
|||
<%- @partial('header') %> |
|||
|
|||
<div class="main container"> |
|||
|
|||
<div class="peek"> |
|||
<div class="ui vertical pointing secondary menu"> |
|||
<a class="item">Usage</a> |
|||
<a class="item">Examples</a> |
|||
<a class="item">Behavior</a> |
|||
<a class="item">Settings</a> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Usage</h2> |
|||
|
|||
<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="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. |
|||
</div> |
|||
<div class="code" data-type="javascript" data-demo="true"> |
|||
$('.demo.menu .item') |
|||
.tab() |
|||
; |
|||
</div> |
|||
<div class="code" data-type="html" data-label="true" data-preview="true"> |
|||
<div class="ui pointing secondary demo menu"> |
|||
<a class="active item" data-tab="1">First</a> |
|||
<a class="item" data-tab="2">Second</a> |
|||
<a class="item" data-tab="3">Third</a> |
|||
</div> |
|||
<div class="ui active tab segment" data-tab="first"> |
|||
First Tab |
|||
</div> |
|||
<div class="ui tab segment" data-tab="second"> |
|||
Second Tab |
|||
</div> |
|||
<div class="ui tab segment" data-tab="third"> |
|||
Third Tab |
|||
</div> |
|||
</div> |
|||
|
|||
<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. |
|||
</div> |
|||
<div class="code" data-type="javascript" data-demo="true"> |
|||
$('.history.menu .item') |
|||
.tab({ |
|||
history : true, |
|||
path : '/modules/tab.html' |
|||
}) |
|||
; |
|||
</div> |
|||
<div class="code" data-type="html" data-label="true" data-preview="true"> |
|||
<div class="ui pointing secondary history 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"> |
|||
First Tab |
|||
</div> |
|||
<div class="ui tab segment" data-tab="second"> |
|||
Second Tab |
|||
</div> |
|||
<div class="ui tab segment" data-tab="third"> |
|||
Third Tab |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Examples</h2> |
|||
|
|||
|
|||
<h2 class="ui dividing header">Behavior</h2> |
|||
|
|||
All the following behaviors can be called using the syntax <code>$('.foo').tab('behavior name', argumentOne, argumentTwo)</code> |
|||
|
|||
<table class="ui definition celled table segment"> |
|||
<tr> |
|||
<td>attach events(selector, event)</td> |
|||
<td>Attaches tab action to given selector. Default event if none specified is toggle</td> |
|||
</tr> |
|||
<tr> |
|||
<td>show</td> |
|||
<td>Shows tab</td> |
|||
</tr> |
|||
<tr> |
|||
<td>hide</td> |
|||
<td>Hides tab</td> |
|||
</tr> |
|||
<tr> |
|||
<td>toggle</td> |
|||
<td>Toggles visibility of tab</td> |
|||
</tr> |
|||
<tr> |
|||
<td>is open</td> |
|||
<td>Returns whether tab is open</td> |
|||
</tr> |
|||
<tr> |
|||
<td>is closed</td> |
|||
<td>Returns whether tab is closed</td> |
|||
</tr> |
|||
<tr> |
|||
<td>push page</td> |
|||
<td>Pushes page content to be visible alongside tab</td> |
|||
</tr> |
|||
<tr> |
|||
<td>get direction</td> |
|||
<td>Returns direction of current tab</td> |
|||
</tr> |
|||
<tr> |
|||
<td>pull page</td> |
|||
<td>Returns page content to original position</td> |
|||
</tr> |
|||
<tr> |
|||
<td>add body css</td> |
|||
<td>Adds stylesheet to page head to trigger tab animations</td> |
|||
</tr> |
|||
<tr> |
|||
<td>remove body css</td> |
|||
<td>Removes any inline stylesheets for tab animation</td> |
|||
</tr> |
|||
<tr> |
|||
<td>get transition event</td> |
|||
<td>Returns vendor prefixed transition end event</td> |
|||
</tr> |
|||
</table> |
|||
|
|||
<h2 class="ui dividing header">Settings</h2> |
|||
|
|||
<h3 class="ui header"> |
|||
Transition Settings |
|||
<div class="sub header">Form settings modify the transition behavior</div> |
|||
</h3> |
|||
<table class="ui red celled definition table segment"> |
|||
<thead> |
|||
<th>Setting</th> |
|||
<th class="four wide">Default</th> |
|||
<th>Description</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>overlay</td> |
|||
<td>false</td> |
|||
<td>Whether tab should overlay page instead of pushing page to the side</td> |
|||
</tr> |
|||
<tr> |
|||
<td>useCSS</td> |
|||
<td>true</td> |
|||
<td>Whether to use css animations or fallback javascript animations</td> |
|||
</tr> |
|||
<tr> |
|||
<td>duration</td> |
|||
<td>300</td> |
|||
<td>Duration of side bar animation</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
|
|||
<h3 class="ui header"> |
|||
DOM Settings |
|||
<div class="sub header">DOM settings specify how this module should interface with the DOM</div> |
|||
</h3> |
|||
<table class="ui celled purple definition table segment"> |
|||
<thead> |
|||
<th>Setting</th> |
|||
<th class="six wide">Default</th> |
|||
<th>Description</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>namespace</td> |
|||
<td>tab</td> |
|||
<td>Event namespace. Makes sure module teardown does not effect other events attached to an element.</td> |
|||
</tr> |
|||
<tr> |
|||
<td>className</td> |
|||
<td> |
|||
<div class="code"> |
|||
className: { |
|||
active : 'active', |
|||
pushed : 'pushed', |
|||
top : 'top', |
|||
left : 'left', |
|||
right : 'right', |
|||
bottom : 'bottom' |
|||
} |
|||
</div> |
|||
</td> |
|||
<td>Class names used to attach style to state</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
|
|||
<div class="ui horizontal divider"><i class="icon setting"></i></div> |
|||
|
|||
<h3 class="ui header"> |
|||
Debug Settings |
|||
<div class="sub header">Debug settings controls debug output to the console</div> |
|||
</h3> |
|||
|
|||
<table class="ui blue celled definition table segment"> |
|||
<thead> |
|||
<th>Setting</th> |
|||
<th class="four wide">Default</th> |
|||
<th>Description</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>name</td> |
|||
<td>Tab</td> |
|||
<td>Name used in debug logs</td> |
|||
</tr> |
|||
<tr> |
|||
<td>debug</td> |
|||
<td>True</td> |
|||
<td>Provides standard debug output to console</td> |
|||
</tr> |
|||
<tr> |
|||
<td>performance</td> |
|||
<td>True</td> |
|||
<td>Provides standard debug output to console</td> |
|||
</tr> |
|||
<tr> |
|||
<td>verbose</td> |
|||
<td>True</td> |
|||
<td>Provides ancillary debug output to console</td> |
|||
</tr> |
|||
<tr> |
|||
<td>errors</td> |
|||
<td colspan="2"> |
|||
<div class="code"> |
|||
error : { |
|||
method : 'The method you called is not defined.', |
|||
notFound : 'There were no elements that matched the specified selector' |
|||
} |
|||
</div> |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
|
|||
</div> |
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,30 @@ |
|||
semantic.dropdown = {}; |
|||
|
|||
// ready event
|
|||
semantic.dropdown.ready = function() { |
|||
|
|||
// selector cache
|
|||
var |
|||
$examples = $('.example'), |
|||
// alias
|
|||
handler |
|||
; |
|||
|
|||
// event handlers
|
|||
handler = { |
|||
|
|||
}; |
|||
|
|||
$('.demo.menu') |
|||
.first() |
|||
.find('.item') |
|||
.tab() |
|||
; |
|||
|
|||
}; |
|||
|
|||
|
|||
// attach ready event
|
|||
$(document) |
|||
.ready(semantic.dropdown.ready) |
|||
; |
|||
Write
Preview
Loading…
Cancel
Save