loda-button是一款按钮加载动画的jquery插件,使用CSS3创建动画转场,当点击按钮后,数据与服务端通信时出现加载动画,大大地提高交互体验性。由于使用的是CSS3,因此只支持现代浏览器,即IE10+,当然你可以使用html5.js来实现低版本IE支持。
使用方法
引入核心文件
1
2
3
4
|
<
link
rel
=
"stylesheet"
href
=
"icomon/style.css"
/>
<
link
rel
=
"stylesheet"
href
=
"loda-button.css"
/>
<
script
type
=
"text/javascript"
src
=
"vendor/jquery-1.9.1.js"
></
script
>
<
script
type
=
"text/javascript"
src
=
"loda-button.js"
></
script
>
|
写入HTML代码
1
2
3
4
|
<
a
href
=
"#"
class
=
"loda-btn"
>
<
span
aria-hidden
=
"true"
class
=
"loda-icon icofont-mail"
></
span
>
Mail
</
a
>
|
按钮使用了loda-btn与loda-icon两个样式类,样式类非常简单,写在了loda-button.css。可以重写的部份样式类你可以根据你的需求来重写,而按钮动画部分不可重写。
写入JS初始化插件
1
2
3
|
var
lodaBtn = $(
'#loda-btn'
).lodaButton();
//实例化
lodaBtn.lodaButton(
'start'
);
//开始按钮动画
lodaBtn.lodaButton(
'stop'
);
//结束按钮动画
|
转载请注明:jQ酷 » jquery按钮加载动画插件loda-button