formstone/docs/json/tabs.json

Library of modular front end components.

{"main":["tabs.js","tabs.css"],"options":[{"name":"customClass","type":"string","default":"''","description":"Class applied to instance"},{"name":"maxWidth","type":"string","default":"Infinity","description":"Width at which to auto-disable plugin"},{"name":"mobileMaxWidth","type":"string","default":"'740px'","description":"Width at which to auto-disable mobile styles"},{"name":"theme","type":"string","default":"\"fs-light\"","description":"Theme class name"}],"events":[{"name":"update.tabs","description":"Tab activated"}],"methods":[{"name":"activate","description":"Activates instance.","examples":["$(\".target\").tabs(\"activate\");"]},{"name":"defaults","description":"Extends plugin default settings; effects instances created hereafter.","params":[{"name":"options","type":"object","default":"{}","description":"New plugin defaults"}],"examples":["$.tabs(\"defaults\", { ... });"]},{"name":"destroy","description":"Removes plugin instance.","examples":["$(\".target\").tabs(\"destroy\");"]},{"name":"disable","description":"Disables instance.","examples":["$(\".target\").tabs(\"disable\");"]},{"name":"enable","description":"Enables instance.","examples":["$(\".target\").tabs(\"enable\");"]}],"name":"Tabs","type":"widget","description":"A jQuery plugin for simple tabs.","dependencies":["jQuery","core.js","mediaquery.js","swap.js"],"css":[{"name":".fs-tabs-element","type":"element","description":"Target elmement"},{"name":".fs-tabs","type":"element","description":"Base widget class"},{"name":".fs-tabs.fs-tabs-enabled","type":"modifier","description":"Indicates enabled state"},{"name":".fs-tabs-tab","type":"element","description":"Tab handle element"},{"name":".fs-tabs-tab.fs-tabs-enabled","type":"modifier","description":"Indicates enabled state"},{"name":".fs-tabs-tab.fs-tabs-active","type":"modifier","description":"Indicates active state"},{"name":".fs-tabs-tab.fs-tabs-mobile","type":"modifier","description":"Indicates mobile interface"},{"name":".fs-tabs-content","type":"element","description":"Tab content element"},{"name":".fs-tabs-content.fs-tabs-enabled","type":"modifier","description":"Indicates enabled state"},{"name":".fs-tabs-content.fs-tabs-active","type":"modifier","description":"Indicates active state"},{"name":".fs-tabs-tab_mobile","type":"element","description":"Mobile tab handle element"},{"name":".fs-tabs-tab_mobile.fs-tabs-active","type":"modifier","description":"Indicates active state"}],"use":"### Basic\n\nTabs will automatically turn a set of links into a tabbed interface. The link's `href` attribute should point to the desired content's fragment identifier, white the `data-tabs-group` attribute should remain consistent between linked tabs:\n\n```javascript\n$(\".tab\").tabs();\n```\n\n```markup\n<div role=\"tablist\">\n  <nav>\n    <a href=\"#tab-one\" class=\"tab\" data-tabs-group=\"tab-group\">One</a>\n    <a href=\"#tab-two\" class=\"tab\" data-tabs-group=\"tab-group\">Two</a>\n    <a href=\"#tab-three\" class=\"tab\" data-tabs-group=\"tab-group\">Three</a>\n  </nav>\n  <div id=\"tab-one\">\n    ...\n  </div>\n  <div id=\"tab-two\">\n    ...\n  </div>\n  <div id=\"tab-three\">\n    ...\n  </div>\n</div>\n```\n\n### Accessibility\n\nThe `role=\"tablist\"` attribute should be set on a common parent of both the tabs and tab targets to ensure accessibility support. ","demo":"<h4>Basic</h4>\n\n<!-- START: FIRSTDEMO -->\n\n<style>\n  .tabs { overflow: hidden; }\n</style>\n\n<div class=\"demo_container\">\n  <div class=\"demo_example\">\n    <div role=\"tablist\">\n      <nav class=\"tabs\">\n        <a href=\"#tab-1-1\" class=\"tab js-tabs\" data-tabs-group=\"tab-1\">One</a>\n        <a href=\"#tab-1-2\" class=\"tab js-tabs\" data-tabs-group=\"tab-1\" data-tabs-active=\"true\">Two</a>\n        <a href=\"#tab-1-3\" class=\"tab js-tabs\" data-tabs-group=\"tab-1\">Three</a>\n      </nav>\n      <div class=\"tab_content\" id=\"tab-1-1\">\n        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>\n      </div>\n      <div class=\"tab_content\" id=\"tab-1-2\">\n        <p>Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>\n      </div>\n      <div class=\"tab_content\" id=\"tab-1-3\">\n        <p>Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>\n      </div>\n    </div>\n  </div>\n  <div class=\"demo_code\">\n    <pre><code class=\"language-html\">&lt;nav class=&quot;tabs_container&quot;&gt;\n&Tab;&lt;a href=&quot;#tab-1&quot; class=&quot;tabs&quot; data-tabs-group=&quot;tab_group&quot; data-tabs-active=&quot;true&quot;&gt;One&lt;/a&gt;\n&Tab;&lt;a href=&quot;#tab-2&quot; class=&quot;tabs&quot; data-tabs-group=&quot;tab_group&quot;&gt;Two&lt;/a&gt;\n&Tab;&lt;a href=&quot;#tab-3&quot; class=&quot;tabs&quot; data-tabs-group=&quot;tab_group&quot;&gt;Three&lt;/a&gt;\n&lt;/nav&gt;\n&lt;div class=&quot;tab_content&quot; id=&quot;tab-1&quot;&gt;\n&Tab;...\n&lt;/div&gt;\n&lt;div class=&quot;tab_content&quot; id=&quot;tab-1&quot;&gt;\n&Tab;...\n&lt;/div&gt;\n&lt;div class=&quot;tab_content&quot; id=&quot;tab-1&quot;&gt;\n&Tab;...\n&lt;/div&gt;</code></pre>\n    <pre><code class=\"language-javascript\">$(\".tabs\").tabs();</code></pre>\n  </div>\n</div>\n\n<!-- END: FIRSTDEMO -->\n\n<h4>Mobile Max Width</h4>\n<div class=\"demo_container\">\n  <div class=\"demo_example\">\n    <div role=\"tablist\">\n      <nav class=\"tabs\">\n        <a href=\"#tab-2-1\" class=\"tab js-tabs\" data-tabs-group=\"tab-2\" data-tabs-options='{\"mobileMaxWidth\":\"500px\"}'>One</a>\n        <a href=\"#tab-2-2\" class=\"tab js-tabs\" data-tabs-group=\"tab-2\" data-tabs-options='{\"mobileMaxWidth\":\"500px\"}'>Two</a>\n        <a href=\"#tab-2-3\" class=\"tab js-tabs\" data-tabs-group=\"tab-2\" data-tabs-options='{\"mobileMaxWidth\":\"500px\"}'>Three</a>\n      </nav>\n      <div class=\"tab_content\" id=\"tab-2-1\">\n        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>\n      </div>\n      <div class=\"tab_content\" id=\"tab-2-2\">\n        <p>Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>\n      </div>\n      <div class=\"tab_content\" id=\"tab-2-3\">\n        <p>Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>\n      </div>\n    </div>\n  </div>\n  <div class=\"demo_code\">\n    <pre><code class=\"language-html\">&lt;nav class=&quot;tabs_container&quot;&gt;\n&Tab;&lt;a href=&quot;#tab-1&quot; class=&quot;tabs&quot; data-tabs-group=&quot;tab_group&quot; data-tabs-active=&quot;true&quot;&gt;One&lt;/a&gt;\n&Tab;&lt;a href=&quot;#tab-2&quot; class=&quot;tabs&quot; data-tabs-group=&quot;tab_group&quot;&gt;Two&lt;/a&gt;\n&Tab;&lt;a href=&quot;#tab-3&quot; class=&quot;tabs&quot; data-tabs-group=&quot;tab_group&quot;&gt;Three&lt;/a&gt;\n&lt;/nav&gt;\n&lt;div class=&quot;tab_content&quot; id=&quot;tab-1&quot;&gt;\n&Tab;...\n&lt;/div&gt;\n&lt;div class=&quot;tab_content&quot; id=&quot;tab-1&quot;&gt;\n&Tab;...\n&lt;/div&gt;\n&lt;div class=&quot;tab_content&quot; id=&quot;tab-1&quot;&gt;\n&Tab;...\n&lt;/div&gt;</code></pre>\n    <pre><code class=\"language-javascript\">$(\".tabs\").tabs({\n  mobileMaxWidth: 500\n});</code></pre>\n  </div>\n</div>\n\n<h4>No Theme</h4>\n<div class=\"demo_container\">\n  <div class=\"demo_example\">\n    <div role=\"tablist\">\n      <nav class=\"tabs\">\n        <a href=\"#tab-3-1\" class=\"tab js-tabs\" data-tabs-group=\"tab-3\" data-tabs-options='{\"theme\":\"\"}'>One</a>\n        <a href=\"#tab-3-2\" class=\"tab js-tabs\" data-tabs-group=\"tab-3\" data-tabs-options='{\"theme\":\"\"}'>Two</a>\n        <a href=\"#tab-3-3\" class=\"tab js-tabs\" data-tabs-group=\"tab-3\" data-tabs-options='{\"theme\":\"\"}'>Three</a>\n      </nav>\n      <div class=\"tab_content\" id=\"tab-3-1\">\n        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>\n      </div>\n      <div class=\"tab_content\" id=\"tab-3-2\">\n        <p>Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>\n      </div>\n      <div class=\"tab_content\" id=\"tab-3-3\">\n        <p>Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>\n      </div>\n    </div>\n  </div>\n  <div class=\"demo_code\">\n    <pre><code class=\"language-html\">&lt;nav class=&quot;tabs_container&quot;&gt;\n&Tab;&lt;a href=&quot;#tab-1&quot; class=&quot;tabs&quot; data-tabs-group=&quot;tab_group&quot; data-tabs-active=&quot;true&quot;&gt;One&lt;/a&gt;\n&Tab;&lt;a href=&quot;#tab-2&quot; class=&quot;tabs&quot; data-tabs-group=&quot;tab_group&quot;&gt;Two&lt;/a&gt;\n&Tab;&lt;a href=&quot;#tab-3&quot; class=&quot;tabs&quot; data-tabs-group=&quot;tab_group&quot;&gt;Three&lt;/a&gt;\n&lt;/nav&gt;\n&lt;div class=&quot;tab_content&quot; id=&quot;tab-1&quot;&gt;\n&Tab;...\n&lt;/div&gt;\n&lt;div class=&quot;tab_content&quot; id=&quot;tab-1&quot;&gt;\n&Tab;...\n&lt;/div&gt;\n&lt;div class=&quot;tab_content&quot; id=&quot;tab-1&quot;&gt;\n&Tab;...\n&lt;/div&gt;</code></pre>\n    <pre><code class=\"language-javascript\">$(\".tabs\").tabs({\n  theme: \"\"\n});</code></pre>\n  </div>\n</div>\n","document":"# Tabs\n\nA jQuery plugin for simple tabs.\n\n<!-- HEADER END -->\n\n<!-- NAV START -->\n\n* [Use](#use)\n* [Options](#options)\n* [Events](#events)\n* [Methods](#methods)\n* [CSS](#css)\n\n<!-- NAV END -->\n\n<!-- DEMO BUTTON -->\n\n<a name=\"use\"></a>\n\n## Using Tabs\n\n\n#### Main\n\n```markup\ntabs.js\ntabs.css\n```\n\n\n#### Dependencies\n\n```markup\njQuery\ncore.js\nmediaquery.js\nswap.js\n```\n\n### Basic\n\nTabs will automatically turn a set of links into a tabbed interface. The link's `href` attribute should point to the desired content's fragment identifier, white the `data-tabs-group` attribute should remain consistent between linked tabs:\n\n```javascript\n$(\".tab\").tabs();\n```\n\n```markup\n<div role=\"tablist\">\n  <nav>\n    <a href=\"#tab-one\" class=\"tab\" data-tabs-group=\"tab-group\">One</a>\n    <a href=\"#tab-two\" class=\"tab\" data-tabs-group=\"tab-group\">Two</a>\n    <a href=\"#tab-three\" class=\"tab\" data-tabs-group=\"tab-group\">Three</a>\n  </nav>\n  <div id=\"tab-one\">\n    ...\n  </div>\n  <div id=\"tab-two\">\n    ...\n  </div>\n  <div id=\"tab-three\">\n    ...\n  </div>\n</div>\n```\n\n### Accessibility\n\nThe `role=\"tablist\"` attribute should be set on a common parent of both the tabs and tab targets to ensure accessibility support. \n\n\n<a name=\"options\"></a>\n\n## Options\n\nSet instance options by passing a valid object at initialization, or to the public `defaults` method. Custom options for a specific instance can also be set by attaching a `data-tabs-options` attribute to the target elment. This attribute should contain the properly formatted JSON object representing the custom options.\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| `customClass` | `string` | `''` | Class applied to instance |\n| `maxWidth` | `string` | `Infinity` | Width at which to auto-disable plugin |\n| `mobileMaxWidth` | `string` | `'740px'` | Width at which to auto-disable mobile styles |\n| `theme` | `string` | `\"fs-light\"` | Theme class name |\n\n<hr>\n<a name=\"events\"></a>\n\n## Events\n\nEvents are triggered on the target instance's element, unless otherwise stated.\n\n| Event | Description |\n| --- | --- |\n| `update.tabs` | Tab activated |\n\n<hr>\n<a name=\"methods\"></a>\n\n## Methods\n\nMethods are publicly available to all active instances, unless otherwise stated.\n\n### activate\n\nActivates instance.\n\n```javascript\n$(\".target\").tabs(\"activate\");\n```\n\n### defaults\n\nExtends plugin default settings; effects instances created hereafter.\n\n```javascript\n$.tabs(\"defaults\", { ... });\n```\n\n#### Parameters\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| `options` | `object` | `{}` | New plugin defaults |\n\n### destroy\n\nRemoves plugin instance.\n\n```javascript\n$(\".target\").tabs(\"destroy\");\n```\n\n### disable\n\nDisables instance.\n\n```javascript\n$(\".target\").tabs(\"disable\");\n```\n\n### enable\n\nEnables instance.\n\n```javascript\n$(\".target\").tabs(\"enable\");\n```\n\n<hr>\n<a name=\"css\"></a>\n\n## CSS\n\n| Class | Type | Description |\n| --- | --- | --- |\n| `.fs-tabs-element` | `element` | Target elmement |\n| `.fs-tabs` | `element` | Base widget class |\n| `.fs-tabs.fs-tabs-enabled` | `modifier` | Indicates enabled state |\n| `.fs-tabs-tab` | `element` | Tab handle element |\n| `.fs-tabs-tab.fs-tabs-enabled` | `modifier` | Indicates enabled state |\n| `.fs-tabs-tab.fs-tabs-active` | `modifier` | Indicates active state |\n| `.fs-tabs-tab.fs-tabs-mobile` | `modifier` | Indicates mobile interface |\n| `.fs-tabs-content` | `element` | Tab content element |\n| `.fs-tabs-content.fs-tabs-enabled` | `modifier` | Indicates enabled state |\n| `.fs-tabs-content.fs-tabs-active` | `modifier` | Indicates active state |\n| `.fs-tabs-tab_mobile` | `element` | Mobile tab handle element |\n| `.fs-tabs-tab_mobile.fs-tabs-active` | `modifier` | Indicates active state |\n\n"}