From 02e220490e6b5ddba77eeb9d01dc91f3a8d1bc94 Mon Sep 17 00:00:00 2001 From: jlukic Date: Wed, 2 Oct 2013 16:23:11 -0400 Subject: [PATCH] adds tab draft docs Former-commit-id: fdaea56fc87f32408c7127acd4791d4931364186 Former-commit-id: 152e57380943d8bb7f70242dcc6c27e8f30cc7b8 --- node/src/draft/tab.html.eco | 386 ++++++++++++++++++ .../files/build/semantic.zip.REMOVED.git-id | 2 +- 2 files changed, 387 insertions(+), 1 deletion(-) create mode 100755 node/src/draft/tab.html.eco diff --git a/node/src/draft/tab.html.eco b/node/src/draft/tab.html.eco new file mode 100755 index 000000000..6a8bca410 --- /dev/null +++ b/node/src/draft/tab.html.eco @@ -0,0 +1,386 @@ +--- +layout : 'default' +css : 'side' + +title : 'Tab' +description : 'A tab is a section of content tied to a navigation menu' +type : 'UI Module' +--- + + + +<%- @partial('header') %> + +
+ +
+
+ Examples + Coupling + Behavior + Settings +
+
+ +

Examples

+ +
+ +

Opening tabs with menus

+

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.

+

Tabs are connected to their activators with a metadata attribute data-tab. This should be added to both the activating element and the tab itself.

+ +
+

Default tabs

+

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 data-tab="home" might open a tab automatically data-tab="/home/inbox".

+

This will happen recursively for every tab open, allowing as many levels of tabs as you like

+
+ +
+ $('.first.example .menu .item') + .tab({ + context: '.first.example' + }) + ; +
+
+
+ First + Second + Third +
+
+
+ 1A + 1B + 1C +
+
1A
+
1B
+
1C
+
+
...
+
...
+
+ +
+ First + Second + Third +
+
+
+ 1A + 1B + 1C +
+
1A
+
1B
+
1C
+
+
+
+ 2A + 2B + 2C +
+
2A
+
2B
+
2C
+
+
+
+ 3A + 3B + 3C +
+
3A
+
3B
+
3C
+
+
+ +

Optional Coupling

+ +
+

Managing History with Tabs

+

Tabs can attach to a history change event to allow for tabs to maintain history events. Tabs use Asual's Address library to provide cross-browser push state support. This makes sure in browser that don't support push state, hashchange is used with in page anchors to provide history functionality.

+
+

Setup Paths

+ 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. +
+
+

Route your URLs

+ 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 +
+
+ $('.history.example .menu .item') + .tab({ + context : '.history.example', + history : true, + path : '/modules/tab.html' + }) + ; +
+
+ First + Second + Third +
+
+
+ 1A + 1B + 1C +
+
1A
+
1B
+
1C
+
+
+
+ 2A + 2B + 2C +
+
2A
+
2B
+
2C
+
+
+
+ 3A + 3B + 3C +
+
3A
+
3B
+
3C
+
+
+ +
+

Retreiving Dynamic Tab Content

+

The easiest way to setup dynamic content is to use the parameter auto, this will automatically retrieve content at a remote url matching the url set in the browser. The URL will receive an addition HTTP Header 'X-Remote': true. You can use this on your server's back-end to determine whether a request is an AJAX request from a tab

+

This uses a similar technique to pJax or Rail's turbolinks.

+ +
There are a variety of settings for configuring dynamic content behavior. Visit the tab settings section for more information
+ +
+ $('.dynamic.example .menu .item') + .tab({ + context : '.dynamic.example', + auto : true, + path : '/modules/tab.html' + }) + ; +
+
+ First + Second + Third +
+
+
+ 1A + 1B + 1C +
+
+
+
+
+
+
+ 2A + 2B + 2C +
+
+
+
+
+
+
+ 3A + 3B + 3C +
+
+
+
+
+
+ +

Behavior

+ + All the following behaviors can be called using the syntax $('.foo').tab('behavior name', argumentOne, argumentTwo) + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
attach events(selector, event)Attaches tab action to given selector. Default event if none specified is toggle
showShows tab
hideHides tab
toggleToggles visibility of tab
is openReturns whether tab is open
is closedReturns whether tab is closed
push pagePushes page content to be visible alongside tab
get directionReturns direction of current tab
pull pageReturns page content to original position
add body cssAdds stylesheet to page head to trigger tab animations
remove body cssRemoves any inline stylesheets for tab animation
get transition eventReturns vendor prefixed transition end event
+ +

Settings

+ +

+ Transition Settings +
Form settings modify the transition behavior
+

+ + + + + + + + + + + + + + + + + + + + + + + +
SettingDefaultDescription
overlayfalseWhether tab should overlay page instead of pushing page to the side
useCSStrueWhether to use css animations or fallback javascript animations
duration300Duration of side bar animation
+ +

+ DOM Settings +
DOM settings specify how this module should interface with the DOM
+

+ + + + + + + + + + + + + + + + + + +
SettingDefaultDescription
namespacetabEvent namespace. Makes sure module teardown does not effect other events attached to an element.
className +
+ className: { + active : 'active', + pushed : 'pushed', + top : 'top', + left : 'left', + right : 'right', + bottom : 'bottom' + } +
+ 		Class names used to attach style to state
+ +
+ +

+ Debug Settings +
Debug settings controls debug output to the console
+

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SettingDefaultDescription
nameTabName used in debug logs
debugTrueProvides standard debug output to console
performanceTrueProvides standard debug output to console
verboseTrueProvides ancillary debug output to console
errors +
+ error : { + method : 'The method you called is not defined.', + notFound : 'There were no elements that matched the specified selector' + } +
+
+ +
+ + \ No newline at end of file diff --git a/node/src/files/build/semantic.zip.REMOVED.git-id b/node/src/files/build/semantic.zip.REMOVED.git-id index 136cb3e64..e2cbcaf91 100644 --- a/node/src/files/build/semantic.zip.REMOVED.git-id +++ b/node/src/files/build/semantic.zip.REMOVED.git-id @@ -1 +1 @@ -0e18f542a991fda2e8ac7ff8988cb1f072300772 \ No newline at end of file +3e7e4fbf79193d95cacd1aee55b0d1b657ebc00f \ No newline at end of file