带动画图标的jquery按钮插件

按钮 动画 2018-05-29

控件介绍
magicButtons是一款带动画图标的jquery按钮插件。该jquery按钮插件在按钮被点击的时候,可以将按钮设置为不同的状态,可以显示动画图标,或改变显示文字,或改变按钮的尺寸。
浏览器兼容

支持IE9+

演示下载 2000
使用方法

  • 内置两种按钮主题:material design风格和边框线条风格。
  • 可自定义按钮的文字和图标。
  • 可制作圆角按钮。
  • 按钮点击是有点击波效果。
  • 支持mall、 Medium 和 Large三种尺寸按钮。

使用方法

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

1
2
3
<link rel="stylesheet" href="css/magicBtn.css">
<script src="jquery.min.js"></script>
<script src="magicBtn.js"></script>
HTML结构

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

1
<button id="btn1" class="magicBtn">按钮</button>
初始化插件

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

1
$.magicBtn(selector,options);

配置参数

可用的配置参数有:

1
2
3
4
5
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加载方法
1
2
3
4
5
6
7
var options = {
    loadginText: 'Your loading text',
    loadingIcon: bool(true),
    icon: '<i></i>'
   
$('#selector').startLoading(options);

初始文本作为一个属性保存在按钮的HTML标签上:<button data-initial-text="$text">$text</button>

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

2、返回结构状态
1
2
3
4
5
6
var options = {
    initialText: data-initial-text
    status: '',//One of success, warning, error. Empty for default.
}
   
$('#selector').resultLoading(options);

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

  • 1、成功状态
  • 2、警告状态
  • 3、错误状态
  • 4、默认状态
3、移除loading
1
2
3
4
5
var options = {
    text: 'Your custom text for the button'
   
$('#selector').removeLoading(options);
4、Disabled状态
1
2
3
var options = {} 
   
$('#selector').disabled(options);
5、块级按钮
1
<button class="block"></button>
6、图标旋转
1
2
3
$(selector).startLoading({
    'icon': '<i class="fas fa-cog rotating"></i>'
})

该jquery按钮插件的github地址为:https://github.com/Spolaa/magicButtons

本文转载请注明出处:http://www.zhuiye.com/detail_2.html