formstone/docs/json/scrollbar.json

Library of modular front end components.

{"main":["scrollbar.js","scrollbar.css"],"options":[{"name":"customClass","type":"string","default":"''","description":"Class applied to instance"},{"name":"duration","type":"int","default":"0","description":"Scroll animation length"},{"name":"handleSize","type":"int","default":"0","description":"Handle size; 0 to auto size"},{"name":"horizontal","type":"boolean","default":"false","description":"Scroll horizontally"},{"name":"mouseWheel","type":"boolean","default":"true","description":"Flag to prevent scrolling of parent element"},{"name":"theme","type":"string","default":"\"fs-light\"","description":"Theme class name"},{"name":"trackMargin","type":"int","default":"0"}],"events":[],"methods":[{"name":"defaults","description":"Extends plugin default settings; effects instances created hereafter.","params":[{"name":"options","type":"object","default":"{}","description":"New plugin defaults"}],"examples":["$.scrollbar(\"defaults\", { ... });"]},{"name":"destroy","description":"Removes plugin instance.","examples":["$(\".target\").scrollbar(\"destroy\");"]},{"name":"resize","description":"Resizes layout on instance of plugin","examples":["$(\".target\").scrollbar(\"resize\");"]},{"name":"scroll","description":"Scrolls instance of plugin to element or position","params":[{"name":"position","type":"string or int","default":"null","description":"Target element selector or static position"},{"name":"duration","type":"int","default":"null","description":"Optional scroll duration"}],"examples":["$(\".target\").scrollbar(\"scroll\", position, duration);"]}],"name":"Scrollbar","type":"widget","description":"A jQuery plugin for custom scrollbars.","dependencies":["jQuery","core.js","touch.js"],"css":[{"name":".fs-scrollbar-element","type":"element","description":"Target elmement"},{"name":".fs-scrollbar","type":"element","description":"Base widget class"},{"name":".fs-scrollbar.fs-scrollbar-horizontal","type":"modifier","description":"Indicates horizontal scrolling"},{"name":".fs-scrollbar.fs-scrollbar-setup","type":"modifier","description":"Indicates setup state"},{"name":".fs-scrollbar.fs-scrollbar-active","type":"modifier","description":"Indicates active state"},{"name":".fs-scrollbar-content","type":"element","description":"Scrolling content"},{"name":".fs-scrollbar-bar","type":"element","description":"Scrollbar container"},{"name":".fs-scrollbar-track","type":"element","description":"Scrollbar track container"},{"name":".fs-scrollbar-handle","type":"element","description":"Scrollbar handle"}],"use":"### Basic\n\nScrollbar will allow you to customize the visible scrollbar on overflow content.\n\n```javascript\n$(\".target\").scrollbar();\n```\n\n```markup\n<div class=\"target\">\n  <p>...</p>\n</div>\n```\n\n### Horizontal\n\n```javascript\n$(\".target\").scrollbar({\n  horizontal: true\n});\n```","demo":"<h4>Basic</h4>\n\n<!-- START: FIRSTDEMO -->\n\r\n<style>\r\n  .scrollbar { height: 200px; overflow: auto; margin: 20px 0 0; }\r\n</style>\n\r\n<div class=\"demo_container\">\r\n  <div class=\"demo_example\">\r\n    <div class=\"scrollbar scrollbar_theme js-scrollbar\" data-scrollbar-options='{\"trackMargin\":5}'>\r\n      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla porta aliquet gravida. Aenean pulvinar blandit orci vel fermentum. Phasellus viverra pulvinar viverra. Quisque et sagittis ante. Nulla sem neque, fermentum at laoreet vel, rhoncus sit amet nisl. Donec consectetur urna ac massa placerat ac pharetra sem mollis. Integer nibh urna, placerat vel placerat in, tempor at nisi. Aenean rutrum, enim sit amet rutrum fermentum, magna justo volutpat massa, lacinia adipiscing nisl magna eget nibh. In auctor, nibh eget faucibus tristique, arcu turpis molestie orci, placerat suscipit diam nibh et erat. Curabitur tempus lectus quis odio ornare porta.</p>\r\n      <p>Aenean odio libero, eleifend eu luctus quis, accumsan ac risus. Mauris egestas bibendum tortor vel semper. Ut egestas, erat ut rutrum tempus, massa erat commodo arcu, id congue justo odio ac erat. Quisque non purus et nunc consequat scelerisque. Vestibulum vitae tristique dolor. Suspendisse ac quam interdum libero euismod tempus. Sed a ante justo, varius commodo urna.</p>\r\n      <p>Ut ante felis, malesuada eu eleifend convallis, tempor eget tellus. Vestibulum rhoncus elementum dui a sagittis. Praesent eu nunc vitae massa cursus luctus ac eget massa. Etiam sagittis nibh nisi, vel sagittis felis. Aliquam vulputate mauris id nunc pellentesque at fermentum lacus dapibus. Donec pretium consectetur magna sit amet egestas. Ut dignissim adipiscing purus sit amet lobortis.</p>\r\n      <p>Curabitur ullamcorper, nisi quis convallis luctus, nunc nisi mollis felis, eu mattis nunc sapien sed sapien. Vestibulum in nisi mauris, mattis sagittis lacus. Pellentesque in sem augue, a blandit augue. Aliquam bibendum diam ac erat imperdiet vestibulum. Vivamus dignissim, quam in feugiat scelerisque, enim risus interdum turpis, in vehicula ante lorem eu erat. Mauris ac turpis luctus libero pulvinar ultricies. Praesent porttitor nulla non risus porta consequat. Nunc vulputate porta nulla non ultrices. Donec et magna eu nisl elementum scelerisque. Curabitur in vehicula dui.</p>\r\n      <p>Suspendisse eu nibh in libero euismod condimentum eget nec enim. Suspendisse nec ligula nec augue tristique semper sed suscipit erat. Integer et nunc a augue pellentesque fringilla. Nullam leo ligula, mattis id pretium ac, suscipit sed nunc. Duis ac lorem nec velit malesuada tempus hendrerit ut metus. Quisque a lacus vel lectus rhoncus luctus. Aliquam ornare, nunc sit amet porttitor ornare, libero lectus congue enim, vitae tincidunt sapien justo et ligula. Proin vestibulum blandit fringilla. </p>\r\n    </div>\r\n  </div>\r\n  <div class=\"demo_code\">\r\n    <pre><code class=\"language-html\">&lt;div class=&quot;scrollbar&quot;&gt;\r\n&Tab;...\r\n&lt;/div&gt;</code></pre>\r\n    <pre><code class=\"language-javascript\">$(\".scrollbar\").scrollbar();</code></pre>\r\n  </div>\r\n</div>\r\n\r\n<!-- END: FIRSTDEMO -->\r\n\r\n<style>\r\n  .scrollbar_theme { padding: 10px 20px 10px 20px; }\r\n  .scrollbar_theme.fs-scrollbar { padding: 0; }\r\n  .scrollbar_theme.fs-scrollbar .fs-scrollbar-content,\r\n  .scrollbar_theme.fs-scrollbar-active .fs-scrollbar-content { padding: 20px 40px 20px 20px; }\r\n\r\n  .scrollbar p { margin: 0 0 20px; }\r\n\r\n  .scrollbar.horizontal { height: 225px; padding: 0; }\r\n\r\n  .wide_load { width: 2400px; overflow: hidden; }\r\n  .wide_load p { float: left; margin: 0 25px 0 0; width: 450px; }\r\n</style>\r\n\r\n<h4>Horizontal</h4>\r\n<div class=\"demo_container\">\r\n  <div class=\"demo_example\">\r\n    <div class=\"scrollbar scrollbar_theme horizontal js-scrollbar\" data-scrollbar-options='{\"horizontal\":true,\"trackMargin\":5}'>\r\n      <div class=\"wide_load\">\r\n        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla porta aliquet gravida. Aenean pulvinar blandit orci vel fermentum. Phasellus viverra pulvinar viverra. Quisque et sagittis ante. Nulla sem neque, fermentum at laoreet vel, rhoncus sit amet nisl. Donec consectetur urna ac massa placerat ac pharetra sem mollis. Integer nibh urna, placerat vel placerat in, tempor at nisi.</p>\r\n        <p>Aenean odio libero, eleifend eu luctus quis, accumsan ac risus. Mauris egestas bibendum tortor vel semper. Ut egestas, erat ut rutrum tempus, massa erat commodo arcu, id congue justo odio ac erat. Quisque non purus et nunc consequat scelerisque. Vestibulum vitae tristique dolor. Suspendisse ac quam interdum libero euismod tempus. Sed a ante justo, varius commodo urna.</p>\r\n        <p>Ut ante felis, malesuada eu eleifend convallis, tempor eget tellus. Vestibulum rhoncus elementum dui a sagittis. Praesent eu nunc vitae massa cursus luctus ac eget massa. Etiam sagittis nibh nisi, vel sagittis felis. Aliquam vulputate mauris id nunc pellentesque at fermentum lacus dapibus. Donec pretium consectetur magna sit amet egestas. Ut dignissim adipiscing purus sit amet lobortis.</p>\r\n        <p>Curabitur ullamcorper, nisi quis convallis luctus, nunc nisi mollis felis, eu mattis nunc sapien sed sapien. Vestibulum in nisi mauris, mattis sagittis lacus. Pellentesque in sem augue, a blandit augue. Aliquam bibendum diam ac erat imperdiet vestibulum. Vivamus dignissim, quam in feugiat scelerisque, enim risus interdum turpis, in vehicula ante lorem eu erat. Mauris ac turpis luctus libero pulvinar ultricies.</p>\r\n        <p>Suspendisse eu nibh in libero euismod condimentum eget nec enim. Suspendisse nec ligula nec augue tristique semper sed suscipit erat. Integer et nunc a augue pellentesque fringilla. Nullam leo ligula, mattis id pretium ac, suscipit sed nunc. Duis ac lorem nec velit malesuada tempus hendrerit ut metus. Quisque a lacus vel lectus rhoncus luctus. </p>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"demo_code\">\r\n    <pre><code class=\"language-html\">&lt;div class=&quot;scrollbar&quot;&gt;\r\n&Tab;...\r\n&lt;/div&gt;</code></pre>\r\n    <pre><code class=\"language-javascript\">$(\".scrollbar\").scrollbar({\r\n  horizontal: true\r\n});</code></pre>\r\n  </div>\r\n</div>\r\n\r\n<h4>No Theme</h4>\r\n<div class=\"demo_container\">\r\n  <div class=\"demo_example\">\r\n    <div class=\"scrollbar js-scrollbar\" data-scrollbar-options='{\"theme\":\"\",\"trackMargin\":5}'>\r\n      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla porta aliquet gravida. Aenean pulvinar blandit orci vel fermentum. Phasellus viverra pulvinar viverra. Quisque et sagittis ante. Nulla sem neque, fermentum at laoreet vel, rhoncus sit amet nisl. Donec consectetur urna ac massa placerat ac pharetra sem mollis. Integer nibh urna, placerat vel placerat in, tempor at nisi. Aenean rutrum, enim sit amet rutrum fermentum, magna justo volutpat massa, lacinia adipiscing nisl magna eget nibh. In auctor, nibh eget faucibus tristique, arcu turpis molestie orci, placerat suscipit diam nibh et erat. Curabitur tempus lectus quis odio ornare porta.</p>\r\n      <p>Aenean odio libero, eleifend eu luctus quis, accumsan ac risus. Mauris egestas bibendum tortor vel semper. Ut egestas, erat ut rutrum tempus, massa erat commodo arcu, id congue justo odio ac erat. Quisque non purus et nunc consequat scelerisque. Vestibulum vitae tristique dolor. Suspendisse ac quam interdum libero euismod tempus. Sed a ante justo, varius commodo urna.</p>\r\n      <p>Ut ante felis, malesuada eu eleifend convallis, tempor eget tellus. Vestibulum rhoncus elementum dui a sagittis. Praesent eu nunc vitae massa cursus luctus ac eget massa. Etiam sagittis nibh nisi, vel sagittis felis. Aliquam vulputate mauris id nunc pellentesque at fermentum lacus dapibus. Donec pretium consectetur magna sit amet egestas. Ut dignissim adipiscing purus sit amet lobortis.</p>\r\n      <p>Curabitur ullamcorper, nisi quis convallis luctus, nunc nisi mollis felis, eu mattis nunc sapien sed sapien. Vestibulum in nisi mauris, mattis sagittis lacus. Pellentesque in sem augue, a blandit augue. Aliquam bibendum diam ac erat imperdiet vestibulum. Vivamus dignissim, quam in feugiat scelerisque, enim risus interdum turpis, in vehicula ante lorem eu erat. Mauris ac turpis luctus libero pulvinar ultricies. Praesent porttitor nulla non risus porta consequat. Nunc vulputate porta nulla non ultrices. Donec et magna eu nisl elementum scelerisque. Curabitur in vehicula dui.</p>\r\n      <p>Suspendisse eu nibh in libero euismod condimentum eget nec enim. Suspendisse nec ligula nec augue tristique semper sed suscipit erat. Integer et nunc a augue pellentesque fringilla. Nullam leo ligula, mattis id pretium ac, suscipit sed nunc. Duis ac lorem nec velit malesuada tempus hendrerit ut metus. Quisque a lacus vel lectus rhoncus luctus. Aliquam ornare, nunc sit amet porttitor ornare, libero lectus congue enim, vitae tincidunt sapien justo et ligula. Proin vestibulum blandit fringilla. </p>\r\n    </div>\r\n  </div>\r\n  <div class=\"demo_code\">\r\n    <pre><code class=\"language-html\">&lt;div class=&quot;scrollbar&quot;&gt;\r\n&Tab;...\r\n&lt;/div&gt;</code></pre>\r\n    <pre><code class=\"language-javascript\">$(\".scrollbar\").scrollbar({\r\n  theme: \"\"\r\n});</code></pre>\r\n  </div>\r\n</div>\r\n","document":"# Scrollbar\n\nA jQuery plugin for custom scrollbars.\n\n<!-- HEADER END -->\n\n<!-- NAV START -->\n\n* [Use](#use)\n* [Options](#options)\n* [Methods](#methods)\n* [CSS](#css)\n\n<!-- NAV END -->\n\n<!-- DEMO BUTTON -->\n\n<a name=\"use\"></a>\n\n## Using Scrollbar\n\n\n#### Main\n\n```markup\nscrollbar.js\nscrollbar.css\n```\n\n\n#### Dependencies\n\n```markup\njQuery\ncore.js\ntouch.js\n```\n\n### Basic\n\nScrollbar will allow you to customize the visible scrollbar on overflow content.\n\n```javascript\n$(\".target\").scrollbar();\n```\n\n```markup\n<div class=\"target\">\n  <p>...</p>\n</div>\n```\n\n### Horizontal\n\n```javascript\n$(\".target\").scrollbar({\n  horizontal: true\n});\n```\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-scrollbar-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| `duration` | `int` | `0` | Scroll animation length |\n| `handleSize` | `int` | `0` | Handle size; 0 to auto size |\n| `horizontal` | `boolean` | `false` | Scroll horizontally |\n| `mouseWheel` | `boolean` | `true` | Flag to prevent scrolling of parent element |\n| `theme` | `string` | `\"fs-light\"` | Theme class name |\n| `trackMargin` | `int` | `0` | &nbsp; |\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### defaults\n\nExtends plugin default settings; effects instances created hereafter.\n\n```javascript\n$.scrollbar(\"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\").scrollbar(\"destroy\");\n```\n\n### resize\n\nResizes layout on instance of plugin\n\n```javascript\n$(\".target\").scrollbar(\"resize\");\n```\n\n### scroll\n\nScrolls instance of plugin to element or position\n\n```javascript\n$(\".target\").scrollbar(\"scroll\", position, duration);\n```\n\n#### Parameters\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| `position` | `string or int` | `null` | Target element selector or static position |\n| `duration` | `int` | `null` | Optional scroll duration |\n\n<hr>\n<a name=\"css\"></a>\n\n## CSS\n\n| Class | Type | Description |\n| --- | --- | --- |\n| `.fs-scrollbar-element` | `element` | Target elmement |\n| `.fs-scrollbar` | `element` | Base widget class |\n| `.fs-scrollbar.fs-scrollbar-horizontal` | `modifier` | Indicates horizontal scrolling |\n| `.fs-scrollbar.fs-scrollbar-setup` | `modifier` | Indicates setup state |\n| `.fs-scrollbar.fs-scrollbar-active` | `modifier` | Indicates active state |\n| `.fs-scrollbar-content` | `element` | Scrolling content |\n| `.fs-scrollbar-bar` | `element` | Scrollbar container |\n| `.fs-scrollbar-track` | `element` | Scrollbar track container |\n| `.fs-scrollbar-handle` | `element` | Scrollbar handle |\n\n"}