www.5197.com-澳门新蒲京娱乐场官网

热门关键词: www.5197.com,澳门新蒲京娱乐场官网

使用Bootstrap3和Ladda UI实现的多种按钮“加载中

关于Bootstrap,相信大家一定不陌生,它已经成为现在主流产业的一个重要工具,Bootstrap提供了优雅的HTML和CSS规范,它基于jQuery框架开发的,它在jQuery框架的基础上进行了更为个性化和人性化的完善,形成一套自己独有的网站风格,并兼容大部分jQuery插件。今天,我们带来6款Bootstrap实现的几款小应用,希望可以对你们有所帮助!1. 移动为先的Bootstrap3Bootstrap3已经发布好几周了, 现在该是我们看看Bootstrap有什么新鲜内容的时候了。首先,最重要的一个改变就是支持响应式网站设计,原来的响应式模块已经去掉了。 现在从内核,Bootstrap3就支持响应式设计,不仅仅如此,更深入的在于,整合了Mobile First的设计思想,即移动为先,这个概念最初由Luke wrobleski在他的博客提出。在这篇文章中,我们将分享一些BT3的新内容,希望大家喜欢!在线演示2. 使用Bootstrap3和Ladda UI实现的多种按钮“加载中”效果体验大家在开发基于web的网站或者web应用中,常常在AJAX调用的过程中需要提示用户并且展示相关的“加载中”效果,类似的UI设计也非常多,比如,当点击一个按钮后,在它的旁边显示一个 “加载中” 文字,或者是添加一个“旋转GIF”动画效果图。在线演示1 / 在线演示2 / 在线演示33. 基于bootstrap的纯CSS多级菜单 - BootMBootM是基于bootstrap开发的一款多级菜单实现。其主要特性包括:无JS,基于bootstrap,响应式设计,无层次限制,基于文本的图标。在线演示4. Bootstrap3和jQuery实现响应式iOS/Android风格滚动到页顶弹跳效果如果大家使用iOS或者android相关移动平台的话,对于页面滑动到最底端后的弹跳效果肯定不会陌生,在这篇教程中,我们将使用最新版的Bootstrap3和jQuery来生成一个类似移动设备app的web页面效果,支持各种设备的响应式展示。在线演示5. Bootstrap富文本编辑器bootstrap-wysiwyg的使用使用其实很简单的,倒入bootstrap相关CSS,JS,jQuery,还有bootstrap-wysiwyg的JS。在线演示6. Bootstrap3的一个landing page非常适合你做产品推广或者app推广,支持响应式,并且可以自行扩展开发!在线演示原文来自:分享六个基于Bootstrap的实用开发教程和模板演示

澳门新蒲京娱乐场官网 1

澳门新蒲京娱乐场官网 2

澳门新蒲京娱乐场官网 3

在线演示

相关的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">  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /></li><li class="L1">  <link rel="stylesheet" type="text/css" href="css/ladda-themeless.css" /></li><li class="L2">  <link rel="stylesheet" type="text/css" href="css/gbtags.css" /></li></ol></div></div>

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

在接下来的教程中,我们将介绍如何将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"><script type="text/javascript" src="js/jquery-1.7.1.min.js"></script></li><li class="L1"><script type="text/javascript" src="js/jquery.jribbble.min.js"></script></li><li class="L2"><script src="js/bootstrap.min.js"></script> </li><li class="L3"><script src="js/spin.js"></script> </li><li class="L4"><script src="js/ladda.js"></script> </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">var l = Ladda.create(this);</li><li class="L1">l.start();</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">l.stop();</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">l.setProgress( 0.1 );</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">   <button type="button" class="btn btn-info btn-lg ladda-button center-block" id="showmore" title="显示更多前端代码回放" data-style="slide-down"></li><li class="L1">     class="ladda-label"></li><li class="L2">     更多设计</li><li class="L3">    </li><li class="L4">   </button></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">data-style="slide-down"</li></ol></div></div>

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

<div class="jspContainer" style="width:770px; height:30px"><div class="jspPane" style="padding:2px; width:748px; top:-4px"><ol class="linenums"><li class="L0">data-style="slide-down"</li></ol></div></div>

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

在今天这个教程中,我们将介绍来一个Ladda UI概念设计,帮助你设计不同的基于按钮的加载中效果,并且整合到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">   $(document).ready(function(){</li><li class="L1">     //定义相关变量</li><li class="L2">     var $wallcontent = $('#wallcontent'), pagenum=1,  $showmore = $('#showmore');</li><li class="L3">     </li><li class="L4">     function loadshots() {</li><li class="L5">    var l = Ladda.create(this);</li><li class="L6">    l.start();</li><li class="L7">    l.setProgress( 0.1 );</li><li class="L8">    </li><li class="L9">    $showmore.find('.ladda-label').text('loading...');</li><li class="L0">    </li><li class="L1">    //调用jdribbble相关API获取远程数据内容</li><li class="L2">    $.jribbble.getShotsByList('popular', function(data){</li><li class="L3">    </li><li class="L4">      var items = [];</li><li class="L5">      </li><li class="L6">      $.each(data.shots, function(i, shot){</li><li class="L7">     items.push('<article class="col-md-2 col-sm-3 col-xs-4">');</li><li class="L8">     items.push('<a href="'   shot.url   '" target="_blank" class="linkc">');</li><li class="L9">     items.push('<img class="img-responsive" src="'   shot.image_teaser_url   '" alt="'   shot.title   '">');</li><li class="L0">     items.push('</a>');</li><li class="L1">     items.push('</article>');</li><li class="L2">     l.setProgress(0.1   0.02*i);</li><li class="L3">      });</li><li class="L4">      </li><li class="L5">      var newEls = items.join(''), tmpcontent = $(newEls);</li><li class="L6">      </li><li class="L7">      l.setProgress( 0.9 );</li><li class="L8">      //以上代码生成了需要显示的dirbbble设计内容,下面代码中我们将这些内容添加到HTML容器中</li><li class="L9">      $wallcontent.append(tmpcontent);</li><li class="L0">      </li><li class="L1">      $showmore.find('.ladda-label').text('更多设计');</li><li class="L2">      </li><li class="L3">      l.setProgress( 1 );</li><li class="L4">      l.stop();</li><li class="L5">    </li><li class="L6">    }, {page:pagenum, per_page:24});</li><li class="L7">    </li><li class="L8">    pagenum  ;</li><li class="L9">     }</li><li class="L0">     </li><li class="L1">     //绑定方法到加载更多按钮</li><li class="L2">     $showmore.bind('click', loadshots);</li><li class="L3">     </li><li class="L4">     $showmore.trigger('click');</li></ol></div></div>

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

澳门新蒲京娱乐场官网 4

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

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

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

前端代码回放:

版权声明:本文为博主原创文章,未经博主允许不得转载。


目录(?)[ ]

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

本文由www.5197.com发布于web前端,转载请注明出处:使用Bootstrap3和Ladda UI实现的多种按钮&ldquo;加载中