formstone
Version:
Library of modular front end components.
1 lines • 13.5 kB
JSON
{"main":["checkbox.js","checkbox.css"],"options":[{"name":"customClass","type":"string","default":"''","description":"Class applied to instance"},{"name":"toggle","type":"boolean","default":"false","description":"Render 'toggle' styles"},{"name":"labels.on","type":"string","default":"'ON'","description":"Label for 'On' position; 'toggle' only"},{"name":"labels.off","type":"string","default":"'OFF'","description":"Label for 'Off' position; 'toggle' only"},{"name":"theme","type":"string","default":"\"fs-light\"","description":"Theme class name"}],"events":[],"methods":[{"name":"disable","description":"Disables target instance","examples":["$(\".target\").checkbox(\"disable\");"]},{"name":"enable","description":"Enables target instance","examples":["$(\".target\").checkbox(\"enable\");"]},{"name":"update","description":"Updates target instance","examples":["$(\".target\").checkbox(\"update\");"]}],"name":"Checkbox","type":"widget","description":"A jQuery plugin for replacing checkboxes.","dependencies":["jQuery","core.js"],"css":[{"name":".fs-checkbox-element","type":"element","description":"Target elmement"},{"name":".fs-checkbox","type":"element","description":"Base widget class"},{"name":".fs-checkbox.fs-checkbox-checked","type":"modifier","description":"Indicates checked state"},{"name":".fs-checkbox.fs-checkbox-radio","type":"modifier","description":"Indicates radio interface"},{"name":".fs-checkbox.fs-checkbox-toggle","type":"modifier","description":"Indicates toggle interface"},{"name":".fs-checkbox.fs-checkbox-focus","type":"modifier","description":"Indicates focused state"},{"name":".fs-checkbox.fs-checkbox-disabled","type":"modifier","description":"Indicates disabled state"},{"name":".fs-checkbox-label","type":"element","description":"Label element"},{"name":".fs-checkbox-marker","type":"element","description":"Marker element"},{"name":".fs-checkbox-flag","type":"element","description":"Flag element"}],"use":"### Basic\n\nCheckbox will automatically detect the input's type and render proper styles.\n\n```javascript\n$(\"input[type=checkbox], input[type=radio]\").checkbox();\n```\n\n```markup\n<fieldset>\n <label for=\"check_1\">Checkbox</label>\n <input type=\"checkbox\" name=\"check_1\" id=\"check_1\" value=\"on\">\n</fieldset>\n<fieldset>\n <label for=\"radio_1\">Radio</label>\n <input type=\"radio\" name=\"radio_1\" id=\"radio_1\" value=\"on\">\n</fieldset>\n```\n\n### Toggle\n\nCheckbox can also render a 'toggle' style checkbox.\n\n```javascript\n$(\"input[type=checkbox]\").checkbox({\n toggle: true\n});\n```","demo":"<h4>Basic</h4>\r\n\r\n<!-- START: FIRSTDEMO -->\r\n\r\n<div class=\"demo_container\">\r\n <div class=\"demo_example\">\r\n <div class=\"fs-row\">\r\n <div class=\"fs-cell fs-sm-half fs-md-half fs-lg-third\">\r\n <form action=\"#\" method=\"GET\" class=\"form demo_form\">\r\n <fieldset class=\"form_fieldset\">\r\n <input type=\"checkbox\" value=\"1\" id=\"checkbox-1\" name=\"checkbox-1\" checked>\r\n <label for=\"checkbox-1\">One</label>\r\n </fieldset>\r\n <fieldset class=\"form_fieldset\">\r\n <label for=\"checkbox-2\">\r\n <input type=\"checkbox\" value=\"2\" id=\"checkbox-2\" name=\"checkbox-2\"> Two\r\n </label>\r\n </fieldset>\r\n <fieldset class=\"form_fieldset\">\r\n <input type=\"checkbox\" value=\"3\" id=\"checkbox-3\" name=\"checkbox-3\" disabled>\r\n <label for=\"checkbox-3\">Three</label>\r\n </fieldset>\r\n <fieldset class=\"form_fieldset\">\r\n <label>\r\n <span>\r\n <input type=\"checkbox\" value=\"4\" id=\"checkbox-4\" name=\"checkbox-4\"> Four\r\n </span>\r\n </label>\r\n </fieldset>\r\n </form>\r\n </div>\r\n <div class=\"fs-cell fs-sm-half fs-md-half fs-lg-third\">\r\n <form action=\"#\" method=\"GET\" class=\"form demo_form\">\r\n <fieldset class=\"form_fieldset\">\r\n <input type=\"radio\" value=\"1\" id=\"radio-1\" name=\"radio-group\" checked>\r\n <label for=\"radio-1\">One</label>\r\n </fieldset>\r\n <fieldset class=\"form_fieldset\">\r\n <label for=\"radio-2\">\r\n <input type=\"radio\" value=\"2\" id=\"radio-2\" name=\"radio-group\"> Two\r\n </label>\r\n </fieldset>\r\n <fieldset class=\"form_fieldset\">\r\n <input type=\"radio\" value=\"3\" id=\"radio-3\" name=\"radio-group\" disabled>\r\n <label for=\"radio-3\">Three</label>\r\n </fieldset>\r\n <fieldset class=\"form_fieldset\">\r\n <label>\r\n <span>\r\n <input type=\"radio\" value=\"4\" id=\"radio-4\" name=\"radio-group\"> Four!\r\n </span>\r\n </label>\r\n </fieldset>\r\n </form>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"demo_code\">\r\n <pre><code class=\"language-html\"><input type="checkbox" value="1" id="checkbox" name="checkbox">\r\n<label for="checkbox">Checkbox</label>\r\n\r\n<input type="radio" value="1" id="radio" name="radio">\r\n<label for="radio">Radio</label></code></pre>\r\n <pre><code class=\"language-javascript\">$(\"input[type='checkbox'], input[type='radio']\").checkbox();</code></pre>\r\n </div>\r\n</div>\r\n\r\n<!-- END: FIRSTDEMO -->\r\n\r\n<h4>Toggle</h4>\r\n<div class=\"demo_container\">\r\n <div class=\"demo_example\">\r\n <div class=\"fs-row\">\r\n <div class=\"fs-cell fs-sm-half fs-md-half fs-lg-third\">\r\n <form action=\"#\" method=\"GET\" class=\"form demo_form\">\r\n <fieldset class=\"form_fieldset\">\r\n <input type=\"checkbox\" value=\"One\" id=\"toggle-1\" name=\"toggle-1\" checked data-checkbox-options='{\"toggle\":true}'>\r\n <label for=\"toggle-1\">One</label>\r\n </fieldset>\r\n </form>\r\n </div>\r\n <div class=\"fs-cell fs-sm-half fs-md-half fs-lg-third\">\r\n <form action=\"#\" method=\"GET\" class=\"form demo_form\">\r\n <fieldset class=\"form_fieldset\">\r\n <input type=\"checkbox\" value=\"Two\" id=\"toggle-2\" name=\"toggle-2\" disabled data-checkbox-options='{\"toggle\":true}'>\r\n <label for=\"toggle-2\">Two</label>\r\n </fieldset>\r\n </form>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"demo_code\">\r\n <pre><code class=\"language-html\"><input type="checkbox" value="1" id="checkbox" name="checkbox">\r\n<label for="checkbox">Checkbox</label></code></pre>\r\n <pre><code class=\"language-javascript\">$(\"input[type='checkbox']\").checkbox({\r\n toggle: 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=\"fs-row\">\r\n <div class=\"fs-cell fs-sm-half fs-md-half fs-lg-third\">\r\n <form action=\"#\" method=\"GET\" class=\"form demo_form\">\r\n <fieldset class=\"form_fieldset\">\r\n <input type=\"checkbox\" value=\"1\" id=\"checkbox-plain-1\" name=\"checkbox-plain-1\" checked data-checkbox-options='{\"theme\":\"\"}'>\r\n <label for=\"checkbox-plain-1\">One</label>\r\n </fieldset>\r\n <fieldset class=\"form_fieldset\">\r\n <label for=\"checkbox-plain-2\">\r\n <input type=\"checkbox\" value=\"2\" id=\"checkbox-plain-2\" name=\"checkbox-plain-2\" data-checkbox-options='{\"theme\":\"\"}'> Two\r\n </label>\r\n </fieldset>\r\n <fieldset class=\"form_fieldset\">\r\n <input type=\"checkbox\" value=\"3\" id=\"checkbox-plain-3\" name=\"checkbox-plain-3\" disabled data-checkbox-options='{\"theme\":\"\"}'>\r\n <label for=\"checkbox-plain-3\">Three</label>\r\n </fieldset>\r\n <fieldset class=\"form_fieldset\">\r\n <label>\r\n <span>\r\n <input type=\"checkbox\" value=\"4\" id=\"checkbox-plain-4\" name=\"checkbox-plain-4\" data-checkbox-options='{\"theme\":\"\"}'> Four\r\n </span>\r\n </label>\r\n </fieldset>\r\n </form>\r\n </div>\r\n <div class=\"fs-cell fs-sm-half fs-md-half fs-lg-third\">\r\n <form action=\"#\" method=\"GET\" class=\"form demo_form\">\r\n <fieldset class=\"form_fieldset\">\r\n <input type=\"radio\" value=\"1\" id=\"radio-plain-1\" name=\"radio-plain-group\" checked data-checkbox-options='{\"theme\":\"\"}'>\r\n <label for=\"radio-plain-1\">One</label>\r\n </fieldset>\r\n <fieldset class=\"form_fieldset\">\r\n <label for=\"radio-plain-2\">\r\n <input type=\"radio\" value=\"2\" id=\"radio-plain-2\" name=\"radio-plain-group\" data-checkbox-options='{\"theme\":\"\"}'> Two\r\n </label>\r\n </fieldset>\r\n <fieldset class=\"form_fieldset\">\r\n <input type=\"radio\" value=\"3\" id=\"radio-plain-3\" name=\"radio-plain-group\" disabled data-checkbox-options='{\"theme\":\"\"}'>\r\n <label for=\"radio-plain-3\">Three</label>\r\n </fieldset>\r\n <fieldset class=\"form_fieldset\">\r\n <label>\r\n <span>\r\n <input type=\"radio\" value=\"4\" id=\"radio-plain-4\" name=\"radio-plain-group\" data-checkbox-options='{\"theme\":\"\"}'> Four!\r\n </span>\r\n </label>\r\n </fieldset>\r\n </form>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"demo_code\">\r\n <pre><code class=\"language-html\"><input type="checkbox" value="1" id="checkbox" name="checkbox">\r\n<label for="checkbox">Checkbox</label>\r\n\r\n<input type="radio" value="1" id="radio" name="radio">\r\n<label for="radio">Radio</label></code></pre>\r\n <pre><code class=\"language-javascript\">$(\"input[type='checkbox'], input[type='radio']\").checkbox({\r\n theme: \"\"\r\n});</code></pre>\r\n </div>\r\n</div>\r\n","document":"# Checkbox\n\nA jQuery plugin for replacing checkboxes.\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 Checkbox\n\n\n#### Main\n\n```markup\ncheckbox.js\ncheckbox.css\n```\n\n\n#### Dependencies\n\n```markup\njQuery\ncore.js\n```\n\n### Basic\n\nCheckbox will automatically detect the input's type and render proper styles.\n\n```javascript\n$(\"input[type=checkbox], input[type=radio]\").checkbox();\n```\n\n```markup\n<fieldset>\n <label for=\"check_1\">Checkbox</label>\n <input type=\"checkbox\" name=\"check_1\" id=\"check_1\" value=\"on\">\n</fieldset>\n<fieldset>\n <label for=\"radio_1\">Radio</label>\n <input type=\"radio\" name=\"radio_1\" id=\"radio_1\" value=\"on\">\n</fieldset>\n```\n\n### Toggle\n\nCheckbox can also render a 'toggle' style checkbox.\n\n```javascript\n$(\"input[type=checkbox]\").checkbox({\n toggle: 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-checkbox-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| `toggle` | `boolean` | `false` | Render 'toggle' styles |\n| `labels.on` | `string` | `'ON'` | Label for 'On' position; 'toggle' only |\n| `labels.off` | `string` | `'OFF'` | Label for 'Off' position; 'toggle' only |\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### disable\n\nDisables target instance\n\n```javascript\n$(\".target\").checkbox(\"disable\");\n```\n\n### enable\n\nEnables target instance\n\n```javascript\n$(\".target\").checkbox(\"enable\");\n```\n\n### update\n\nUpdates target instance\n\n```javascript\n$(\".target\").checkbox(\"update\");\n```\n\n<hr>\n<a name=\"css\"></a>\n\n## CSS\n\n| Class | Type | Description |\n| --- | --- | --- |\n| `.fs-checkbox-element` | `element` | Target elmement |\n| `.fs-checkbox` | `element` | Base widget class |\n| `.fs-checkbox.fs-checkbox-checked` | `modifier` | Indicates checked state |\n| `.fs-checkbox.fs-checkbox-radio` | `modifier` | Indicates radio interface |\n| `.fs-checkbox.fs-checkbox-toggle` | `modifier` | Indicates toggle interface |\n| `.fs-checkbox.fs-checkbox-focus` | `modifier` | Indicates focused state |\n| `.fs-checkbox.fs-checkbox-disabled` | `modifier` | Indicates disabled state |\n| `.fs-checkbox-label` | `element` | Label element |\n| `.fs-checkbox-marker` | `element` | Marker element |\n| `.fs-checkbox-flag` | `element` | Flag element |\n\n"}