{"main":["dropdown.js","dropdown.css"],"options":[{"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":"mobile","type":"boolean","default":"false","description":"Force desktop interaction on mobile"},{"name":"trim","type":"int","default":"0"}],"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":["core.js","touch.js"],"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-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\t<option value=\"1\">One</option>\n\t<option value=\"2\">Two</option>\n\t<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\tvar 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```","demo":"<style>\r\n\t.custom_select { max-width: 500px; }\r\n\t.custom_select .fs-dropdown-selected { border-width: 2px; }\r\n\t.custom_select .fs-dropdown-options { border-width: 0 2px 2px; padding: 1%; }\r\n\t.custom_select .fs-dropdown-item { border-radius: 3px !important; border: none; margin: 0 0 1%; }\r\n\t.custom_select .fs-dropdown-item:last-child { margin: 0; }\r\n</style>\r\n\r\n<script>\r\n\t$(function() {\r\n\t\t// All\r\n\t\t$(\".demo_form select\").dropdown();\r\n\r\n\t\t$(\".demo_form\").on(\"click\", \".toggle\", toggleEnabled);\r\n\t});\r\n\r\n\tfunction toggleEnabled(e) {\r\n\t\te.preventDefault();\r\n\t\te.stopPropagation();\r\n\r\n\t\tvar $target = $(this),\r\n\t\t\t$select = $target.parents(\".form_fieldset\").find(\"select\");\r\n\r\n\t\tif ($target.hasClass(\"toggle_item\")) {\r\n\t\t\t// Toggle item\r\n\t\t\tif ($select.find(\"option\").eq(0).is(\":disabled\")) {\r\n\t\t\t\t$select.dropdown(\"enable\", \"1\");\r\n\t\t\t\t$target.text(\"Disable Item '1'\");\r\n\t\t\t} else {\r\n\t\t\t\t$select.dropdown(\"disable\", \"1\");\r\n\t\t\t\t$target.text(\"Enable Item '1'\");\r\n\t\t\t}\r\n\t\t} else {\r\n\t\t\t// Toggle select\r\n\t\t\tif ($select.is(\":disabled\")) {\r\n\t\t\t\t$select.dropdown(\"enable\");\r\n\t\t\t\t$target.text(\"Disable\");\r\n\t\t\t} else {\r\n\t\t\t\t$select.dropdown(\"disable\");\r\n\t\t\t\t$target.text(\"Enable\");\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n</script>\r\n\r\n<form action=\"#\" method=\"GET\" class=\"form demo_form\">\r\n\t<div class=\"fs-row\">\r\n\t\t<div class=\"fs-cell fs-sm-half fs-md-half fs-lg-half\">\r\n\t\t\t<h4>Basic</h4>\r\n\t\t\t<fieldset class=\"form_fieldset\">\r\n\t\t\t\t<label for=\"demo_basic\" class=\"form_label\">Label</label>\r\n\t\t\t\t<select name=\"demo_basic\" id=\"demo_basic\">\r\n\t\t\t\t\t<option data-label=\"Option One\">One</option>\r\n\t\t\t\t\t<option data-label=\"Option Two\">Two</option>\r\n\t\t\t\t</select>\r\n\t\t\t</fieldset>\r\n\t\t\t<h4>Option Groups</h4>\r\n\t\t\t<fieldset class=\"form_fieldset\">\r\n\t\t\t\t<label for=\"demo_groups\" class=\"form_label\">Label</label>\r\n\t\t\t\t<select name=\"demo_groups\" id=\"demo_groups\">\r\n\t\t\t\t\t<optgroup label=\"Group One\">\r\n\t\t\t\t\t\t<option value=\"1\">One</option>\r\n\t\t\t\t\t\t<option value=\"2\">Two</option>\r\n\t\t\t\t\t\t<option value=\"3\">Three</option>\r\n\t\t\t\t\t</optgroup>\r\n\t\t\t\t\t<optgroup label=\"Group One\">\r\n\t\t\t\t\t\t<option value=\"4\">Four</option>\r\n\t\t\t\t\t\t<option value=\"5\">Five</option>\r\n\t\t\t\t\t\t<option value=\"6\">Six</option>\r\n\t\t\t\t\t\t<option value=\"7\">Seven</option>\r\n\t\t\t\t\t</optgroup>\r\n\t\t\t\t\t<optgroup label=\"Group Three\">\r\n\t\t\t\t\t\t<option value=\"8\">Eight</option>\r\n\t\t\t\t\t\t<option value=\"9\">Nine</option>\r\n\t\t\t\t\t\t<option value=\"10\">Ten</option>\r\n\t\t\t\t\t</optgroup>\r\n\t\t\t\t</select>\r\n\t\t\t</fieldset>\r\n\t\t\t<h4>Default Label</h4>\r\n\t\t\t<fieldset class=\"form_fieldset\">\r\n\t\t\t\t<label for=\"demo_label\" class=\"form_label\">Label</label>\r\n\t\t\t\t<select name=\"demo_label\" id=\"demo_label\" data-dropdown-options='{\"label\":\"Select A State\"}'>\r\n\t\t\t\t\t<option value=\"AL\">Alabama</option>\r\n\t\t\t\t\t<option value=\"AK\">Alaska</option>\r\n\t\t\t\t\t<option value=\"AZ\">Arizona</option>\r\n\t\t\t\t\t<option value=\"AR\">Arkansas</option>\r\n\t\t\t\t\t<option value=\"CA\">California</option>\r\n\t\t\t\t\t<option value=\"CO\">Colorado</option>\r\n\t\t\t\t\t<option value=\"CT\">Connecticut</option>\r\n\t\t\t\t\t<option value=\"DE\">Delaware</option>\r\n\t\t\t\t\t<option value=\"DC\">District Of Columbia</option>\r\n\t\t\t\t\t<option value=\"FL\">Florida</option>\r\n\t\t\t\t\t<option value=\"GA\">Georgia</option>\r\n\t\t\t\t\t<option value=\"HI\">Hawaii</option>\r\n\t\t\t\t\t<option value=\"ID\">Idaho</option>\r\n\t\t\t\t\t<option value=\"IL\">Illinois</option>\r\n\t\t\t\t\t<option value=\"IN\">Indiana</option>\r\n\t\t\t\t\t<option value=\"IA\">Iowa</option>\r\n\t\t\t\t\t<option value=\"KS\">Kansas</option>\r\n\t\t\t\t\t<option value=\"KY\">Kentucky</option>\r\n\t\t\t\t\t<option value=\"LA\">Louisiana</option>\r\n\t\t\t\t\t<option value=\"ME\">Maine</option>\r\n\t\t\t\t\t<option value=\"MD\">Maryland</option>\r\n\t\t\t\t\t<option value=\"MA\">Massachusetts</option>\r\n\t\t\t\t\t<option value=\"MI\">Michigan</option>\r\n\t\t\t\t\t<option value=\"MN\">Minnesota</option>\r\n\t\t\t\t\t<option value=\"MS\">Mississippi</option>\r\n\t\t\t\t\t<option value=\"MO\">Missouri</option>\r\n\t\t\t\t\t<option value=\"MT\">Montana</option>\r\n\t\t\t\t\t<option value=\"NE\">Nebraska</option>\r\n\t\t\t\t\t<option value=\"NV\">Nevada</option>\r\n\t\t\t\t\t<option value=\"NH\">New Hampshire</option>\r\n\t\t\t\t\t<option value=\"NJ\">New Jersey</option>\r\n\t\t\t\t\t<option value=\"NM\">New Mexico</option>\r\n\t\t\t\t\t<option value=\"NY\">New York</option>\r\n\t\t\t\t\t<option value=\"NC\">North Carolina</option>\r\n\t\t\t\t\t<option value=\"ND\">North Dakota</option>\r\n\t\t\t\t\t<option value=\"OH\">Ohio</option>\r\n\t\t\t\t\t<option value=\"OK\">Oklahoma</option>\r\n\t\t\t\t\t<option value=\"OR\">Oregon</option>\r\n\t\t\t\t\t<option value=\"PA\">Pennsylvania</option>\r\n\t\t\t\t\t<option value=\"RI\">Rhode Island</option>\r\n\t\t\t\t\t<option value=\"SC\">South Carolina</option>\r\n\t\t\t\t\t<option value=\"SD\">South Dakota</option>\r\n\t\t\t\t\t<option value=\"TN\">Tennessee</option>\r\n\t\t\t\t\t<option value=\"TX\">\tTexas</option>\r\n\t\t\t\t\t<option value=\"UT\">Utah</option>\r\n\t\t\t\t\t<option value=\"VT\">Vermont</option>\r\n\t\t\t\t\t<option value=\"VA\">Virginia</option>\r\n\t\t\t\t\t<option value=\"WA\">Washington</option>\r\n\t\t\t\t\t<option value=\"WV\">West Virginia</option>\r\n\t\t\t\t\t<option value=\"WI\">Wisconsin</option>\r\n\t\t\t\t\t<option value=\"WY\">Wyoming</option>\r\n\t\t\t\t</select>\r\n\t\t\t</fieldset>\r\n\t\t</div>\r\n\t\t<div class=\"fs-cell fs-sm-half fs-md-half fs-lg-half\">\r\n\t\t\t<h4>Multiple</h4>\r\n\t\t\t<fieldset class=\"form_fieldset\">\r\n\t\t\t\t<label for=\"demo_multiple\" class=\"form_label\">Label</label>\r\n\t\t\t\t<select name=\"demo_multiple\" id=\"demo_multiple\" multiple>\r\n\t\t\t\t\t<option value=\"1\">One</option>\r\n\t\t\t\t\t<option value=\"2\">Two</option>\r\n\t\t\t\t\t<option value=\"3\">Three</option>\r\n\t\t\t\t\t<option value=\"4\">Four</option>\r\n\t\t\t\t\t<option value=\"5\">Five</option>\r\n\t\t\t\t\t<option value=\"6\">Six</option>\r\n\t\t\t\t\t<option value=\"7\">Seven</option>\r\n\t\t\t\t\t<option value=\"8\">Eight</option>\r\n\t\t\t\t\t<option value=\"9\">Nine</option>\r\n\t\t\t\t\t<option value=\"10\">Ten</option>\r\n\t\t\t\t</select>\r\n\t\t\t</fieldset>\r\n\t\t</div>\r\n\t</div>\r\n\t<div class=\"fs-row\">\r\n\t\t<div class=\"fs-cell fs-sm-half fs-md-half fs-lg-half\">\r\n\t\t\t<h4>Links</h4>\r\n\t\t\t<fieldset class=\"form_fieldset\">\r\n\t\t\t\t<label for=\"demo_links\" class=\"form_label\">Label</label>\r\n\t\t\t\t<select name=\"demo_links\" id=\"demo_links\" data-dropdown-options='{\"label\":\"Jump Sites\",\"links\":true}'>\r\n\t\t\t\t\t<option value=\"http://google.com\">Google Search</option>\r\n\t\t\t\t\t<option value=\"http://boingboing.com\">Boing\tBoing</option>\r\n\t\t\t\t\t<option value=\"http://cnn.com\">CNN News</option>\r\n\t\t\t\t</select>\r\n\t\t\t</fieldset>\r\n\t\t</div>\r\n\t\t<div class=\"fs-cell fs-sm-half fs-md-half fs-lg-half\">\r\n\t\t\t<h4>External Links</h4>\r\n\t\t\t<fieldset class=\"form_fieldset\">\r\n\t\t\t\t<label for=\"demo_external\" class=\"form_label\">Label</label>\r\n\t\t\t\t<select name=\"demo_external\" id=\"demo_external\" data-dropdown-options='{\"label\":\"Jump Sites\",\"external\":\"true\"}'>\r\n\t\t\t\t\t<option value=\"http://google.com\">Google Search</option>\r\n\t\t\t\t\t<option value=\"http://boingboing.com\">Boing\tBoing</option>\r\n\t\t\t\t\t<option value=\"http://cnn.com\">CNN News</option>\r\n\t\t\t\t</select>\r\n\t\t\t</fieldset>\r\n\t\t</div>\r\n\t\t<div class=\"fs-cell fs-sm-half fs-md-half fs-lg-half\">\r\n\t\t\t<h4>Cover</h4>\r\n\t\t\t<fieldset class=\"form_fieldset\">\r\n\t\t\t\t<label for=\"demo_cover\" class=\"form_label\">Label</label>\r\n\t\t\t\t<select name=\"demo_cover\" id=\"demo_cover\" data-dropdown-options='{\"cover\":\"true\"}'>\r\n\t\t\t\t\t<option value=\"1\">One</option>\r\n\t\t\t\t\t<option value=\"2\">Two</option>\r\n\t\t\t\t\t<option value=\"3\">Three</option>\r\n\t\t\t\t\t<option value=\"4\">Four</option>\r\n\t\t\t\t\t<option value=\"5\">Five</option>\r\n\t\t\t\t</select>\r\n\t\t\t</fieldset>\r\n\t\t</div>\r\n\t\t<div class=\"fs-cell fs-sm-half fs-md-half fs-lg-half\">\r\n\t\t\t<h4>Custom Class</h4>\r\n\t\t\t<fieldset class=\"form_fieldset\">\r\n\t\t\t\t<label for=\"demo_custom\" class=\"form_label\">Label</label>\r\n\t\t\t\t<select name=\"demo_custom\" id=\"demo_custom\" data-dropdown-options='{\"customClass\":\"custom\"}'>\r\n\t\t\t\t\t<option value=\"1\">One</option>\r\n\t\t\t\t\t<option value=\"2\">Two</option>\r\n\t\t\t\t\t<option value=\"3\">Three</option>\r\n\t\t\t\t\t<option value=\"4\">Four</option>\r\n\t\t\t\t\t<option value=\"5\">Five</option>\r\n\t\t\t\t</select>\r\n\t\t\t</fieldset>\r\n\t\t</div>\r\n\t\t<div class=\"fs-cell fs-sm-half fs-md-half fs-lg-half\">\r\n\t\t\t<h4>Disable</h4>\r\n\t\t\t<fieldset class=\"form_fieldset\">\r\n\t\t\t\t<label for=\"demo_disable\" class=\"form_label\">Label</label>\r\n\t\t\t\t<select name=\"demo_disable\" id=\"demo_disable\" disabled>\r\n\t\t\t\t\t<option value=\"1\">One</option>\r\n\t\t\t\t\t<option value=\"2\">Two</option>\r\n\t\t\t\t\t<option value=\"3\">Three</option>\r\n\t\t\t\t\t<option value=\"4\">Four</option>\r\n\t\t\t\t\t<option value=\"5\">Five</option>\r\n\t\t\t\t</select>\r\n\t\t\t\t<button type=\"button\" class=\"form_button toggle\">Enable</button>\r\n\t\t\t</fieldset>\r\n\t\t</div>\r\n\t\t<div class=\"fs-cell fs-sm-half fs-md-half fs-lg-half\">\r\n\t\t\t<h4>Disable Item</h4>\r\n\t\t\t<fieldset class=\"form_fieldset\">\r\n\t\t\t\t<label for=\"demo_disable_item\" class=\"form_label\">Label</label>\r\n\t\t\t\t<select name=\"demo_disable_item\" id=\"demo_disable_item\">\r\n\t\t\t\t\t<option value=\"1\" disabled>One</option>\r\n\t\t\t\t\t<option value=\"2\">Two</option>\r\n\t\t\t\t\t<option value=\"3\">Three</option>\r\n\t\t\t\t\t<option value=\"4\">Four</option>\r\n\t\t\t\t\t<option value=\"5\">Five</option>\r\n\t\t\t\t</select>\r\n\t\t\t\t<button type=\"button\" class=\"form_button toggle toggle_item\">Enable Item '1'</button>\r\n\t\t\t</fieldset>\r\n\t\t</div>\r\n\t</div>\r\n</form>"}