Ever wanted a handy list of common keycodes and the keys they represent? Use `Foundation.Keyboard.keys`. This is an object containing key/value pairs of the most frequently used keys in our framework.
-Want to manage your own keyboard inputs? No problem! Within your `.on('key**')` callback, call `Foundation.Keyboard.parseKey(event)` to get a string of what key was pressed, e.g. `'TAB'` or `'ALT_X'`.
+Want to manage your own keyboard inputs? No problem! Within your `.on('key**')` callback, call `Foundation.Keyboard.parseKey(event)` to get a string of what key was pressed, e.g. `'TAB'` or `'ALT_X'`.
You can also use this function outside of the Foundation components in your own JavaScript code.
What if you want to know if there's focusable elements somewhere on a page? Instead of writing that function and selector yourself, just use:
`Foundation.getFnName(fn)` returns a string representation of a named function. Seems small, but believe us, it's useful.
-`Foundation.transitionend` is a string of the properly vendor-prefixed version of `transitionend` events. Most browsers don't require a prefix these days, but for those that do, we've got you covered.
+`Foundation.transitionend()` is a function that returns the strong of the properly vendor-prefixed version of `transitionend` events. Most browsers don't require a prefix these days, but for those that do, we've got you covered. But IE 9 doesn't support transitions?? Quite right you are! In that case our plugins that use transitions will simply snap to whatever location or visibility state they were headed to, and this function will fire a `transitionend` event manually on the element you passed. It still gives the desired results, and allows Motion-UI to work in IE 9.
```html
<script src="js/jquery.min.js"></script>
+<!-- this will include every plugin and utility required by Foundation -->
<script src="js/foundation.min.js"></script>
-<script src="js/foundation.util.mediaQuery.js"></script>
```
<div class="callout warning">
- <p>Make sure Foundation loads <em>after</em> jQuery, and make sure to include the media query utils.</p>
+ <p>Make sure Foundation loads <em>after</em> jQuery.</p>
</div>
### File Structure
All of Foundation's plugins ship as individual files, named `foundation.tabs.js`, `foundation.accordion.js`, and so on. These files are also combined into one big file called `foundation.js`, which allows you to get every plugin at once.
-If you're only using certain plugins, know that they all require `foundation.core.js` to be loaded *first*. Some plugins also require specific utility libraries that ship with Foundation—refer to a plugin's documentation to find out which plugins require what, and see the [JavaScript Utilities](javascript-utilities.html) page for more information.
+If you're only using certain plugins, know that they all require `foundation.core.js` and `foundation.util.mediaQuery.js` to be loaded *first*. Some plugins also require specific utility libraries that ship with Foundation—refer to a plugin's documentation to find out which plugins require what, and see the [JavaScript Utilities](javascript-utilities.html) page for more information.
```html
<!-- Example of selectively including files -->
<script src="js/jquery.min.js"></script>
<script src="js/foundation.core.js"></script>
+<script src="js/foundation.util.mediaQuery.js"></script>
<script src="js/foundation.tabs.js"></script>
<script src="js/foundation.accordion.js"></script>
```
$(document).foundation();
```
+You can also selectively initialize plugins by call the `.foundation();` method on one or more elements with a plugin.
+
+```js
+$('#foo').foundation(); // initialize all plugins within the element `#foo`
+$('.has-tip').foundation(); // initialize all tooltips on the page.
+```
+
---
## Using Plugins
```
An individual instance of a plugin can also have different settings. These can be set in the HTML or in JavaScript.
-
-In the HTML, each setting can be defined as an individual data attribute. Note that camelCased options are converted to hyphenated words. In the below example, `multiExpand` becomes `data-multi-expand`.
+<div class="callout warning">
+ <p>In the HTML, each setting can be defined as an individual data attribute. Note that camelCased options are converted to hyphenated words. In the below example, `multiExpand` becomes `data-multi-expand`.</p>
+</div>
```html
<div data-accordion data-slide-speed="500" data-multi-expand="true"></div>
```html
<div data-accordion data-options="slideSpeed: 500; multiExpand: true;"></div>
```
+There is one exception to this rule above, in the [Sticky](sticky.html) plugin. Because of the way you pass top and bottom anchors to that plugin, you can't include them in your `data-options` attribute. If you are using a single anchor or no declared anchor at all, you can still use `data-options`, and you can use it for all other options available.
+<hr>
Setting options with JavaScript involves passing an object into the constructor function, like this:
```js
---
+## Adding Content to Plugins
+
+In previous versions of Foundation, there was a method for plugins called `reflow`, though it's inclusion on plugins wasn't universal. For Foundation 6 we've added a global `reInit` method that will remove and reapply event listeners, update the plugin's instance data for relevant information, like a new tab or content pane being added, and reset any cached data the plugin may rely on.
+
+This method can be called on a plugin class:
+```js
+Foundation.reInit('tooltip');
+```
+an array of plugin classes:
+```js
+Foundation.reInit(['tooltip', 'accordion', 'reveal']);
+```
+or an individual element or collection of elements selected with jQuery:
+```js
+Foundation.reInit($('#some-plugin'));
+Foundation.reInit($('.some-plugin-class'));
+```
+
+If passing strings, it is required to pass proper <strong>camelCased</strong> or <strong>kebab-cased</strong> plugin names. Passing `DropdownMenu` or `dropdown-menu` are equivalent.
+
+---
+
## Programmatic Use
Plugins can be created programmatically in JavaScript. Every plugin is a class on the global `Foundation` object, with a constructor that accepts two parameters: an element to attach to, and an object of options.
```
You can use any jQuery selector you like, and if the selector encompasses multiple plugins, they will all have the same the chosen method invoked. You pass arguments just like you would any in other JavaScript `function(comma, delimited, so, easy)`. We did make an effort to reduce the number of public methods that require arguments, but check the plugin's page to see if it requires additional information.
+If you are creating your plugins programmatically, you can, of course, invoke methods directly:
+
+```js
+var $modal = new Foundation.Reveal($('#some-modal'), options);
+$modal.open();
+```
+
<div class="callout warning">
<p>Plugin methods prefixed with an underscore are considered part of the internal API, which means they could change, break, or disappear without warning. We recommend sticking to only the public API, which is documented on each plugin's page.</p>
</div>
projects / thirdparty / foundation / foundation-sites.git / commitdiff
