本文小编为大家详细介绍“html5的AmazeUI框架中如何实现加载进度条”,内容详细,步骤清晰,细节处理妥当,希望这篇“html5的AmazeUI框架中如何实现加载进度条”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。

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

<!doctypehtml><htmlclass="no-js"><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="description"content=""><metaname="keywords"content=""><metaname="viewport"content="width=device-width,initial-scale=1"><title>加载进度条</title><linkrel="stylesheet"href="assets/css/amazeui.min.css"><!--[if(gteIE9)|!(IE)]><!--><scriptsrc="assets/js/jquery.min.js"></script><!--<![endif]--><!--[iflteIE8]><scriptsrc="assets/ie8/jquery.min.js"></script><scriptsrc="assets/ie8/modernizr.js"></script><scriptsrc="assets/js/amazeui.ie8polyfill.min.js"></script><![endif]--><scriptsrc="assets/js/amazeui.min.js"></script></head><body><!--基本使用--><buttonid="np-s"class="am-btnam-btn-primary">$.AMUI.progress.start();</button><buttonid="np-d"class="am-btnam-btn-success">$.AMUI.progress.done();</button><script>$(function(){varprogress=$.AMUI.progress;$('#np-s').on('click',function(){progress.start();});$('#np-d').on('click',function(){progress.done();});});</script><br><br><!--高级使用--><buttonid="np-set"class="am-btnam-btn-primary">$.AMUI.progress.set(0.4);</button><buttonid="np-inc"class="am-btnam-btn-warning">$.AMUI.progress.inc();</button><buttonid="np-fd"class="am-btnam-btn-success">$.AMUI.progress.done(true);</button><buttonid="np-status"class="am-btnam-btn-danger">$.AMUI.progress.status;</button><script>$(function(){varprogress=$.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>

读到这里,这篇“html5的AmazeUI框架中如何实现加载进度条”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注亿速云行业资讯频道。