Quttons: A JavaScript repository from ps7

#Quttons are buttons made of Quantum Paper

Qunatum Paper is a digital paper that can change its size, shape and color to accommodate new content. Quantum paper is part of Google's new Material Design language.
With this plugin you can hide any div behind a Quantum [Paper] Button or Qutton

#Online Demo

#Dependencies

jQuery
Velocity.js with UI Pack

#How To Use

Switch to gh-pages branch to look at code used in demo site.

##Step 1, Include Dependencies :

Download and include all dependencies in your html file.
After all the dependencies have been included, include Quttons.js or Quttons.min.js and Quttons.css after downloading from this repo.
In the following order

<script src = "Path/To/jQuery" type = "text/javascript"></script>
<script src = "Path/To/velocity.js" type = "text/javascript"></script>
<script src = "Path/To/velocity.ui.js" type = "text/javascript"></script>
<script src = "Path/To/Quttons.js" type = "text/javascript"></script>

And CSS

<link rel = "stylesheet" href = "Path/To/Quttons.css" />

##Step 2, Design your dialog :

Design your dialog box.
Design a div as you normally would, with all the css styles you want. You can put whatever you want inside your div.
You can also add event listeners to buttons inside the dialog as you normally would.
You can add a close button, just remember to give it a class of close.
Here is sample code for the Upload File Qutton from the Demo Site.

<div id="uploadDialog">
	<h2>Upload a new file</h2>
		<input type="text" id = "fileUrl" placeholder = "Enter URL">
	<div id="button_basic_upload"> Choose a file to upload
	</div>
</div>

##Step 3, Wrap created dialog in a div

Wrap dialog created in previous step in a div with class of qutton and one custom id which will be used to reference this qutton in your js file.
Example

<div class = "qutton" id = "qutton_upload">
 ...(Dialog created in previous step) ...
</div>

##Step 4, Initialize Qutton

In your .js file start by referencing the qutton in the following manner.

var quttonUpload = Qutton.getInstance($('#qutton_upload'));
quttonUpload.init({
	icon : './images/icon_upload.png',
	backgroundColor : "#917466"
});

Inside getInstance you pass in a jQuery object referencing the custom id you set up in previous step
init function takes in an object specifying the configuration of the button, following are currently supported

|Argument | Description | Default | |---|---|---|---|---| | icon | Icon to be displayed in Qutton | None | | backgroundColor | Background Color of Qutton | #FE0000 | | width | Width of the Qutton | 60 | | height | Height of the Qutton | 60 |
| easing | Easing for the animation | easeInOutQuint |

ps7/Quttons