文档章节

使用Bootstrap3和Ladda UI实现的多种按钮“加载中”效果体验

gbin1
 gbin1
发布于 2014/03/21 13:29
字数 1190
阅读 8415
收藏 8


在线演示

在线演示

大家在开发基于web的网站或者web应用中,常常在AJAX调用的过程中需要提示用户并且展示相关的“加载中”效果,类似的UI设计也非常多,比如,当点击一个按钮后,在它的旁边显示一个 “加载中” 文字,或者是添加一个“旋转GIF”动画效果图。

在今天这个教程中,我们将介绍来一个Ladda UI概念设计,帮助你设计不同的基于按钮的加载中效果,并且整合到Bootstrap3框架里,如下:

它可以方便的帮助你通过按钮来提示用户相关的“加载中”状态,并且支持不同的加载效果,配置也很简单,只需要在对应的按钮上添加data-style属性,如下:

data-style="slide-down"

在接下来的教程中,我们将介绍如何将Ladda UI设计和Bootstrap3整合起来,提供一个完整的“加载中”效果体验。

相关类库

首先导入相关Bootstrap和Ladda类库:

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script><script type="text/javascript" src="js/jquery.jribbble.min.js"></script><script src="js/bootstrap.min.js"></script>	<script src="js/spin.js"></script>	<script src="js/ladda.js"></script>

这里我们同时导入了Jdribbble插件来实现AJAX相关的效果(当然,作为数据提供,你可以使用任何其它服务,或者自己的AJAX),获取来自dribbble.com的最佳设计图片。

如果你不需要展示进度效果的话,基本上只需要在AJAX相关请求中添加如下代码即可完成javascript代码开发:

var l = Ladda.create(this);l.start();

当AJAX请求完成后,可以调用如下停止:

l.stop();

即完整了整个“加载中”的过程,其中包含了“disabled”当前的按钮的操作,非常方便,提高了开发的效率。

当然,如果你需要提示用户当前进度的话,它内置了一个进度条,你可以使用如下代码来设置当前进度:

l.setProgress( 0.1 );

Javacript书写完毕了,你需要在HTML中定义使用的加载中效果,如下:

<button type="button" class="btn btn-info btn-lg ladda-button center-block" id="showmore" title="显示更多前端代码回放" data-style="slide-down">				<span class="ladda-label">					更多设计				</span>			</button>

这里我们定义使用

data-style="slide-down"

来设置需要的加载中效果,这个效果是设置一个向下幻灯的切换效果,更多的效果,请访问:http://lab.hakim.se/ladda/

相关的CSS

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />		<link rel="stylesheet" type="text/css" href="css/ladda-themeless.css" />		<link rel="stylesheet" type="text/css" href="css/gbtags.css" />

这里我们引用了相关的CSS,以保证Ladda可以正常的和Bootstrap3一起正常工作。

完整代码

如果你曾阅读过相关教程:Bootstrap3和jQuery实现响应式iOS/Android风格滚动到页顶(底)弹跳效果 ,那么以下代码应该非常容易理解:

