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

使用按钮来模拟Quantum Paper效果

插件依赖

使用方法

使用这个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插件的可用参数如下:

参数 描述 默认值
icon 在Qutton中显示的图标 None
backgroundColor Qutton的背景颜色 #FE0000
width Qutton的宽度 60
height Qutton的高度 60
easing 动画的easing效果 easeInOutQuint