AmazeUI 加载进度条的实现示例_html5

上一篇: 前后端结合实现amazeUI分页效果下一篇:AmazeUI图片轮播效果的示例代码

AmazeUI 加载进度条的实现示例

发布时间：2022-04-13 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了AmazeUI 加载进度条的实现示例，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

本文主要介绍了amazeUI 加载进度条的实现示例，分享给大家，具体如下:

<!doctyPE htML>
<html class="no-js">
<head>
<;meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, inITial-scale=1">
<title>加载进度条</title>
<link rel="stylesheet" href="assets/css/amazeui.min.css">
<!--[if (gte IE 9)|!(IE)]><!-->
<script src="assets/js/jquery.min.js"></script>
<!--<![endif]-->
<!--[if lte IE 8 ]>
<script src="assets/ie8/jquery.min.js"></script>
<script src="assets/ie8/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->
<script src="assets/js/amazeui.min.js"></script>
</head>
<body style="margin: 10px;">
<!--基本使用-->
<button id="np-s" class="am-BTn am-btn-Primary">$.AMUI.PRogress.start();</button>
<button id="np-d" class="am-btn am-btn-success">$.AMUI.progress.done();</button>
<script>
$(function(){
  VAR progress = $.AMUI.progress;
  $('#np-s').on('click', function() {
    progress.start();
  });
  $('#np-d').on('click', function() {
    progress.done();
  });
}); 
</script>
<br><br>
<!--高级使用-->
<button id="np-set" class="am-btn am-btn-primary">$.AMUI.progress.set(0.4);</button>
<button id="np-inc" class="am-btn am-btn-warning">$.AMUI.progress.inc();</button>
<button id="np-fd" class="am-btn am-btn-success">$.AMUI.progress.done(true);</button>
<button id="np-status" class="am-btn am-btn-danger">$.AMUI.progress.status;</button>
<script>
$(function(){
  var progress = $.AMUI.progress;
  $('#np-set').on('click', function() {
    progress.set(0.4);
  });
  $('#np-inc').on('click', function() {
    progress.inc();
  });
  $('#np-fd').on('click', function() {
    progress.done(true);
  });
  $('#np-status').on('click', function() {
    $(this).text('Status: ' + progress.status);
  });
}); 
</script>
</body>
</html> 
@H_406_4@

效果图：

到此这篇关于AmazeUI 加载进度条的实现示例的文章就介绍到这了,更多相关AmazeUI 加载进度条内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本宝典！

脚本宝典总结

以上是脚本宝典为你收集整理的AmazeUI 加载进度条的实现示例全部内容，希望文章能够帮你解决AmazeUI 加载进度条的实现示例所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：AmazeUI

上一篇: 前后端结合实现amazeUI分页效果下一篇:AmazeUI图片轮播效果的示例代码

猜你在找的html5相关文章

关于移动端h5开发相关内容总结 2022-05-17
html5教程-学表单的第二天 2018-12-10
html5教程-HTML5浏览器支持 2018-12-10
html5教程-HTML5智能表单 2018-12-10
html5教程-微信H5使用resLoader实现加载页效果 2018-12-10
html5教程-day01-初级-JS0-热身运动、JS入门教程 2018-12-10
html5教程-html5shiv.js和respond.min.js 2018-12-10
html5教程-不同浏览器对于html5 audio标签和音频格式的兼容性 2018-12-10
html5教程-使用Html5实现手风琴案例 2018-12-10
html5教程-html5笔记 2018-12-10