大家在开发基于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方法来处理事件,并且在处理过程中,使用进度条来指示当前的加载进度。
![](http://www.gbtags.com/gb/networks/uploadimgthumb/9d9614ff-6951-43f4-9285-3a5299c36ba6.jpg)
在附带的四个在线演示中,我们调用了不同的“加载中"特效,大家可以运行查看效果。
如果对于代码有任何问题,请在这里给我留言,我会给您解答,感谢阅读!
了解代码是如何一行一行编写出来的,请访问如下地址查看: