formstone

Version:

Library of modular front end components.

1 lines • 9.15 kB

JSON

{"main":["number.js","number.css"],"options":[{"name":"customClass","type":"string","default":"''","description":"Class applied to instance"},{"name":"labels.up","type":"string","default":"'Up'","description":"Up arrow label"},{"name":"labels.down","type":"string","default":"'Down'","description":"Down arrow label"},{"name":"theme","type":"string","default":"\"fs-light\"","description":"Theme class name"}],"events":[],"methods":[{"name":"defaults","description":"Extends plugin default settings; effects instances created hereafter.","params":[{"name":"options","type":"object","default":"{}","description":"New plugin defaults"}],"examples":["$.number(\"defaults\", { ... });"]},{"name":"destroy","description":"Removes plugin instance.","examples":["$(\".target\").number(\"destroy\");"]},{"name":"disable","description":"Disables target instance","examples":["$(\".target\").number(\"disable\");"]},{"name":"enable","description":"Enables target instance","examples":["$(\".target\").number(\"enable\");"]},{"name":"update","description":"Updates instance.","examples":["$(\".target\").number(\"update\");"]}],"name":"Number","type":"widget","description":"A jQuery plugin for cross browser number inputs.","dependencies":["jQuery","core.js"],"css":[{"name":".fs-number-element","type":"element","description":"Target elmement"},{"name":".fs-number","type":"element","description":"Base widget class"},{"name":".fs-number.fs-number-disabled","type":"modifier","description":"Indicates disabled state"},{"name":".fs-number-arrow","type":"element","description":"Arrow elmement"},{"name":".fs-number-arrow:after","type":"element","description":"Arrow icon"},{"name":".fs-number-arrow.fs-number-up","type":"modifier","description":"Indicates up state"},{"name":".fs-number-arrow.fs-number-down","type":"modifier","description":"Indicates up state"}],"use":"### Basic\n\nNumber will convert an input into a customizable step interface:\n\n```javascript\n$(\"input[type=number]\").number();\n```\n\n```markup\n<input type=\"number\" pattern=\"[0-9]*\">\n```\n\n### Limits\n\nNumber will automatically detect the minimum, maximum and increment values based on the `min`, `max` and `step` attributes:\n\n```markup\n<input type=\"number\" min=\"2\" max=\"20\" step=\"2\" pattern=\"[0-9]*\">\n```","demo":"<h4>Basic</h4>\r\n\r\n\r\n\r\n<style>\r\n .fs-number { max-width: 300px; }\r\n</style>\r\n\r\n<div class=\"demo_container\">\r\n <div class=\"demo_example\">\r\n <form action=\"#\" method=\"GET\" class=\"form demo_form\">\r\n <fieldset class=\"form_fieldset\">\r\n <input type=\"number\" class=\"form_input\" pattern=\"[0-9]*\">\r\n </fieldset>\r\n </form>\r\n </div>\r\n <div class=\"demo_code\">\r\n <pre><code class=\"language-html\"><input type="number" name="number" pattern="[0-9]*"></code></pre>\r\n <pre><code class=\"language-javascript\">$(\"input[type='number']\").number();</code></pre>\r\n </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n<h4>Disabled</h4>\r\n<div class=\"demo_container\">\r\n <div class=\"demo_example\">\r\n <form action=\"#\" method=\"GET\" class=\"form demo_form\">\r\n <fieldset class=\"form_fieldset\">\r\n <input type=\"number\" class=\"form_input\" pattern=\"[0-9]*\" disabled>\r\n </fieldset>\r\n </form>\r\n </div>\r\n <div class=\"demo_code\">\r\n <pre><code class=\"language-html\"><input type="number" name="number" pattern="[0-9]*" disabled></code></pre>\r\n <pre><code class=\"language-javascript\">$(\"input[type='number']\").number();</code></pre>\r\n </div>\r\n</div>\r\n\r\n<h4>Custom Range</h4>\r\n<div class=\"demo_container\">\r\n <div class=\"demo_example\">\r\n <form action=\"#\" method=\"GET\" class=\"form demo_form\">\r\n <fieldset class=\"form_fieldset\">\r\n <input type=\"number\" min=\"0\" max=\"20\" class=\"form_input\" pattern=\"[0-9]*\">\r\n </fieldset>\r\n </form>\r\n </div>\r\n <div class=\"demo_code\">\r\n <pre><code class=\"language-html\"><input type="number" name="number" pattern="[0-9]*" min="0" max="20"></code></pre>\r\n <pre><code class=\"language-javascript\">$(\"input[type='number']\").number();</code></pre>\r\n </div>\r\n</div>\n\n<h4>Custom Step</h4>\n<div class=\"demo_container\">\n <div class=\"demo_example\">\n <form action=\"#\" method=\"GET\" class=\"form demo_form\">\n <fieldset class=\"form_fieldset\">\n <input type=\"number\" step=\"0.01\" class=\"form_input\">\n </fieldset>\n </form>\n </div>\n <div class=\"demo_code\">\n <pre><code class=\"language-html\"><input type="number" name="number" step="0.1"></code></pre>\n <pre><code class=\"language-javascript\">$(\"input[type='number']\").number({\n step: 0.1\n});</code></pre>\n </div>\n</div>\r\n\r\n<h4>No Theme</h4>\r\n<div class=\"demo_container\">\r\n <div class=\"demo_example\">\r\n <form action=\"#\" method=\"GET\" class=\"form demo_form\">\r\n <fieldset class=\"form_fieldset\">\r\n <input type=\"number\" class=\"form_input\" pattern=\"[0-9]*\" data-number-options='{\"theme\":\"\"}'>\r\n </fieldset>\r\n </form>\r\n </div>\r\n <div class=\"demo_code\">\r\n <pre><code class=\"language-html\"><input type="number" name="number" pattern="[0-9]*"></code></pre>\r\n <pre><code class=\"language-javascript\">$(\"input[type='number']\").number({\r\n theme: \"\"\r\n});</code></pre>\r\n </div>\r\n</div>\r\n","document":"# Number\n\nA jQuery plugin for cross browser number inputs.\n\n\n\n\n\n* [Use](#use)\n* [Options](#options)\n* [Methods](#methods)\n* [CSS](#css)\n\n\n\n\n\n<a name=\"use\"></a>\n\n## Using Number\n\n\n#### Main\n\n```markup\nnumber.js\nnumber.css\n```\n\n\n#### Dependencies\n\n```markup\njQuery\ncore.js\n```\n\n### Basic\n\nNumber will convert an input into a customizable step interface:\n\n```javascript\n$(\"input[type=number]\").number();\n```\n\n```markup\n<input type=\"number\" pattern=\"[0-9]*\">\n```\n\n### Limits\n\nNumber will automatically detect the minimum, maximum and increment values based on the `min`, `max` and `step` attributes:\n\n```markup\n<input type=\"number\" min=\"2\" max=\"20\" step=\"2\" pattern=\"[0-9]*\">\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-number-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| `labels.up` | `string` | `'Up'` | Up arrow label |\n| `labels.down` | `string` | `'Down'` | Down arrow label |\n| `theme` | `string` | `\"fs-light\"` | Theme class name |\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$.number(\"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\").number(\"destroy\");\n```\n\n### disable\n\nDisables target instance\n\n```javascript\n$(\".target\").number(\"disable\");\n```\n\n### enable\n\nEnables target instance\n\n```javascript\n$(\".target\").number(\"enable\");\n```\n\n### update\n\nUpdates instance.\n\n```javascript\n$(\".target\").number(\"update\");\n```\n\n<hr>\n<a name=\"css\"></a>\n\n## CSS\n\n| Class | Type | Description |\n| --- | --- | --- |\n| `.fs-number-element` | `element` | Target elmement |\n| `.fs-number` | `element` | Base widget class |\n| `.fs-number.fs-number-disabled` | `modifier` | Indicates disabled state |\n| `.fs-number-arrow` | `element` | Arrow elmement |\n| `.fs-number-arrow:after` | `element` | Arrow icon |\n| `.fs-number-arrow.fs-number-up` | `modifier` | Indicates up state |\n| `.fs-number-arrow.fs-number-down` | `modifier` | Indicates up state |\n\n"}