formstone
Version:
Library of modular front end components.
1 lines • 11.7 kB
JSON
{"main":["pagination.js","pagination.css"],"options":[{"name":"ajax","type":"boolean","default":"false","description":"Flag to disable default click actions"},{"name":"customClass","type":"string","default":"''","description":"Class applied to instance"},{"name":"labels.close","type":"string","default":"'Close'","description":"Close button text"},{"name":"labels.count","type":"string","default":"'of'","description":"Pagination count separator text"},{"name":"labels.next","type":"string","default":"'Next'","description":"Pagination control text"},{"name":"labels.previous","type":"string","default":"'Previous'","description":"Pagination control text"},{"name":"labels.select","type":"string","default":"'Select Page'","description":"Pagination select title"},{"name":"labels.pagination","type":"string","default":"'Pagination {guid}'","description":"Pagination aria label; {guid} replaced with instance GUID"},{"name":"maxWidth","type":"string","default":"'980px'","description":"Width at which to auto-disable plugin"},{"name":"theme","type":"string","default":"\"fs-light\"","description":"Theme class name"},{"name":"visible","type":"int","default":"2","description":"Visible pages before and after current page"}],"events":[{"name":"update.pagination","description":"Page updated"}],"methods":[{"name":"defaults","description":"Extends plugin default settings; effects instances created hereafter.","params":[{"name":"options","type":"object","default":"{}","description":"New plugin defaults"}],"examples":["$.pagination(\"defaults\", { ... });"]},{"name":"destroy","description":"Removes plugin instance.","examples":["$(\".target\").pagination(\"destroy\");"]},{"name":"jump","description":"Jump instance of plugin to specific page","examples":["$(\".target\").pagination(\"jump\", 1);"]}],"name":"Pagination","type":"widget","description":"A jQuery plugin for simple pagination.","dependencies":["jQuery","core.js","mediaquery.js"],"css":[{"name":".fs-pagination-element","type":"element","description":"Target elmement"},{"name":".fs-pagination","type":"element","description":"Base widget class"},{"name":".fs-pagination.fs-pagination-mobile","type":"modifier","description":"Indicates mobile display"},{"name":".fs-pagination","type":"element","description":"Pages container"},{"name":".fs-pagination-page","type":"element","description":"Page element"},{"name":".fs-pagination-ellipsis","type":"element","description":"Ellipsis element"},{"name":".fs-pagination-page.fs-pagination-active","type":"modifier","description":"Indicates active page"},{"name":".fs-pagination-page.fs-pagination-first","type":"modifier","description":"Indicates first page"},{"name":".fs-pagination-page.fs-pagination-last","type":"modifier","description":"Indicates last page"},{"name":".fs-pagination-page.fs-pagination-visible","type":"modifier","description":"Indicates visible page"},{"name":".fs-pagination-control","type":"element","description":"Pagination button"},{"name":".fs-pagination-control.fs-pagination-control_previous","type":"modifier","description":"Indicates previous control"},{"name":".fs-pagination-control.fs-pagination-control_next","type":"modifier","description":"Indicates next control"},{"name":".fs-pagination-position","type":"element","description":"Mobile position indicator"},{"name":".fs-pagination-select","type":"element","description":"Mobile page dropdown"},{"name":".fs-pagination-current","type":"element","description":"Current page mobile display"},{"name":".fs-pagination-total","type":"element","description":"Total pages mobile display"}],"use":"### Basic\n\nPagination will convert a set of links into a mobile-friendly pagination system:\n\n```javascript\n$(\".pagination\").pagination();\n```\n\n```markup\n<nav class=\"pagination\">\n <a href=\"1.html\">1</a>\n <a href=\"2.html\">2</a>\n <a href=\"3.html\">3</a>\n <a href=\"4.html\">4</a>\n <a href=\"5.html\">5</a>\n</nav>\n```\n","demo":"<h4>Basic</h4>\r\n\r\n<!-- START: FIRSTDEMO -->\n\r\n<script>\r\n var $demoOutput;\r\n\r\n Formstone.Ready(function() {\r\n $demoOutput = $(\".demo_output\");\r\n\r\n $(\".demo_pagination\").on(\"update.pagination\", function(e, page) {\r\n $demoOutput.prepend('<strong>Index: </strong>' + page + '</span><br>');\r\n });\r\n });\r\n</script>\r\n\r\n<div class=\"demo_container\">\r\n <div class=\"demo_example\">\r\n <nav class=\"js-pagination demo_pagination\">\r\n <a href=\"#1\">1</a>\r\n <a href=\"#2\">2</a>\r\n <a href=\"#3\">3</a>\r\n <a href=\"#4\">4</a>\r\n <a href=\"#5\">5</a>\r\n <a href=\"#6\">6</a>\r\n <a href=\"#7\">7</a>\r\n <a href=\"#8\">8</a>\r\n <a href=\"#9\">9</a>\r\n <a href=\"#10\">10</a>\r\n </nav>\r\n <div class=\"demo_output form_textarea\"></div>\r\n </div>\r\n <div class=\"demo_code\">\r\n <pre><code class=\"language-html\"><nav class="pagination">\r\n	<a href="1.html">1</a>\r\n	<a href="2.html">2</a>\r\n	<a href="3.html">3</a>\r\n	<a href="4.html">4</a>\r\n	<a href="5.html">5</a>\r\n</nav></code></pre>\r\n <pre><code class=\"language-javascript\">$(\".pagination\").pagination();</code></pre>\r\n </div>\r\n</div>\r\n\r\n<!-- END: FIRSTDEMO -->\r\n\r\n<h4>Active Page</h4>\r\n<div class=\"demo_container\">\r\n <div class=\"demo_example\">\r\n <nav class=\"js-pagination\">\r\n <a href=\"#1\">1</a>\r\n <a href=\"#2\">2</a>\r\n <a href=\"#3\">3</a>\r\n <a href=\"#4\">4</a>\r\n <a href=\"#5\" data-pagination-active=\"true\">5</a>\r\n <a href=\"#6\">6</a>\r\n <a href=\"#7\">7</a>\r\n <a href=\"#8\">8</a>\r\n <a href=\"#9\">9</a>\r\n <a href=\"#10\">10</a>\r\n </nav>\r\n </div>\r\n <div class=\"demo_code\">\r\n <pre><code class=\"language-html\"><nav class="pagination">\r\n	<a href="1.html">1</a>\r\n	<a href="2.html">2</a>\r\n	<a href="3.html" data-pagination-active="true">3</a>\r\n	<a href="4.html">4</a>\r\n	<a href="5.html">5</a>\r\n</nav></code></pre>\r\n <pre><code class=\"language-javascript\">$(\".pagination\").pagination();</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 <nav class=\"js-pagination\" data-pagination-options='{\"theme\":\"\"}'>\r\n <a href=\"#1\">1</a>\r\n <a href=\"#2\">2</a>\r\n <a href=\"#3\">3</a>\r\n <a href=\"#4\">4</a>\r\n <a href=\"#5\">5</a>\r\n <a href=\"#6\">6</a>\r\n <a href=\"#7\">7</a>\r\n <a href=\"#8\">8</a>\r\n <a href=\"#9\">9</a>\r\n <a href=\"#10\">10</a>\r\n </nav>\r\n </div>\r\n <div class=\"demo_code\">\r\n <pre><code class=\"language-html\"><nav class="pagination">\r\n	<a href="1.html">1</a>\r\n	<a href="2.html">2</a>\r\n	<a href="3.html">3</a>\r\n	<a href="4.html">4</a>\r\n	<a href="5.html">5</a>\r\n</nav></code></pre>\r\n <pre><code class=\"language-javascript\">$(\".pagination\").pagination({\r\n theme: \"\"\r\n});</code></pre>\r\n </div>\r\n</div>\r\n","document":"# Pagination\n\nA jQuery plugin for simple pagination.\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 Pagination\n\n\n#### Main\n\n```markup\npagination.js\npagination.css\n```\n\n\n#### Dependencies\n\n```markup\njQuery\ncore.js\nmediaquery.js\n```\n\n### Basic\n\nPagination will convert a set of links into a mobile-friendly pagination system:\n\n```javascript\n$(\".pagination\").pagination();\n```\n\n```markup\n<nav class=\"pagination\">\n <a href=\"1.html\">1</a>\n <a href=\"2.html\">2</a>\n <a href=\"3.html\">3</a>\n <a href=\"4.html\">4</a>\n <a href=\"5.html\">5</a>\n</nav>\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-pagination-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| `ajax` | `boolean` | `false` | Flag to disable default click actions |\n| `customClass` | `string` | `''` | Class applied to instance |\n| `labels.close` | `string` | `'Close'` | Close button text |\n| `labels.count` | `string` | `'of'` | Pagination count separator text |\n| `labels.next` | `string` | `'Next'` | Pagination control text |\n| `labels.previous` | `string` | `'Previous'` | Pagination control text |\n| `labels.select` | `string` | `'Select Page'` | Pagination select title |\n| `labels.pagination` | `string` | `'Pagination {guid}'` | Pagination aria label; {guid} replaced with instance GUID |\n| `maxWidth` | `string` | `'980px'` | Width at which to auto-disable plugin |\n| `theme` | `string` | `\"fs-light\"` | Theme class name |\n| `visible` | `int` | `2` | Visible pages before and after current page |\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.pagination` | Page updated |\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$.pagination(\"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\").pagination(\"destroy\");\n```\n\n### jump\n\nJump instance of plugin to specific page\n\n```javascript\n$(\".target\").pagination(\"jump\", 1);\n```\n\n<hr>\n<a name=\"css\"></a>\n\n## CSS\n\n| Class | Type | Description |\n| --- | --- | --- |\n| `.fs-pagination-element` | `element` | Target elmement |\n| `.fs-pagination` | `element` | Base widget class |\n| `.fs-pagination.fs-pagination-mobile` | `modifier` | Indicates mobile display |\n| `.fs-pagination` | `element` | Pages container |\n| `.fs-pagination-page` | `element` | Page element |\n| `.fs-pagination-ellipsis` | `element` | Ellipsis element |\n| `.fs-pagination-page.fs-pagination-active` | `modifier` | Indicates active page |\n| `.fs-pagination-page.fs-pagination-first` | `modifier` | Indicates first page |\n| `.fs-pagination-page.fs-pagination-last` | `modifier` | Indicates last page |\n| `.fs-pagination-page.fs-pagination-visible` | `modifier` | Indicates visible page |\n| `.fs-pagination-control` | `element` | Pagination button |\n| `.fs-pagination-control.fs-pagination-control_previous` | `modifier` | Indicates previous control |\n| `.fs-pagination-control.fs-pagination-control_next` | `modifier` | Indicates next control |\n| `.fs-pagination-position` | `element` | Mobile position indicator |\n| `.fs-pagination-select` | `element` | Mobile page dropdown |\n| `.fs-pagination-current` | `element` | Current page mobile display |\n| `.fs-pagination-total` | `element` | Total pages mobile display |\n\n"}