$(document).ready(function(){			  //定义相关变量			  var $wallcontent = $('#wallcontent'), pagenum=1,  $showmore = $('#showmore');			  			  function loadshots() {				var l = Ladda.create(this);				l.start();				l.setProgress( 0.1 );								$showmore.find('.ladda-label').text('loading...');								//调用jdribbble相关API获取远程数据内容				$.jribbble.getShotsByList('popular', function(data){								  var items = [];				  				  $.each(data.shots, function(i, shot){					items.push('<article class="col-md-2 col-sm-3 col-xs-4">');					items.push('<a href="' + shot.url + '" target="_blank" class="linkc">');					items.push('<img class="img-responsive" src="' + shot.image_teaser_url + '" alt="' + shot.title + '">');					items.push('</a>');					items.push('</article>');					l.setProgress(0.1 + 0.02*i);				  });				  				  var newEls = items.join(''), tmpcontent = $(newEls);				  				  l.setProgress( 0.9 );				  //以上代码生成了需要显示的dirbbble设计内容,下面代码中我们将这些内容添加到HTML容器中				  $wallcontent.append(tmpcontent);				  				  $showmore.find('.ladda-label').text('更多设计');				  				  l.setProgress( 1 );				  l.stop();								}, {page:pagenum, per_page:24});								pagenum++;			  }			  			  //绑定方法到加载更多按钮			  $showmore.bind('click', loadshots);			  			  $showmore.trigger('click');			  			});

以上代码,主要通过点击“更多设计”来获取最受欢迎的dribbble设计作品,这里我们通过绑定click方法来处理事件,并且在处理过程中,使用进度条来指示当前的加载进度。

在附带的四个在线演示中,我们调用了不同的“加载中"特效,大家可以运行查看效果。

如果对于代码有任何问题,请在这里给我留言,我会给您解答,感谢阅读!

了解代码是如何一行一行编写出来的,请访问如下地址查看:

前端代码回放:http://www.gbtags.com/gb/rtreplayerpreview/9.htm

阅读全文:使用Bootstrap3和Ladda UI实现的多种按钮“加载中”效果体验

© 著作权归作者所有

gbin1
粉丝 87
博文 722
码字总数 275571
作品 0
东城
私信 提问
加载中

评论(3)

照片记录谁

引用来自“Ivan罗”的评论

你好,是这样写的为什么报错了?
<button class="btn btn-default" id="test" data-style="slide-right"><span class="ladda-label">测试</span></button>
$('#test').click(function(){
  var l = Ladda.create(this);
  l.start();
  setTimeout(function(){l.stop();},2000);
});
火狐报错:TypeError: a is not a constructor .... ladda.min.js (第 1 行,第 2189 列)
spin.min.js 需要在ladda.min.js 之前引入
Ivan罗
Ivan罗
你好,是这样写的为什么报错了?
<button class="btn btn-default" id="test" data-style="slide-right"><span class="ladda-label">测试</span></button>
$('#test').click(function(){
  var l = Ladda.create(this);
  l.start();
  setTimeout(function(){l.stop();},2000);
});
火狐报错:TypeError: a is not a constructor .... ladda.min.js (第 1 行,第 2189 列)
高榕
高榕
不错啊
内置加载效果的按钮库--Ladda

Ladda 是一款把加载提示效果集成到按钮中,以弥合行动和反馈之间的时间间隔,提供更好的功能使用体验的库。主要用于在用户点击提交之后,即时提供反馈,让他们知道浏览器正在处理用户提交的任...

匿名
2017/08/02
536
0
12款程序员们最爱的Bootstrap模板

如果你还没有开始使用Bootstrap模板,那你可真是有够OUT,这是一个帮助你快速开发的工具,Bootstrap是基于jQuery框架开发的,它在jQuery框架的基础上进行了更为个性化和人性化的完善,形成一...

gbin1
2014/09/18
189
0
极客Web前端开发资源大荟萃

前端开发已经成为当前炙手可热的技术之一。此次我们总结的前端开发包含了相关技术和流行趋势,希望从中大家可以挖掘你们所需要的,并带给你们最有价值的帮助!原文来自:极客标签 良心ui - ...

gbin1
2014/09/03
5
0
Bootstrap2和3的区别与选择

相信大家对Bootstrap都已经不陌生了,这个在网站建设领域赫赫有名的前端开发框架可谓是受到了全球前端工程师的推崇。 不过自从推出了Bootstrap3版本以来,国内很多朋友都在Boostrap2和3的选择...

6pker
2014/12/27
678
0
让Bootstrap 3兼容IE8浏览器

让Bootstrap 3兼容IE8浏览器 看到这篇文章有越来越多的人看,我决定给大家节省时间,废话少说。有几个点大家要注意。 1、本地调试需要Web Server(如IIS、Apache,Nginx),单纯地本地打开文...

次长风
2015/07/31
237
1

没有更多内容

加载失败,请刷新页面

加载更多

Experts say the weaker pound is drawing investors to the UK tech sector

UK tech companies secured a record £5.5bn in foreign investment in the first seven months of this year, research shows. This was more than the amount invested per capita in th......

wowloop
26分钟前
5
0
Add support for Android 9-patch images in BorderImage

The 9-patch image implementation in Qt Quick Controls 1 is an internal implementation detail of the Android style. It cannot handle .9.png image files out of the box, but takes ......

shzwork
30分钟前
4
0
c/c++日期时间处理函数小结

日期时间处理函数: 日期时间转为字符串 strftime/std::put_time 字符串解析成日期时间 strptime/std::get_time 时间结构转换:time_t->tm localtime:time_t->tm 时间结构转换:tm->time_t ...

chuqq
35分钟前
5
0
Apache Flink 进阶入门(二):Time 深度解析

前言 Flink 的 API 大体上可以划分为三个层次:处于最底层的 ProcessFunction、中间一层的 DataStream API 和最上层的 SQL/Table API,这三层中的每一层都非常依赖于时间属性。时间属性是流处...

大涛学长
36分钟前
4
0
创龙基于Xilinx Artix-7系列FPGA处理器

SOM-TLA7是一款由广州创龙基于Xilinx Artix-7系列FPGA自主研发的核心板,可配套广州创龙Artix-7开发板使用。核心板尺寸仅70mm*50mm,采用沉金无铅工艺的10层板设计,专业的PCB Layout保证信号...

Tronlong创龙
42分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部