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