My cool page

\n```\n\nThe themes we could have used are:\n\n* soft\n* light\n* dark\n* iphone\n* modern\n\nOf course, you can write your own themes/tweak the styling.\n\n### Step 3: Initialize!\n\nNow we just need to initialize the element we made to make it toggleable!\n\n```javascript\n\n// Simplest way:\n$('.toggle').toggles();\n\n\n// With options (defaults shown below)\n$('.toggle').toggles({\n drag: true, // allow dragging the toggle between positions\n click: true, // allow clicking on the toggle\n text: {\n on: 'ON', // text for the ON position\n off: 'OFF' // and off\n },\n on: true, // is the toggle ON on init\n animate: 250, // animation time (ms)\n easing: 'swing', // animation transition easing function\n checkbox: null, // the checkbox to toggle (for use in forms)\n clicker: null, // element that can be clicked on to toggle. removes binding from the toggle itself (use nesting)\n width: 50, // width used if not set in css\n height: 20, // height if not set in css\n type: 'compact' // if this is set to 'select' then the select style toggle will be used\n});\n\n\n// Getting notified of changes, and the new state:\n$('.toggle').on('toggle', function(e, active) {\n if (active) {\n console.log('Toggle is now ON!');\n } else {\n console.log('Toggle is now OFF!');\n }\n});\n\n```\n\n## Advanced Usage\n\n### Setting toggle states\n\n```javascript\n// initiate a new Toggles class\n$('.toggles').toggles({\n on: true\n});\n\n// the underlying Toggles class can be accessed\nvar myToggle = $('.toggles').data('toggles');\n\nconsole.log(myToggle.active); // true\nmyToggle.toggle();\nconsole.log(myToggle.active); // false\n\n// set the state to 'false'\n// will not do anything if the state is already false\nmyToggle.toggle(false);\nconsole.log(myToggle.active); // false\n\n// passing a boolean in place of options on an active toggle element\n// will set the state\n$('.toggles').toggles(true);\nconsole.log(myToggle.active); // true\n\n// the toggle-active data attribute stores the state too\nconsole.log($('.toggles').data('toggle-active')); // true\n\n// myToggle.toggle(state, noAnimate, noEvent)\n\n// don't animate the change\nmyToggle.toggle(false, true);\n\n// change the state without triggering an event\nmyToggle.toggle(true, false, true);\n```\n\n### Using data-toggle-\\* attributes on the element\n\nAny of the following options can be set using data-toggle attributes: `on`, `drag`, `click`, `width`, `height`, `animate`, `easing`, `type`, `checkbox`\n```html\n

\n```\n```javascript\n$('.toggles').toggles();\n```\n\n### Disabling user interaction\n\nIt can be useful to disable the toggle to stop users from changing the state. Set the `disabled` attribute on the toggle element to do this. Alternatively, you could use CSS to set `pointer-events: none`\n\n```js\n// your toggle element\nvar toggle = $('.toggle');\n\n// initialise it\ntoggle.toggles();\n\n// disable the toggle element (click + drag will no longer work)\ntoggle.toggleClass('disabled', true);\n\n// setting the state via JS is NOT disabled, only user input\n// toggle the toggle on\ntoggle.toggles(true);\n\n// re-enable the toggle\ntoggle.toggleClass('disabled', false);\n```\n\n## Contributing\n\nMake your JavaScript edits to `js/Toggles.js`. Any styling edits should be made to the relevent files in the `less` folder. JS edits must be compatible with Closure Compiler advanced optimisations - if you aren't able to code in this style then I'll happily tweak any pull requests/help out.\n\nTo build the files for release, run `make`. Again, if you struggle then I'll be able to build the files for you. (Note: use node v5)\n","readmeFilename":"README.md"}