谷歌Quantum Paper风格按钮变形动画特效

Quttons是一款谷歌Quantum Paper风格按钮变形动画特效jQuery插件。Quantum Paper（量子纸）是一种新的谷歌Material Design语言。它可以改变大小、形状和颜色以容纳新的内容。该插件使用按钮来模拟量子纸效果，效果非常炫酷。

插件依赖

• jQuery
• Velocity.js with UI Pack

使用方法

使用这个Quantum Paper效果需要引入所有的依赖文件，以及Quttons.js和Quttons.css文件。

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

HTML结构

然后你需要制作弹出对话框的内容，你可以使用<div>来制作，样式可以自定义。你可以为对话框中的按钮添加事件监听，还可以添加一个关闭按钮，只需要在按钮上添加close class。下面是demo中文件上传对话框的HTML结构。

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

然后将上面制作好的对话框包裹进一个带qutton class的<div>中，并给它设置一个ID号。

<div class = "qutton" id = "qutton_upload">
 ...(上一步中创建的对话框代码) ...
</div>                
              

初始化插件

在页面加载完毕之后，就可以使用下面的方法来初始化这个Quantum Paper插件。

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

在getInstance()中你需要传入前面包裹<div>中设置的ID号。init()方法中可以传入自定义的配置参数。

配置参数

这个Quantum Paper插件的可用参数如下：