- 内置两种按钮主题: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' ,
rounded: false ,
fill: false
}
|
方法
该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: '' ,
}
$( '#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