formstone
Version:
Library of modular front end components.
1 lines • 30.6 kB
JSON
{"main":["dropdown.js","dropdown.css"],"options":[{"name":"bottomEdge","type":"int","default":"0"},{"name":"cover","type":"boolean","default":"false","description":"Cover handle with option set"},{"name":"customClass","type":"string","default":"''","description":"Class applied to instance"},{"name":"label","type":"string","default":"''","description":"Label displayed before selection"},{"name":"external","type":"boolean","default":"false","description":"Open options as links in new window"},{"name":"links","type":"boolean","default":"false","description":"Open options as links in same window"},{"name":"native","type":"boolean","default":"false","description":"Use native browser options"},{"name":"theme","type":"string","default":"\"fs-light\"","description":"Theme class name"},{"name":"trim","type":"int","default":"0"},{"name":"selectMultiple","type":"boolean","default":"false"}],"events":[],"methods":[{"name":"close","description":"Closes target instance.","examples":["$(\".target\").dropdown(\"close\");"]},{"name":"defaults","description":"Extends plugin default settings; effects instances created hereafter.","params":[{"name":"options","type":"object","default":"{}","description":"New plugin defaults"}],"examples":["$.dropdown(\"defaults\", { ... });"]},{"name":"destroy","description":"Removes plugin instance.","examples":["$(\".target\").dropdown(\"destroy\");"]},{"name":"disable","description":"Disables target instance or option.","params":[{"name":"option","type":"string","default":"null","description":"Target option value"}],"examples":["$(\".target\").dropdown(\"disable\", \"1\");"]},{"name":"enable","description":"Enables target instance or option.","params":[{"name":"option","type":"string","default":"null","description":"Target option value"}],"examples":["$(\".target\").dropdown(\"enable\", \"1\");"]},{"name":"open","description":"Opens target instance.","examples":["$(\".target\").dropdown(\"open\");"]},{"name":"update","description":"Updates instance.","examples":["$(\".target\").dropdown(\"update\");"]}],"name":"Dropdown","type":"widget","description":"A jQuery plugin for custom select elements.","dependencies":["jQuery","core.js","scrollbar.js (optional)","touch.js (optional, for scrollbar)"],"css":[{"name":".fs-dropdown-element","type":"element","description":"Target element"},{"name":".fs-dropdown","type":"element","description":"Base widget class"},{"name":".fs-dropdown.fs-dropdown-multiple","type":"modifer","description":"Indicates multi-selected element"},{"name":".fs-dropdown.fs-dropdown-cover","type":"modifer","description":"Indicates cover positioning"},{"name":".fs-dropdown.fs-dropdown-bottom","type":"modifer","description":"Indicates bottom positioning"},{"name":".fs-dropdown.fs-dropdown-disabled","type":"modifer","description":"Indicates disabled state"},{"name":".fs-dropdown.fs-dropdown-open","type":"modifer","description":"Indicates open state"},{"name":".fs-dropdown.fs-dropdown-focus","type":"modifer","description":"Indicates focus state"},{"name":".fs-dropdown.fs-dropdown-native","type":"modifer","description":"Indicates native options"},{"name":".fs-dropdown-selected","type":"element","description":"Handle item"},{"name":".fs-dropdown-options","type":"element","description":"Options container"},{"name":".fs-dropdown-group","type":"element","description":"Option group label"},{"name":".fs-dropdown-item","type":"element","description":"Option item"},{"name":".fs-dropdown-item.fs-dropdown-item_placeholder","type":"modifier","description":"Indicates placeholder item"},{"name":".fs-dropdown-item.fs-dropdown-item_selected","type":"modifier","description":"Indicates selected item"},{"name":".fs-dropdown-item.fs-dropdown-item_disabled","type":"modifier","description":"Indicates disabled item"}],"use":"### Basic\n\nTo customize a select element, simply apply the plugin to the target element:\n\n```javascript\n$(\"select\").dropdown();\n```\n\n```markup\n<select>\n <option value=\"1\">One</option>\n <option value=\"2\">Two</option>\n <option value=\"3\">Three</option>\n</select>\n```\n\n### Events\n\nReact to changes to the element's value by listening for the standard `change` event:\n\n```javascript\n$(\"select\").on(\"change\", function() {\n var value = $(this).val();\n});\n```\n\nUpdated the element's value externally by triggering the standard `change` event:\n\n```javascript\n$(\"select\").val(1).trigger(\"change\");\n```\n\nNote: If the select is too close to the bottom edge of the `body` tag, the dropdown options will \"flip\" and display above the handle.","demo":"<h4>Basic</h4>\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 <label for=\"demo_basic\" class=\"form_label\">Label</label>\r\n <select name=\"demo_basic\" id=\"demo_basic\" class=\"js-dropdown\">\r\n <!-- <option data-label=\"Option One\">One</option>\r\n <option data-label=\"Option Two\">Two</option> -->\r\n <option value=\"1\">One</option>\r\n <option value=\"2\">Two</option>\r\n </select>\r\n </fieldset>\r\n </form>\r\n </div>\r\n <div class=\"demo_code\">\r\n <pre><code class=\"language-html\"><select name="dropdown" class="dropdown">\r\n	<option value="1">One</option>\r\n	<option value="2">Two</option>\r\n</select></code></pre>\r\n <pre><code class=\"language-javascript\">$(\".dropdown\").dropdown();</code></pre>\r\n </div>\r\n</div>\n\r\n<style>\r\n .custom_select { max-width: 500px; }\r\n .custom_select .fs-dropdown-selected { border-width: 2px; }\r\n .custom_select .fs-dropdown-options { border-width: 0 2px 2px; padding: 1%; }\r\n .custom_select .fs-dropdown-item { border-radius: 3px !important; border: none; margin: 0 0 1%; }\r\n .custom_select .fs-dropdown-item:last-child { margin: 0; }\r\n</style>\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 <label for=\"demo_disabled\" class=\"form_label\">Label</label>\r\n <select name=\"demo_disabled\" id=\"demo_disabled\" class=\"js-dropdown\" disabled>\r\n <!-- <option data-label=\"Option One\">One</option>\r\n <option data-label=\"Option Two\">Two</option> -->\r\n <option value=\"1\">One</option>\r\n <option value=\"2\">Two</option>\r\n </select>\r\n </fieldset>\r\n </form>\r\n </div>\r\n <div class=\"demo_code\">\r\n <pre><code class=\"language-html\"><select name="dropdown" class="dropdown" disabled>\r\n	<option value="1">One</option>\r\n	<option value="2">Two</option>\r\n</select></code></pre>\r\n <pre><code class=\"language-javascript\">$(\".dropdown\").dropdown();</code></pre>\r\n </div>\r\n</div>\r\n\r\n<h4>Option Groups</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 <label for=\"demo_groups\" class=\"form_label\">Label</label>\r\n <select name=\"demo_groups\" id=\"demo_groups\" class=\"js-dropdown\">\r\n <optgroup label=\"Group One\">\r\n <option value=\"1\">One</option>\r\n <option value=\"2\">Two</option>\r\n <option value=\"3\">Three</option>\r\n </optgroup>\r\n <optgroup label=\"Group One\">\r\n <option value=\"4\">Four</option>\r\n <option value=\"5\">Five</option>\r\n <option value=\"6\">Six</option>\r\n <option value=\"7\">Seven</option>\r\n </optgroup>\r\n <optgroup label=\"Group Three\">\r\n <option value=\"8\">Eight</option>\r\n <option value=\"9\">Nine</option>\r\n <option value=\"10\">Ten</option>\r\n </optgroup>\r\n </select>\r\n </fieldset>\r\n </form>\r\n </div>\r\n <div class=\"demo_code\">\r\n <pre><code class=\"language-html\"><select name="dropdown" class="dropdown">\r\n	<optgroup label="Group One">\r\n		<option value="1">One</option>\r\n		<option value="2">Two</option>\r\n	</optgroup>\r\n	<optgroup label="Group Two">\r\n		<option value="3">Three</option>\r\n		<option value="4">Fout</option>\r\n	</optgroup>\r\n</select></code></pre>\r\n <pre><code class=\"language-javascript\">$(\".dropdown\").dropdown();</code></pre>\r\n </div>\r\n</div>\r\n\r\n<h4>Multiple</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 <label for=\"demo_multiple\" class=\"form_label\">Label</label>\r\n <select name=\"demo_multiple\" id=\"demo_multiple\" class=\"js-dropdown\" multiple>\r\n <option value=\"1\">One</option>\r\n <option value=\"2\">Two</option>\r\n <option value=\"3\" disabled>Three</option>\r\n <option value=\"4\">Four</option>\r\n <option value=\"5\">Five</option>\r\n <option value=\"6\">Six</option>\r\n <option value=\"7\">Seven</option>\r\n <option value=\"8\">Eight</option>\r\n <option value=\"9\">Nine</option>\r\n <option value=\"10\">Ten</option>\r\n </select>\r\n </fieldset>\r\n </form>\r\n </div>\r\n <div class=\"demo_code\">\r\n <pre><code class=\"language-html\"><select name="dropdown" class="dropdown" multiple>\r\n	<option value="1">One</option>\r\n	<option value="2">Two</option>\r\n</select></code></pre>\r\n <pre><code class=\"language-javascript\">$(\".dropdown\").dropdown();</code></pre>\r\n </div>\r\n</div>\r\n\r\n<h4>Cover</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 <label for=\"demo_cover\" class=\"form_label\">Label</label>\r\n <select name=\"demo_cover\" id=\"demo_cover\" class=\"js-dropdown\" data-dropdown-options='{\"cover\":true}'>\r\n <option value=\"1\">One</option>\r\n <option value=\"2\">Two</option>\r\n <option value=\"3\">Three</option>\r\n <option value=\"4\">Four</option>\r\n <option value=\"5\">Five</option>\r\n </select>\r\n </fieldset>\r\n </form>\r\n </div>\r\n <div class=\"demo_code\">\r\n <pre><code class=\"language-html\"><select name="dropdown" class="dropdown">\r\n	<option value="1">One</option>\r\n	<option value="2">Two</option>\r\n</select></code></pre>\r\n <pre><code class=\"language-javascript\">$(\".dropdown\").dropdown({\r\n cover: true\r\n});</code></pre>\r\n </div>\r\n</div>\n\n<h4>Native</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 <label for=\"demo_native\" class=\"form_label\">Label</label>\n <select name=\"demo_native\" id=\"demo_native\" class=\"js-dropdown\" data-dropdown-options='{\"native\":true}'>\n <option value=\"1\">One</option>\n <option value=\"2\">Two</option>\n <option value=\"3\">Three</option>\n <option value=\"4\">Four</option>\n <option value=\"5\">Five</option>\n </select>\n </fieldset>\n </form>\n </div>\n <div class=\"demo_code\">\n <pre><code class=\"language-html\"><select name="dropdown" class="dropdown">\n	<option value="1">One</option>\n	<option value="2">Two</option>\n</select></code></pre>\n <pre><code class=\"language-javascript\">$(\".dropdown\").dropdown({\n native: true\n});</code></pre>\n </div>\n</div>\r\n\r\n<h4>Default Label</h4>\n\n<!-- START: FIRSTDEMO -->\n\n<style>\n .fs-dropdown { max-width: 300px; }\n</style>\n\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 <label for=\"demo_label\" class=\"form_label\">Label</label>\r\n <select name=\"demo_label\" id=\"demo_label\" class=\"js-dropdown\" data-dropdown-options='{\"label\":\"Select A State\"}'>\r\n <option value=\"AL\">Alabama</option>\r\n <option value=\"AK\">Alaska</option>\r\n <option value=\"AZ\">Arizona</option>\r\n <option value=\"AR\">Arkansas</option>\r\n <option value=\"CA\">California</option>\r\n <option value=\"CO\">Colorado</option>\r\n <option value=\"CT\">Connecticut</option>\r\n <option value=\"DE\">Delaware</option>\r\n <option value=\"DC\">District Of Columbia</option>\r\n <option value=\"FL\">Florida</option>\r\n <option value=\"GA\">Georgia</option>\r\n <option value=\"HI\">Hawaii</option>\r\n <option value=\"ID\">Idaho</option>\r\n <option value=\"IL\">Illinois</option>\r\n <option value=\"IN\">Indiana</option>\r\n <option value=\"IA\">Iowa</option>\r\n <option value=\"KS\">Kansas</option>\r\n <option value=\"KY\">Kentucky</option>\r\n <option value=\"LA\">Louisiana</option>\r\n <option value=\"ME\">Maine</option>\r\n <option value=\"MD\">Maryland</option>\r\n <option value=\"MA\">Massachusetts</option>\r\n <option value=\"MI\">Michigan</option>\r\n <option value=\"MN\">Minnesota</option>\r\n <option value=\"MS\">Mississippi</option>\r\n <option value=\"MO\">Missouri</option>\r\n <option value=\"MT\">Montana</option>\r\n <option value=\"NE\">Nebraska</option>\r\n <option value=\"NV\">Nevada</option>\r\n <option value=\"NH\">New Hampshire</option>\r\n <option value=\"NJ\">New Jersey</option>\r\n <option value=\"NM\">New Mexico</option>\r\n <option value=\"NY\">New York</option>\r\n <option value=\"NC\">North Carolina</option>\r\n <option value=\"ND\">North Dakota</option>\r\n <option value=\"OH\">Ohio</option>\r\n <option value=\"OK\">Oklahoma</option>\r\n <option value=\"OR\">Oregon</option>\r\n <option value=\"PA\">Pennsylvania</option>\r\n <option value=\"RI\">Rhode Island</option>\r\n <option value=\"SC\">South Carolina</option>\r\n <option value=\"SD\">South Dakota</option>\r\n <option value=\"TN\">Tennessee</option>\r\n <option value=\"TX\"> Texas</option>\r\n <option value=\"UT\">Utah</option>\r\n <option value=\"VT\">Vermont</option>\r\n <option value=\"VA\">Virginia</option>\r\n <option value=\"WA\">Washington</option>\r\n <option value=\"WV\">West Virginia</option>\r\n <option value=\"WI\">Wisconsin</option>\r\n <option value=\"WY\">Wyoming</option>\r\n </select>\r\n </fieldset>\r\n </form>\r\n </div>\r\n <div class=\"demo_code\">\r\n <pre><code class=\"language-html\"><select name="dropdown" class="dropdown">\r\n	<option value="1">One</option>\r\n	<option value="2">Two</option>\r\n</select></code></pre>\r\n <pre><code class=\"language-javascript\">$(\".dropdown\").dropdown({\r\n label: \"Select an Item\"\r\n});</code></pre>\r\n </div>\r\n</div>\n\n<!-- END: FIRSTDEMO -->\n\r\n<h4>Custom Labels</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 <label for=\"demo_custom_1\" class=\"form_label\">Label</label>\r\n <select name=\"demo_custom_1\" id=\"demo_custom_1\" class=\"js-dropdown\" data-dropdown-options='{\"customClass\":\"custom\"}'>\r\n <option value=\"1\" data-label=\"Option One\">One</option>\r\n <option value=\"2\" data-label=\"Option Two\">Two</option>\r\n <option value=\"3\" data-label=\"Option Three\">Three</option>\r\n <option value=\"4\" data-label=\"Option Four\">Four</option>\r\n <option value=\"5\" data-label=\"Option Five\">Five</option>\r\n </select>\r\n </fieldset>\r\n </form>\r\n </div>\r\n <div class=\"demo_code\">\r\n <pre><code class=\"language-html\"><select name="dropdown" class="dropdown">\r\n	<option value="1" data-label="Option One">One</option>\r\n	<option value="2" data-label="Option Two">Two</option>\r\n</select></code></pre>\r\n <pre><code class=\"language-javascript\">$(\".dropdown\").dropdown();</code></pre>\r\n </div>\r\n</div>\r\n\r\n<h4>Custom HTML Labels</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 <label for=\"demo_custom_2\" class=\"form_label\">Label</label>\r\n <select name=\"demo_custom_2\" id=\"demo_custom_2\" class=\"js-dropdown\" data-dropdown-options='{\"customClass\":\"custom\"}'>\r\n <option value=\"1\" data-label=\"<em>One </em>\">One</option>\r\n <option value=\"2\" data-label=\"<em>Two </em>\">Two</option>\r\n <option value=\"3\" data-label=\"<em>Three</em>\">Three</option>\r\n <option value=\"4\" data-label=\"<em>Four </em>\">Four</option>\r\n <option value=\"5\" data-label=\"<em>Five </em>\">Five</option>\r\n </select>\r\n </fieldset>\r\n </form>\r\n </div>\r\n <div class=\"demo_code\">\r\n <pre><code class=\"language-html\"><select name="dropdown" class="dropdown">\r\n	<option value="1" data-label=" &lt;em&gt;Option One &lt;/em&gt; ">One</option>\r\n	<option value="2" data-label=" &lt;em&gt;Option Two &lt;/em&gt; ">Two</option>\r\n</select></code></pre>\r\n <pre><code class=\"language-javascript\">$(\".dropdown\").dropdown();</code></pre>\r\n </div>\r\n</div>\r\n\r\n<h4>Links</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 <label for=\"demo_links\" class=\"form_label\">Label</label>\r\n <select name=\"demo_links\" id=\"demo_links\" class=\"js-dropdown\" data-dropdown-options='{\"label\":\"Jump Sites\",\"links\":true}'>\r\n <option value=\"http://google.com\">Google Search</option>\r\n <option value=\"http://boingboing.com\">Boing Boing</option>\r\n <option value=\"http://cnn.com\">CNN News</option>\r\n </select>\r\n </fieldset>\r\n </form>\r\n </div>\r\n <div class=\"demo_code\">\r\n <pre><code class=\"language-html\"><select name="dropdown" class="dropdown">\r\n	<option value="http://example.com">Link One</option>\r\n	<option value="http://example.com">Link Two</option>\r\n</select></code></pre>\r\n <pre><code class=\"language-javascript\">$(\".dropdown\").dropdown({\r\n links: true\r\n});</code></pre>\r\n </div>\r\n</div>\r\n\r\n<h4>External Links</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 <label for=\"demo_external\" class=\"form_label\">Label</label>\r\n <select name=\"demo_external\" id=\"demo_external\" class=\"js-dropdown\" data-dropdown-options='{\"label\":\"Jump Sites\",\"external\":true}'>\r\n <option value=\"http://google.com\">Google Search</option>\r\n <option value=\"http://boingboing.com\">Boing Boing</option>\r\n <option value=\"http://cnn.com\">CNN News</option>\r\n </select>\r\n </fieldset>\r\n </form>\r\n </div>\r\n <div class=\"demo_code\">\r\n <pre><code class=\"language-html\"><select name="dropdown" class="dropdown">\r\n 	<option value="http://example.com">Link One</option>\r\n 	<option value="http://example.com">Link Two</option>\r\n</select></code></pre>\r\n <pre><code class=\"language-javascript\">$(\".dropdown\").dropdown({\r\n external: 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 <form action=\"#\" method=\"GET\" class=\"form demo_form\">\r\n <fieldset class=\"form_fieldset\">\r\n <label for=\"demo_basic_2\" class=\"form_label\">Label</label>\r\n <select name=\"demo_basic_2\" id=\"demo_basic_2\" class=\"js-dropdown\" data-dropdown-options='{\"theme\":\"\"}'>\r\n <option value=\"AL\">Alabama</option>\r\n <option value=\"AK\">Alaska</option>\r\n <option value=\"AZ\">Arizona</option>\r\n <option value=\"AR\">Arkansas</option>\r\n <option value=\"CA\">California</option>\r\n <option value=\"CO\">Colorado</option>\r\n <option value=\"CT\">Connecticut</option>\r\n <option value=\"DE\">Delaware</option>\r\n <option value=\"DC\">District Of Columbia</option>\r\n <option value=\"FL\">Florida</option>\r\n <option value=\"GA\">Georgia</option>\r\n <option value=\"HI\">Hawaii</option>\r\n <option value=\"ID\">Idaho</option>\r\n <option value=\"IL\">Illinois</option>\r\n <option value=\"IN\">Indiana</option>\r\n <option value=\"IA\">Iowa</option>\r\n <option value=\"KS\">Kansas</option>\r\n <option value=\"KY\">Kentucky</option>\r\n <option value=\"LA\">Louisiana</option>\r\n <option value=\"ME\">Maine</option>\r\n <option value=\"MD\">Maryland</option>\r\n <option value=\"MA\">Massachusetts</option>\r\n <option value=\"MI\">Michigan</option>\r\n <option value=\"MN\">Minnesota</option>\r\n <option value=\"MS\">Mississippi</option>\r\n <option value=\"MO\">Missouri</option>\r\n <option value=\"MT\">Montana</option>\r\n <option value=\"NE\">Nebraska</option>\r\n <option value=\"NV\">Nevada</option>\r\n <option value=\"NH\">New Hampshire</option>\r\n <option value=\"NJ\">New Jersey</option>\r\n <option value=\"NM\">New Mexico</option>\r\n <option value=\"NY\">New York</option>\r\n <option value=\"NC\">North Carolina</option>\r\n <option value=\"ND\">North Dakota</option>\r\n <option value=\"OH\">Ohio</option>\r\n <option value=\"OK\">Oklahoma</option>\r\n <option value=\"OR\">Oregon</option>\r\n <option value=\"PA\">Pennsylvania</option>\r\n <option value=\"RI\">Rhode Island</option>\r\n <option value=\"SC\">South Carolina</option>\r\n <option value=\"SD\">South Dakota</option>\r\n <option value=\"TN\">Tennessee</option>\r\n <option value=\"TX\"> Texas</option>\r\n <option value=\"UT\">Utah</option>\r\n <option value=\"VT\">Vermont</option>\r\n <option value=\"VA\">Virginia</option>\r\n <option value=\"WA\">Washington</option>\r\n <option value=\"WV\">West Virginia</option>\r\n <option value=\"WI\">Wisconsin</option>\r\n <option value=\"WY\">Wyoming</option>\r\n </select>\r\n </fieldset>\r\n </form>\r\n </div>\r\n <div class=\"demo_code\">\r\n <pre><code class=\"language-html\"><select name="dropdown" class="dropdown">\r\n	<option value="1">One</option>\r\n	<option value="2">Two</option>\r\n</select></code></pre>\r\n <pre><code class=\"language-javascript\">$(\".dropdown\").dropdown({\r\n theme: \"\"\r\n});</code></pre>\r\n </div>\r\n</div>\r\n\r\n\r\n<!--\r\n <div class=\"fs-cell fs-sm-full fs-md-half fs-lg-half\">\r\n <h4>Detached Options</h4>\r\n <fieldset class=\"form_fieldset\">\r\n <label for=\"demo_detached\" class=\"form_label\">Label</label>\r\n <select name=\"demo_detached\" id=\"demo_detached\" class=\"js-dropdown\" data-dropdown-options='{\"detached\":true}'>\r\n <option value=\"1\">One</option>\r\n <option value=\"2\">Two</option>\r\n <option value=\"3\">Three</option>\r\n <option value=\"4\">Four</option>\r\n <option value=\"5\">Five</option>\r\n </select>\r\n </fieldset>\r\n </div>\r\n-->\n","document":"# Dropdown\n\nA jQuery plugin for custom select elements.\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 Dropdown\n\n\n#### Main\n\n```markup\ndropdown.js\ndropdown.css\n```\n\n\n#### Dependencies\n\n```markup\njQuery\ncore.js\nscrollbar.js (optional)\ntouch.js (optional, for scrollbar)\n```\n\n### Basic\n\nTo customize a select element, simply apply the plugin to the target element:\n\n```javascript\n$(\"select\").dropdown();\n```\n\n```markup\n<select>\n <option value=\"1\">One</option>\n <option value=\"2\">Two</option>\n <option value=\"3\">Three</option>\n</select>\n```\n\n### Events\n\nReact to changes to the element's value by listening for the standard `change` event:\n\n```javascript\n$(\"select\").on(\"change\", function() {\n var value = $(this).val();\n});\n```\n\nUpdated the element's value externally by triggering the standard `change` event:\n\n```javascript\n$(\"select\").val(1).trigger(\"change\");\n```\n\nNote: If the select is too close to the bottom edge of the `body` tag, the dropdown options will \"flip\" and display above the handle.\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-dropdown-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| `bottomEdge` | `int` | `0` | |\n| `cover` | `boolean` | `false` | Cover handle with option set |\n| `customClass` | `string` | `''` | Class applied to instance |\n| `label` | `string` | `''` | Label displayed before selection |\n| `external` | `boolean` | `false` | Open options as links in new window |\n| `links` | `boolean` | `false` | Open options as links in same window |\n| `native` | `boolean` | `false` | Use native browser options |\n| `theme` | `string` | `\"fs-light\"` | Theme class name |\n| `trim` | `int` | `0` | |\n| `selectMultiple` | `boolean` | `false` | |\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### close\n\nCloses target instance.\n\n```javascript\n$(\".target\").dropdown(\"close\");\n```\n\n### defaults\n\nExtends plugin default settings; effects instances created hereafter.\n\n```javascript\n$.dropdown(\"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\").dropdown(\"destroy\");\n```\n\n### disable\n\nDisables target instance or option.\n\n```javascript\n$(\".target\").dropdown(\"disable\", \"1\");\n```\n\n#### Parameters\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| `option` | `string` | `null` | Target option value |\n\n### enable\n\nEnables target instance or option.\n\n```javascript\n$(\".target\").dropdown(\"enable\", \"1\");\n```\n\n#### Parameters\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| `option` | `string` | `null` | Target option value |\n\n### open\n\nOpens target instance.\n\n```javascript\n$(\".target\").dropdown(\"open\");\n```\n\n### update\n\nUpdates instance.\n\n```javascript\n$(\".target\").dropdown(\"update\");\n```\n\n<hr>\n<a name=\"css\"></a>\n\n## CSS\n\n| Class | Type | Description |\n| --- | --- | --- |\n| `.fs-dropdown-element` | `element` | Target element |\n| `.fs-dropdown` | `element` | Base widget class |\n| `.fs-dropdown.fs-dropdown-multiple` | `modifer` | Indicates multi-selected element |\n| `.fs-dropdown.fs-dropdown-cover` | `modifer` | Indicates cover positioning |\n| `.fs-dropdown.fs-dropdown-bottom` | `modifer` | Indicates bottom positioning |\n| `.fs-dropdown.fs-dropdown-disabled` | `modifer` | Indicates disabled state |\n| `.fs-dropdown.fs-dropdown-open` | `modifer` | Indicates open state |\n| `.fs-dropdown.fs-dropdown-focus` | `modifer` | Indicates focus state |\n| `.fs-dropdown.fs-dropdown-native` | `modifer` | Indicates native options |\n| `.fs-dropdown-selected` | `element` | Handle item |\n| `.fs-dropdown-options` | `element` | Options container |\n| `.fs-dropdown-group` | `element` | Option group label |\n| `.fs-dropdown-item` | `element` | Option item |\n| `.fs-dropdown-item.fs-dropdown-item_placeholder` | `modifier` | Indicates placeholder item |\n| `.fs-dropdown-item.fs-dropdown-item_selected` | `modifier` | Indicates selected item |\n| `.fs-dropdown-item.fs-dropdown-item_disabled` | `modifier` | Indicates disabled item |\n\n"}