设为首页收藏本站
天天打卡

 找回密码
 立即注册
搜索
查看: 114|回复: 10

AmazeUI 加载进度条的实现示例

[复制链接]

4

主题

45

回帖

159

积分

注册会员

积分
159
发表于 2024-4-20 10:29:10 | 显示全部楼层 |阅读模式
本文主要介绍了AmazeUI 加载进度条的实现示例,分享给大家,具体如下:
  1. <!doctype html>
  2. <html class="no-js">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="description" content="">
  7. <meta name="keywords" content="">
  8. <meta name="viewport" content="width=device-width, initial-scale=1">
  9. <title>加载进度条</title>
  10. <link rel="stylesheet" href="assets/css/amazeui.min.css">
  11. <!--[if (gte IE 9)|!(IE)]><!-->
  12. <script src="assets/js/jquery.min.js"></script>
  13. <!--<![endif]-->
  14. <!--[if lte IE 8 ]>
  15. <script src="assets/ie8/jquery.min.js"></script>
  16. <script src="assets/ie8/modernizr.js"></script>
  17. <script src="assets/js/amazeui.ie8polyfill.min.js"></script>
  18. <![endif]-->
  19. <script src="assets/js/amazeui.min.js"></script>
  20. </head>
  21. <body style="margin: 10px;">
  22. <!--基本使用-->
  23. <button id="np-s" class="am-btn am-btn-primary">$.AMUI.progress.start();</button>
  24. <button id="np-d" class="am-btn am-btn-success">$.AMUI.progress.done();</button>
  25. <script>
  26. $(function(){
  27.   var progress = $.AMUI.progress;
  28.   $('#np-s').on('click', function() {
  29.     progress.start();
  30.   });
  31.   $('#np-d').on('click', function() {
  32.     progress.done();
  33.   });
  34. });
  35. </script>
  36. <br><br>
  37. <!--高级使用-->
  38. <button id="np-set" class="am-btn am-btn-primary">$.AMUI.progress.set(0.4);</button>
  39. <button id="np-inc" class="am-btn am-btn-warning">$.AMUI.progress.inc();</button>
  40. <button id="np-fd" class="am-btn am-btn-success">$.AMUI.progress.done(true);</button>
  41. <button id="np-status" class="am-btn am-btn-danger">$.AMUI.progress.status;</button>
  42. <script>
  43. $(function(){
  44.   var progress = $.AMUI.progress;
  45.   $('#np-set').on('click', function() {
  46.     progress.set(0.4);
  47.   });
  48.   $('#np-inc').on('click', function() {
  49.     progress.inc();
  50.   });
  51.   $('#np-fd').on('click', function() {
  52.     progress.done(true);
  53.   });
  54.   $('#np-status').on('click', function() {
  55.     $(this).text('Status: ' + progress.status);
  56.   });
  57. });
  58. </script>
  59. </body>
  60. </html>
复制代码
效果图:

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


免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

×

1

主题

56

回帖

134

积分

注册会员

积分
134
发表于 2024-6-1 18:43:18 | 显示全部楼层
说得太好了,完全同意!

0

主题

60

回帖

126

积分

注册会员

积分
126
发表于 2024-6-5 07:58:55 | 显示全部楼层
嘎嘎嘎嘎嘎嘎嘎
  • 打卡等级:无名新人
  • 打卡总天数:1
  • 打卡月天数:0
  • 打卡总奖励:20
  • 最近打卡:2024-04-26 21:44:15

2

主题

62

回帖

187

积分

注册会员

积分
187
发表于 2024-6-11 20:00:59 | 显示全部楼层
谢谢你的提醒,我会注意的。

0

主题

51

回帖

103

积分

注册会员

积分
103
发表于 2024-6-19 15:02:12 | 显示全部楼层
谢谢你的提醒,我会注意的。

0

主题

43

回帖

87

积分

注册会员

积分
87
发表于 2024-7-8 00:47:58 | 显示全部楼层
谢谢你的提醒,我会注意的。

2

主题

29

回帖

103

积分

注册会员

积分
103
发表于 2024-9-10 12:03:08 | 显示全部楼层
非常感谢你的观点,让我受益良多!

0

主题

42

回帖

83

积分

注册会员

积分
83
发表于 2024-9-11 10:35:41 | 显示全部楼层
看了LZ的帖子,我只想说一句很好很强大!

3

主题

53

回帖

149

积分

注册会员

积分
149
发表于 2024-9-11 13:30:39 | 显示全部楼层
你的信息来源是?我想了解更多。

0

主题

71

回帖

143

积分

注册会员

积分
143
发表于 2024-9-11 20:53:10 | 显示全部楼层
确实牛逼
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|小黑屋|爱云论坛 - d.taiji888.cn - 技术学习 免费资源分享 ( 蜀ICP备2022010826号 )|天天打卡

GMT+8, 2024-11-15 11:30 , Processed in 0.093301 second(s), 27 queries .

Powered by i云网络 Licensed

© 2023-2028 正版授权

快速回复 返回顶部 返回列表