大家在开发基于web的网站或者web应用中，常常在AJAX调用的过程中需要提示用户并且展示相关的“加载中”效果，类似的UI设计也非常多，比如，当点击一个按钮后，在它的旁边显示一个 “加载中” 文字，或者是添加一个“旋转GIF”动画效果图。
在今天这个教程中，我们将介绍来一个Ladda UI概念设计，帮助你设计不同的基于按钮的加载中效果，并且整合到Bootstrap3框架里，如下：
它可以方便的帮助你通过按钮来提示用户相关的“加载中”状态，并且支持不同的加载效果，配置也很简单，只需要在对应的按钮上添加data-style属性，如下：
<div class="jspContainer" style="width:770px; height:30px"><div class="jspPane" style="padding:2px; width:748px; top:-4px"><ol class="linenums"><li class="L0"><span class="pln">data</span><span class="pun">-</span><span class="pln">style</span><span class="pun">=</span><span class="str">"slide-down"</span></li></ol></div></div>
在接下来的教程中，我们将介绍如何将Ladda UI设计和Bootstrap3整合起来，提供一个完整的“加载中”效果体验。
相关类库
首先导入相关Bootstrap和Ladda类库：
<div class="jspContainer" style="width:770px; height:150px"><div class="jspPane" style="padding:2px; width:748px; top:0px"><ol class="linenums"><li class="L0"><span class="tag"><script</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/javascript"</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"js/jquery-1.7.1.min.js"</span><span class="tag">></script></span></li><li class="L1"><span class="tag"><script</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/javascript"</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"js/jquery.jribbble.min.js"</span><span class="tag">></script></span></li><li class="L2"><span class="tag"><script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"js/bootstrap.min.js"</span><span class="tag">></script></span><span class="pln"> </span></li><li class="L3"><span class="tag"><script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"js/spin.js"</span><span class="tag">></script></span><span class="pln"> </span></li><li class="L4"><span class="tag"><script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"js/ladda.js"</span><span class="tag">></script></span><span class="pln"> </span></li></ol></div></div>
这里我们同时导入了Jdribbble插件来实现AJAX相关的效果（当然，作为数据提供，你可以使用任何其它服务，或者自己的AJAX），获取来自dribbble.com的最佳设计图片。
如果你不需要展示进度效果的话，基本上只需要在AJAX相关请求中添加如下代码即可完成javascript代码开发：
<div class="jspContainer" style="width:770px; height:60px"><div class="jspPane" style="padding:2px; width:748px; top:0px"><ol class="linenums"><li class="L0"><span class="kwd">var</span><span class="pln"> l </span><span class="pun">=</span><span class="pln"> </span><span class="typ">Ladda</span><span class="pun">.</span><span class="pln">create</span><span class="pun">(</span><span class="kwd">this</span><span class="pun">);</span></li><li class="L1"><span class="pln">l</span><span class="pun">.</span><span class="pln">start</span><span class="pun">();</span></li></ol></div></div>
当AJAX请求完成后，可以调用如下停止：
<div class="jspContainer" style="width:770px; height:30px"><div class="jspPane" style="padding:2px; width:748px; top:0px"><ol class="linenums"><li class="L0"><span class="pln">l</span><span class="pun">.</span><span class="pln">stop</span><span class="pun">();</span></li></ol></div></div>
即完整了整个“加载中”的过程，其中包含了“disabled”当前的按钮的操作，非常方便，提高了开发的效率。
当然，如果你需要提示用户当前进度的话，它内置了一个进度条，你可以使用如下代码来设置当前进度：
<div class="jspContainer" style="width:770px; height:30px"><div class="jspPane" style="padding:2px; width:748px; top:0px"><ol class="linenums"><li class="L0"><span class="pln">l</span><span class="pun">.</span><span class="pln">setProgress</span><span class="pun">(</span><span class="pln"> </span><span class="lit">0.1</span><span class="pln"> </span><span class="pun">);</span></li></ol></div></div>
Javacript书写完毕了，你需要在HTML中定义使用的加载中效果，如下：
<div class="jspContainer" style="width:770px; height:150px"><div class="jspPane" style="padding:2px; width:766px; left:0px; top:0px"><ol class="linenums"><li class="L0"><span class="pln"> </span><span class="tag"><button</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-info btn-lg ladda-button center-block"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"showmore"</span><span class="pln"> </span><span class="atn">title</span><span class="pun">=</span><span class="atv">"显示更多前端代码回放"</span><span class="pln"> </span><span class="atn">data-style</span><span class="pun">=</span><span class="atv">"slide-down"</span><span class="tag">></span></li><li class="L1"><span class="pln"> </span><span class="tag"><span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"ladda-label"</span><span class="tag">></span></li><li class="L2"><span class="pln"> 更多设计</span></li><li class="L3"><span class="pln"> </span><span class="tag"></span></span></li><li class="L4"><span class="pln"> </span><span class="tag"></button></span></li></ol></div></div>
这里我们定义使用
<div class="jspContainer" style="width:770px; height:30px"><div class="jspPane" style="padding:2px; width:748px; top:0px"><ol class="linenums"><li class="L0"><span class="pln">data</span><span class="pun">-</span><span class="pln">style</span><span class="pun">=</span><span class="str">"slide-down"</span></li></ol></div></div>
来设置需要的加载中效果，这个效果是设置一个向下幻灯的切换效果，更多的效果，请访问：http://lab.hakim.se/ladda/
相关的CSS
<div class="jspContainer" style="width:770px; height:90px"><div class="jspPane" style="padding:2px; width:748px; top:0px"><ol class="linenums"><li class="L0"><span class="pln"> </span><span class="tag"><link</span><span class="pln"> </span><span class="atn">rel</span><span class="pun">=</span><span class="atv">"stylesheet"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/css"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"css/bootstrap.min.css"</span><span class="pln"> </span><span class="tag">/></span></li><li class="L1"><span class="pln"> </span><span class="tag"><link</span><span class="pln"> </span><span class="atn">rel</span><span class="pun">=</span><span class="atv">"stylesheet"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/css"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"css/ladda-themeless.css"</span><span class="pln"> </span><span class="tag">/></span></li><li class="L2"><span class="pln"> </span><span class="tag"><link</span><span class="pln"> </span><span class="atn">rel</span><span class="pun">=</span><span class="atv">"stylesheet"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/css"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"css/gbtags.css"</span><span class="pln"> </span><span class="tag">/></span></li></ol></div></div>
这里我们引用了相关的CSS，以保证Ladda可以正常的和Bootstrap3一起正常工作。
完整代码
如果你曾阅读过相关教程：Bootstrap3和jQuery实现响应式iOS/Android风格滚动到页顶（底）弹跳效果 ，那么以下代码应该非常容易理解：
<div class="jspContainer" style="width:770px; height:1410px"><div class="jspPane" style="padding:2px; width:766px; left:0px; top:-12px"><ol class="linenums"><li class="L0"><span class="pln"> $</span><span class="pun">(</span><span class="pln">document</span><span class="pun">).</span><span class="pln">ready</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">(){</span></li><li class="L1"><span class="pln"> </span><span class="com">//定义相关变量</span></li><li class="L2"><span class="pln"> </span><span class="kwd">var</span><span class="pln"> $wallcontent </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'#wallcontent'</span><span class="pun">),</span><span class="pln"> pagenum</span><span class="pun">=</span><span class="lit">1</span><span class="pun">,</span><span class="pln"> $showmore </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'#showmore'</span><span class="pun">);</span></li><li class="L3"><span class="pln"> </span></li><li class="L4"><span class="pln"> </span><span class="kwd">function</span><span class="pln"> loadshots</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span></li><li class="L5"><span class="pln"> </span><span class="kwd">var</span><span class="pln"> l </span><span class="pun">=</span><span class="pln"> </span><span class="typ">Ladda</span><span class="pun">.</span><span class="pln">create</span><span class="pun">(</span><span class="kwd">this</span><span class="pun">);</span></li><li class="L6"><span class="pln"> l</span><span class="pun">.</span><span class="pln">start</span><span class="pun">();</span></li><li class="L7"><span class="pln"> l</span><span class="pun">.</span><span class="pln">setProgress</span><span class="pun">(</span><span class="pln"> </span><span class="lit">0.1</span><span class="pln"> </span><span class="pun">);</span></li><li class="L8"><span class="pln"> </span></li><li class="L9"><span class="pln"> $showmore</span><span class="pun">.</span><span class="pln">find</span><span class="pun">(</span><span class="str">'.ladda-label'</span><span class="pun">).</span><span class="pln">text</span><span class="pun">(</span><span class="str">'loading...'</span><span class="pun">);</span></li><li class="L0"><span class="pln"> </span></li><li class="L1"><span class="pln"> </span><span class="com">//调用jdribbble相关API获取远程数据内容</span></li><li class="L2"><span class="pln"> $</span><span class="pun">.</span><span class="pln">jribbble</span><span class="pun">.</span><span class="pln">getShotsByList</span><span class="pun">(</span><span class="str">'popular'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">data</span><span class="pun">){</span></li><li class="L3"><span class="pln"> </span></li><li class="L4"><span class="pln"> </span><span class="kwd">var</span><span class="pln"> items </span><span class="pun">=</span><span class="pln"> </span><span class="pun">[];</span></li><li class="L5"><span class="pln"> </span></li><li class="L6"><span class="pln"> $</span><span class="pun">.</span><span class="pln">each</span><span class="pun">(</span><span class="pln">data</span><span class="pun">.</span><span class="pln">shots</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">i</span><span class="pun">,</span><span class="pln"> shot</span><span class="pun">){</span></li><li class="L7"><span class="pln"> items</span><span class="pun">.</span><span class="pln">push</span><span class="pun">(</span><span class="str">'<article class="col-md-2 col-sm-3 col-xs-4">'</span><span class="pun">);</span></li><li class="L8"><span class="pln"> items</span><span class="pun">.</span><span class="pln">push</span><span class="pun">(</span><span class="str">'<a href="'</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> shot</span><span class="pun">.</span><span class="pln">url </span><span class="pun">+</span><span class="pln"> </span><span class="str">'" target="_blank" class="linkc">'</span><span class="pun">);</span></li><li class="L9"><span class="pln"> items</span><span class="pun">.</span><span class="pln">push</span><span class="pun">(</span><span class="str">'<img class="img-responsive" src="'</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> shot</span><span class="pun">.</span><span class="pln">image_teaser_url </span><span class="pun">+</span><span class="pln"> </span><span class="str">'" alt="'</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> shot</span><span class="pun">.</span><span class="pln">title </span><span class="pun">+</span><span class="pln"> </span><span class="str">'">'</span><span class="pun">);</span></li><li class="L0"><span class="pln"> items</span><span class="pun">.</span><span class="pln">push</span><span class="pun">(</span><span class="str">'</a>'</span><span class="pun">);</span></li><li class="L1"><span class="pln"> items</span><span class="pun">.</span><span class="pln">push</span><span class="pun">(</span><span class="str">'</article>'</span><span class="pun">);</span></li><li class="L2"><span class="pln"> l</span><span class="pun">.</span><span class="pln">setProgress</span><span class="pun">(</span><span class="lit">0.1</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> </span><span class="lit">0.02</span><span class="pun">*</span><span class="pln">i</span><span class="pun">);</span></li><li class="L3"><span class="pln"> </span><span class="pun">});</span></li><li class="L4"><span class="pln"> </span></li><li class="L5"><span class="pln"> </span><span class="kwd">var</span><span class="pln"> newEls </span><span class="pun">=</span><span class="pln"> items</span><span class="pun">.</span><span class="pln">join</span><span class="pun">(</span><span class="str">''</span><span class="pun">),</span><span class="pln"> tmpcontent </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="pln">newEls</span><span class="pun">);</span></li><li class="L6"><span class="pln"> </span></li><li class="L7"><span class="pln"> l</span><span class="pun">.</span><span class="pln">setProgress</span><span class="pun">(</span><span class="pln"> </span><span class="lit">0.9</span><span class="pln"> </span><span class="pun">);</span></li><li class="L8"><span class="pln"> </span><span class="com">//以上代码生成了需要显示的dirbbble设计内容，下面代码中我们将这些内容添加到HTML容器中</span></li><li class="L9"><span class="pln"> $wallcontent</span><span class="pun">.</span><span class="pln">append</span><span class="pun">(</span><span class="pln">tmpcontent</span><span class="pun">);</span></li><li class="L0"><span class="pln"> </span></li><li class="L1"><span class="pln"> $showmore</span><span class="pun">.</span><span class="pln">find</span><span class="pun">(</span><span class="str">'.ladda-label'</span><span class="pun">).</span><span class="pln">text</span><span class="pun">(</span><span class="str">'更多设计'</span><span class="pun">);</span></li><li class="L2"><span class="pln"> </span></li><li class="L3"><span class="pln"> l</span><span class="pun">.</span><span class="pln">setProgress</span><span class="pun">(</span><span class="pln"> </span><span class="lit">1</span><span class="pln"> </span><span class="pun">);</span></li><li class="L4"><span class="pln"> l</span><span class="pun">.</span><span class="pln">stop</span><span class="pun">();</span></li><li class="L5"><span class="pln"> </span></li><li class="L6"><span class="pln"> </span><span class="pun">},</span><span class="pln"> </span><span class="pun">{</span><span class="pln">page</span><span class="pun">:</span><span class="pln">pagenum</span><span class="pun">,</span><span class="pln"> per_page</span><span class="pun">:</span><span class="lit">24</span><span class="pun">});</span></li><li class="L7"><span class="pln"> </span></li><li class="L8"><span class="pln"> pagenum</span><span class="pun">++;</span></li><li class="L9"><span class="pln"> </span><span class="pun">}</span></li><li class="L0"><span class="pln"> </span></li><li class="L1"><span class="pln"> </span><span class="com">//绑定方法到加载更多按钮</span></li><li class="L2"><span class="pln"> $showmore</span><span class="pun">.</span><span class="pln">bind</span><span class="pun">(</span><span class="str">'click'</span><span class="pun">,</span><span class="pln"> loadshots</span><span class="pun">);</span></li><li class="L3"><span class="pln"> </span></li><li class="L4"><span class="pln"> $showmore</span><span class="pun">.</span><span class="pln">trigger</span><span class="pun">(</span><span class="str">'click'</span><span class="pun">);</span></li></ol></div></div>
以上代码，主要通过点击“更多设计”来获取最受欢迎的dribbble设计作品，这里我们通过绑定click方法来处理事件，并且在处理过程中，使用进度条来指示当前的加载进度。
在附带的四个在线演示中，我们调用了不同的“加载中"特效，大家可以运行查看效果。
如果对于代码有任何问题，请在这里给我留言，我会给您解答，感谢阅读！
了解代码是如何一行一行编写出来的，请访问如下地址查看：
1259
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
