magicButtons是一款带动画图标的jquery按钮插件。该jquery按钮插件在按钮被点击的时候,可以将按钮设置为不同的状态,可以显示动画图标,或改变显示文字,或改变按钮的尺寸。它的特点还有:
- 内置两种按钮主题:material design风格和边框线条风格。
- 可自定义按钮的文字和图标。
- 可制作圆角按钮。
- 按钮点击是有点击波效果。
- 支持mall、 Medium 和 Large三种尺寸按钮。
使用方法
在页面中引入magicBtn.css和jquery以及magicBtn.js文件。
<link rel="stylesheet" href="css/magicBtn.css"> <script src="jquery.min.js"></script> <script src="magicBtn.js"></script>
HTML结构
然后在页面中添加按钮元素:
<button id="btn1" class="magicBtn">按钮</button>
初始化插件
在页面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: '<i></i>' } $('#selector').startLoading(options);
初始文本作为一个属性保存在按钮的HTML标签上:<button data-initial-text="$text">$text</button>
。
如果设置了图标,那么文字参数不会起作用。
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、块级按钮
<button class="block"></button>
6、图标旋转
$(selector).startLoading({ 'icon': '<i class="fas fa-cog rotating"></i>' })
该jquery按钮插件的github地址为:https://github.com/Spolaa/magicButtons
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!