使用Bootstrap3和Ladda UI实现的多种按钮“加载中”效果体验
在线演示 在线演示 大家在开发基于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方法来处理事件,并且在处理过程中,使用进度条来指示当前的加载进度。 在附带的四个在线演示中,我们调用了不同的“加载中"特效,大家可以运行查看效果。 如果对于代码有任何问题,请在这里给我留言,我会给您解答,感谢阅读! 了解代码是如何一行一行编写出来的,请访问如下地址查看:
阅读全文:使用Bootstrap3和Ladda UI实现的多种按钮“加载中”效果体验 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |