html5 带图片的按钮,带动画图标的jquery按钮插件

magicButtons是一款带动画图标的jquery按钮插件。该jquery按钮插件在按钮被点击的时候，可以将按钮设置为不同的状态，可以显示动画图标，或改变显示文字，或改变按钮的尺寸。它的特点还有：

内置两种按钮主题：material design风格和边框线条风格。

可自定义按钮的文字和图标。

可制作圆角按钮。

按钮点击是有点击波效果。

支持mall、 Medium 和 Large三种尺寸按钮。

使用方法

在页面中引入magicBtn.css和jquery以及magicBtn.js文件。

HTML结构

然后在页面中添加按钮元素：

按钮

初始化插件

在页面DOM元素加载完毕之后，通过下面的方法来初始化该Jquery按钮插件。

$.magicBtn(selector,options);

配置参数

可用的配置参数有：

options = {

buttonType: 'type', // 'material','outline'

rounded: false, // (bool) - add class '.round', border-radius: 5px

fill: false // Just for 'outline', fill effect on button:hover

}

方法

该jquery按钮插件的可用方法有：

1、loading加载方法

var options = {

loadginText: 'Your loading text',

loadingIcon: bool(true),

icon: ''

}

$('#selector').startLoading(options);

初始文本作为一个属性保存在按钮的HTML标签上：$text。

如果设置了图标，那么文字参数不会起作用。

2、返回结构状态

var options = {

initialText: data-initial-text

status: '',//One of success, warning, error. Empty for default.

}

$('#selector').resultLoading(options);

可以有四种类型的返回状态：

1、成功状态

2、警告状态

3、错误状态

4、默认状态

3、移除loading

var options = {

text: 'Your custom text for the button'

}

$('#selector').removeLoading(options);

4、Disabled状态

var options = {}

$('#selector').disabled(options);

5、块级按钮

6、图标旋转

$(selector).startLoading({

'icon': ''

})