Quttons - Buttons made of Quantum Paper

Quttons are buttons made of Quantum Paper

• Qunatum Paper is a digital paper that can change its size, shape and color to accomodate 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

Source: github.com

1. INCLUDE CSS AND JS FILES

<link rel = "stylesheet" href = "Path/To/Quttons.css" />
<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>

2. HTML

Design your dialog

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

• 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.

Wrap created dialog in a div

<div class = "qutton" id = "qutton_upload">
 ...(Dialog created in previous step) ...
</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.

3. JAVASCRIPT

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