注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

jquery带加载进度的按钮插件Ladda for Bootstrap3

UI fishcity 3068浏览

带加载进度的按钮插件Ladda for Bootstrap3

Ladda for Bootstrap 3是一款在按钮内建立加载进度条动画效果的jquery插件,它可以清楚的反馈按钮被点击后的工作进度,提高用户体验性。

使用方法

引入核心文件

<link rel="stylesheet" href="dist/ladda-themeless.min.css">
<script src="dist/spin.min.js"></script>
<script src="dist/ladda.min.js"></script>

 构建html代码,Ladda按钮必须使用样式类ladda-button和ladda-button的标签(lable)必还有样式类ladda-label。如果没有构建ladda-label标签,插件将会自动创建。

<button class="ladda-button" data-style="expand-right"><span class="ladda-label">Submit</span></button>

 也可以使用a标签代码botton标签

<a href="#" class="btn btn-primary ladda-button" data-style="expand-left"><span class="ladda-label">expand-left</span></a>

 你可以通过设置data-style属性来选择不同的风格:

data-style="expand-left"
data-style="expand-left"
data-style="expand-right"
data-style="expand-up"
data-style="zoom-in"
data-style="zoom-out"
data-style="slide-left"
data-style="slide-right"
data-style="slide-up"
data-style="slide-down"
data-style="contract"

你可以通过设置data-size属性选择控制大小:

data-size="xs"
data-size="s"
data-size="l"

你可以通过设置data-spinner-color属性使用不同的颜色(十六进制代码):

data-spinner-color="#FF0000"

使用Javascript控制UI状态:

Ladda.bind('input[type=submit]');

使用AJAX表单提交时,可以使用下面的语法:

<a href="#" id="form-submit" class="btn btn-primary btn-lg ladda-button" data-style="expand-right" data-size="l">
    <span class="ladda-label">Submit form</span>
</a>
$(function() {
 $('#form-submit').click(function(e){
   e.preventDefault();
   var l = Ladda.create(this);
   l.start();
   $.post("your-url", 
       { data : data },
     function(response){
       console.log(response);
     }, "json")
   .always(function() { l.stop(); });
   return false;
 });
});

 其它方法

l.stop();

l.toggle();

l.isLoading();

l.setProgress( 0-1 );

转载请注明:jQ酷 » jquery带加载进度的按钮插件Ladda for Bootstrap3

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。