当前位置：首页 > 网页特效 > 图像/媒体

带动画图标的jquery按钮插件

分类：图像/媒体日期：2024-05-14 点击(2) 评论(0)

带动画图标的jquery按钮插件

简介

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

```html
<link rel="stylesheet" href="css/magicBtn.css">
<script src="jquery.min.js"></script>
<script src="magicBtn.js"></script>
```
#####  HTML结构
然后在页面中添加按钮元素：

```html
<button id="btn1" class="magicBtn">按钮</button>
```
#####  初始化插件
在页面DOM元素加载完毕之后，通过下面的方法来初始化该Jquery按钮插件。

```html
$.magicBtn(selector,options);
```
#####  配置参数
可用的配置参数有：

```html
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加载方法
```html
var options = {
    loadginText: 'Your loading text',
    loadingIcon: bool(true),
    icon: '<i></i>'
}  
   
$('#selector').startLoading(options);
```
初始文本作为一个属性保存在按钮的HTML标签上：
```html
<button data-initial-text="$text">$text</button>。
```

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

2、返回结构状态
```html
var options = { 
    initialText: data-initial-text
    status: '',//One of success, warning, error. Empty for default.
}
   
$('#selector').resultLoading(options);
```
可以有四种类型的返回状态：

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

web299.com

带动画图标的jquery按钮插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果