nashvail / quttons Goto Github PK

#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 |