当前位置：文江博客话题详情

使用 jQuery 的圆形进度指示器

发布于 2024-12-08 00:12:11 字数 306 浏览 0 评论 0原文

我需要圆形进度指示器。我应该如何实施这个？

我正在寻找的是 jQuery UI 在其规划页面中的内容，但尚未实现。我只是好奇以前是否有人实现过这个。请参阅下图中的第 6 项。

alt text

http://wiki.jqueryui.com/ProgressIndicator

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

π浅易 2024-12-15 00:12:11

比如，其中之一？你不需要一个插件。只需根据需要添加 .show() 和 .hide() GIF（或者将其插入到 DOM 中，无论您的情况如何）。

回复收藏 0 原文

叹倦 2024-12-15 00:12:11

不是 jQuery，但您可能想看看 Raphaël javascript 库，并在-特别是极地时钟示例和“arc”自定义属性。我之前曾使用 Raphaël 和 jQuery 一起生成一些静态圆形进度条 - 它工作得非常好。

回复收藏 0 原文

卸妝后依然美 2024-12-15 00:12:11

您可以使用 jQuery 来滑动背景位置，并使用或为其创建适当的 css 精灵图像表。

当然，您需要有 100 个精灵单元，然后您需要将背景位置坐标列表编译为多维数组/表格/字典。

progressMeterSpriteCoords = [
 {x: 0, y: 0},      //0%
 {x: -16, y: 0},    //1%
 {x: -32, y: 0},    //2%
  ... etc etc..
 {x: -320, y: -0},  //19%
 {x: 0, y: -16},    //20%
 {x: -16, y: -16},  //21%
 {x: -32, y: -16},  //22%
  ... etc etc..
 {x: -320, y: -16}, //29%
  ... etc etc..
 {x: -320, y: -320} //99%
]

You could use jQuery to slide the background position around, and use or create the appropriate css sprite image table for it.

of course you'd need to have 100 sprite cells, and then you'd need to compile a list of background position co-ords into an multi-dimensional array/table/dictionary.

progressMeterSpriteCoords = [
 {x: 0, y: 0},      //0%
 {x: -16, y: 0},    //1%
 {x: -32, y: 0},    //2%
  ... etc etc..
 {x: -320, y: -0},  //19%
 {x: 0, y: -16},    //20%
 {x: -16, y: -16},  //21%
 {x: -32, y: -16},  //22%
  ... etc etc..
 {x: -320, y: -16}, //29%
  ... etc etc..
 {x: -320, y: -320} //99%
]

回复收藏 0 原文

倾城花音 2024-12-15 00:12:11

你在加载什么？一个基本的例子是：

<div id="loading"></div>
<a href="javascript:void(0);" id="load">Load!</a>

<script type="text/javascript">
    $('#load').click(function(){ // click event on the load link
        $('#loading').html('<img src="/path/to/animation.gif" />'); // display a loading animation where the content goes
        $.get('/file/to/load.php', function(data) { // request content to be displayed
            $('#loading').html(data); // display content
        });
    });
</script>

干杯

What are you loading? A basic example would be:

<div id="loading"></div>
<a href="javascript:void(0);" id="load">Load!</a>

<script type="text/javascript">
    $('#load').click(function(){ // click event on the load link
        $('#loading').html('<img src="/path/to/animation.gif" />'); // display a loading animation where the content goes
        $.get('/file/to/load.php', function(data) { // request content to be displayed
            $('#loading').html(data); // display content
        });
    });
</script>

Cheers

回复收藏 0 原文

~没有更多了~