formstone
Version:
Library of modular front end components.
1 lines • 15.1 kB
JSON
{"main":["equalize.js"],"options":[{"name":"maxWidth","type":"string","default":"'Infinity'","description":"Width at which to auto-disable plugin"},{"name":"minWidth","type":"string","default":"'0'","description":"Width at which to auto-disable plugin"},{"name":"property","type":"string","default":"\"height\"","description":"Property to size; 'height' or 'width'"},{"name":"target","type":"string OR array","default":"null","description":"Target child selector(s); Defaults to direct descendants"}],"events":[],"methods":[{"name":"defaults","description":"Extends plugin default settings; effects instances created hereafter.","params":[{"name":"options","type":"object","default":"{}","description":"New plugin defaults"}],"examples":["$.equalize(\"defaults\", { ... });"]},{"name":"destroy","description":"Removes plugin instance.","examples":["$(\".target\").equalize(\"destroy\");"]},{"name":"disable","description":"Disables instance of plugin","examples":["$(\".target\").equalize(\"disable\");"]},{"name":"enable","description":"Enables instance of plugin","examples":["$(\".target\").equalize(\"enable\");"]},{"name":"resize","description":"Resizes instance","examples":["$(\".target\").equalize(\"resize\");"]}],"name":"Equalize","type":"widget","description":"A jQuery plugin for equal dimensions.","dependencies":["jQuery","core.js","mediaquery.js"],"css":[{"name":".fs-equalize-element","type":"element","description":"Target Element"}],"use":"### Basic\n\nBy default, Equalize will set the height of an element's children to the largest of the group:\n\n```javascript\n$(\".target\").equalize();\n```\n\n```markup\n<div class=\"target\">\n <div>...</div>\n <div>...</div>\n <div>...</div>\n</div>\n```\n\n### Targets\n\nSpecify a valid `target` selector to equalize specific child elements:\n\n```javascript\n$(\".target\").equalize({\n target: \".child\"\n});\n```\n\n```markup\n<div class=\"target\">\n <div>\n <p class=\"child\">...</p>\n </div>\n <div>\n <p class=\"child\">...</p>\n </div>\n <div>\n <p class=\"child\">...</p>\n </div>\n</div>\n```\n\n### Width\n\nSet the `protperty` to width to Equalize the widths of elements, rather than heights:\n\n```javascript\n$(\".target\").equalize({\n property: \"width\"\n});\n```","demo":"<h4>Basic</h4>\r\n\r\n<!-- START: FIRSTDEMO -->\r\n\r\n<style>\r\n .equalize_target { background: #CFD8DC; margin-bottom: 10px; padding: 15px; }\r\n .equalize_target p { margin: 0; }\r\n .equalize_child { background: #B0BEC5; }\r\n .equalize_group { padding-bottom: 15px; }\r\n .equalize_two { font-size: 12px; font-style: italic; }\r\n .equalize img { max-width: 100%; }\r\n</style>\r\n\r\n<div class=\"demo_container\">\r\n <div class=\"demo_example\">\r\n <div class=\"fs-row equalize js-equalize\">\r\n <div class=\"fs-cell fs-all-third equalize_target\">\r\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id elit non mi porta gravida at eget metus. Aenean lacinia bibendum nulla sed consectetur. Donec id elit non mi porta gravida at eget metus.</p>\r\n </div>\r\n <div class=\"fs-cell fs-all-third equalize_target\">\r\n <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.</p>\r\n </div>\r\n <div class=\"fs-cell fs-all-third equalize_target\">\r\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"demo_code\">\r\n <pre><code class=\"language-html\"><div class="equalize">\r\n	<p>Lorem ipsum dolor sit amet.</p>\r\n</div>\r\n<div class="equalize">\r\n	<p>Vivamus sagittis lacus.</p>\r\n</div>\r\n<div class="equalize">\r\n	<p>Lorem ipsum dolor sit amet.</p>\r\n</div></code></pre>\r\n <pre><code class=\"language-javascript\">$(\".equalize\").equalize();</code></pre>\r\n </div>\r\n</div>\r\n\r\n<!-- END: FIRSTDEMO -->\r\n\r\n<h4>Min Width</h4>\r\n<div class=\"demo_container\">\r\n <div class=\"demo_example\">\r\n <div class=\"fs-row equalize js-equalize\" data-equalize-options='{\"minWidth\":\"740px\"}'>\r\n <div class=\"fs-cell fs-sm-full fs-md-third fs-lg-third equalize_target\">\r\n <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.</p>\r\n </div>\r\n <div class=\"fs-cell fs-sm-full fs-md-third fs-lg-third equalize_target\">\r\n <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.</p>\r\n </div>\r\n <div class=\"fs-cell fs-sm-full fs-md-third fs-lg-third equalize_target\">\r\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"demo_code\">\r\n <pre><code class=\"language-html\"><div class="equalize">\r\n	<p>Lorem ipsum dolor sit amet.</p>\r\n</div>\r\n<div class="equalize">\r\n	<p>Vivamus sagittis lacus.</p>\r\n</div>\r\n<div class="equalize">\r\n	<p>Lorem ipsum dolor sit amet.</p>\r\n</div></code></pre>\r\n <pre><code class=\"language-javascript\">$(\".equalize\").equalize({\r\n minWidth: \"740px\"\r\n});</code></pre>\r\n </div>\r\n</div>\r\n\r\n<h4>Children</h4>\r\n<div class=\"demo_container\">\r\n <div class=\"demo_example\">\r\n <div class=\"fs-row equalize js-equalize\" data-equalize-options='{\"target\":\".equalize_child\"}'>\r\n <div class=\"fs-cell fs-all-third equalize_target\">\r\n <p class=\"equalize_child\">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.</p>\r\n </div>\r\n <div class=\"fs-cell fs-all-third equalize_target\">\r\n <p class=\"equalize_child\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>\r\n </div>\r\n <div class=\"fs-cell fs-all-third equalize_target\">\r\n <p class=\"equalize_child\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id elit non mi porta gravida at eget metus. Aenean lacinia bibendum nulla sed consectetur. Donec id elit non mi porta gravida at eget metus.</p>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"demo_code\">\r\n <pre><code class=\"language-html\"><div class="equalize">\r\n	<p class="equalize_child">Lorem ipsum dolor sit amet.</p>\r\n</div>\r\n<div class="equalize">\r\n	<p class="equalize_child">Vivamus sagittis lacus.</p>\r\n</div>\r\n<div class="equalize">\r\n	<p class="equalize_child">Lorem ipsum dolor sit amet.</p>\r\n</div></code></pre>\r\n <pre><code class=\"language-javascript\">$(\".equalize\").equalize({\r\n target: \".equalize_child\"\r\n});</code></pre>\r\n </div>\r\n</div>\r\n\r\n<h4>Groups</h4>\r\n<div class=\"demo_container\">\r\n <div class=\"demo_example\">\r\n <div class=\"fs-row equalize js-equalize\" data-equalize-options='{\"target\":[\".equalize_one\",\".equalize_two\"]}'>\r\n <div class=\"fs-cell fs-all-third equalize_target\">\r\n <p class=\"equalize_one equalize_group\">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.</p>\r\n <p class=\"equalize_two\">Donec ullamcorper nulla non metus auctor fringilla.</p>\r\n </div>\r\n <div class=\"fs-cell fs-all-third equalize_target\">\r\n <p class=\"equalize_one equalize_group\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>\r\n <p class=\"equalize_two\">Nulla vitae elit libero, a pharetra augue.</p>\r\n </div>\r\n <div class=\"fs-cell fs-all-third equalize_target\">\r\n <p class=\"equalize_one equalize_group\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id elit non mi porta gravida at eget metus. Aenean lacinia bibendum nulla sed consectetur. Donec id elit non mi porta gravida at eget metus.</p>\r\n <p class=\"equalize_two\">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"demo_code\">\r\n <pre><code class=\"language-html\"><div class="equalize">\r\n	<p class="equalize_1">Lorem ipsum dolor sit amet.</p>\r\n	<small class="equalize_2">Footer Text.</small>\r\n</div>\r\n<div class="equalize">\r\n	<p class="equalize_1">Vivamus sagittis lacus.</p>\r\n	<small class="equalize_2">Footer Text.</small>\r\n</div>\r\n<div class="equalize">\r\n	<p class="equalize_1">Lorem ipsum dolor sit amet.</p>\r\n	<small class="equalize_2">Footer Text.</small>\r\n</div></code></pre>\r\n <pre><code class=\"language-javascript\">$(\".equalize\").equalize({\r\n target: [\r\n \".equalize_1\",\r\n \".equalize_2\"\r\n ]\r\n});</code></pre>\r\n </div>\r\n</div>\r\n\r\n<h4>Images</h4>\r\n<div class=\"demo_container\">\r\n <div class=\"demo_example\">\r\n <div class=\"fs-row equalize js-equalize\">\r\n <div class=\"fs-cell fs-all-third equalize_target\">\r\n <img src=\"https://spacehold.it/400x300/1.jpg\" alt=\"\">\r\n </div>\r\n <div class=\"fs-cell fs-all-third equalize_target\">\r\n <img src=\"https://spacehold.it/400x200/2.jpg\" alt=\"\">\r\n </div>\r\n <div class=\"fs-cell fs-all-third equalize_target\">\r\n <img src=\"https://spacehold.it/400x400/3.jpg\" alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"demo_code\">\r\n <pre><code class=\"language-html\"><div class="equalize">\r\n	<img src="example.jpg" alt="">\r\n</div>\r\n<div class="equalize">\r\n	<img src="example.jpg" alt="">\r\n</div>\r\n<div class="equalize">\r\n	<img src="example.jpg" alt="">\r\n</div></code></pre>\r\n <pre><code class=\"language-javascript\">$(\".equalize\").equalize();</code></pre>\r\n </div>\r\n</div>\r\n","document":"# Equalize\n\nA jQuery plugin for equal dimensions.\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 Equalize\n\n\n#### Main\n\n```markup\nequalize.js\n```\n\n\n#### Dependencies\n\n```markup\njQuery\ncore.js\nmediaquery.js\n```\n\n### Basic\n\nBy default, Equalize will set the height of an element's children to the largest of the group:\n\n```javascript\n$(\".target\").equalize();\n```\n\n```markup\n<div class=\"target\">\n <div>...</div>\n <div>...</div>\n <div>...</div>\n</div>\n```\n\n### Targets\n\nSpecify a valid `target` selector to equalize specific child elements:\n\n```javascript\n$(\".target\").equalize({\n target: \".child\"\n});\n```\n\n```markup\n<div class=\"target\">\n <div>\n <p class=\"child\">...</p>\n </div>\n <div>\n <p class=\"child\">...</p>\n </div>\n <div>\n <p class=\"child\">...</p>\n </div>\n</div>\n```\n\n### Width\n\nSet the `protperty` to width to Equalize the widths of elements, rather than heights:\n\n```javascript\n$(\".target\").equalize({\n property: \"width\"\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-equalize-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| `maxWidth` | `string` | `'Infinity'` | Width at which to auto-disable plugin |\n| `minWidth` | `string` | `'0'` | Width at which to auto-disable plugin |\n| `property` | `string` | `\"height\"` | Property to size; 'height' or 'width' |\n| `target` | `string OR array` | `null` | Target child selector(s); Defaults to direct descendants |\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$.equalize(\"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\").equalize(\"destroy\");\n```\n\n### disable\n\nDisables instance of plugin\n\n```javascript\n$(\".target\").equalize(\"disable\");\n```\n\n### enable\n\nEnables instance of plugin\n\n```javascript\n$(\".target\").equalize(\"enable\");\n```\n\n### resize\n\nResizes instance\n\n```javascript\n$(\".target\").equalize(\"resize\");\n```\n\n<hr>\n<a name=\"css\"></a>\n\n## CSS\n\n| Class | Type | Description |\n| --- | --- | --- |\n| `.fs-equalize-element` | `element` | Target Element |\n\n"}