• jquery.progressbar 进度条插件

    普通类
    • 支持
    • 批判
    • 提问
    • 解释
    • 补充
    • 删除
    • JQuery Progress Bar

    与常规插件一样，只要用选择器选择一个HTML元素后，直接调用插件的公开方法即可。它提供的公开方法名称为progressBar()。那么，当HTML页面上有一个id为progress1的元素时，可以这样初始化该控件： $("#progress1").progressBar(); 它的构造函数可以接收如下表所示的参数。

    方法及参数

    用途

    progressBar()

    按默认设置初始化一个进度条

    progressBar(persent)

    按默认设置初始化或更新一个进度条，设置进度条的百分比至persent%.

    progressBar(config)

    按config中指定的设置初始化一个进度条，百分比为0%。注意不要在初始化之后使用该方法来更改进度条的设置，否则可能引起显示不正常。

    progressBar(persent,config)

    按config中指定的设置初始化一个进度条，百分比为persent%。注意不要在初始化之后使用该方法来更改进度条的设置，否则可能引起显示不正常。

    其中，config参数是一个哈希结构对象，它包含了如下属性用于设置进度条的外观特性

    属性

    用途

    increment

    设置进度条每步的增长度。默认值为2。

    speed

    设置进度条初始化时动态滑动效果的速度。默认值为15。这个值越大，则滑动速度越慢。

    showText

    设置是否显示百分比标识文字。默认值为ture，即显示百分比文字标识。

    boxImage

    设置边框图片。默认值为images/progressbar.gif。如需定制边框，则修改该属性，指向要使用的图片即可。

    barImage

    设置进度标识图片。默认值为images/progressbg_green.gif。如需定制，则修改该属性，指向要使用的图片即可。这个图片分类两节，前半节用于标识完成进度，后半截用于标识剩余未完成进度。两节长度相等，且等于进度条的宽度。

    width

    设置进度条的宽度，这个值必须与barImage和boxImage所指向的图片相适应。默认值为120。

    height

    设置进度条的高度，这个值必须与barImage和boxImage所指向的图片相适应。默认值为12。

     

    与服务器的交互就不在这里讲了，就只是使用ajax从服务器获取进度值，然后用progressBar(persent)更新进度即可。

     

    这是jQuery用来显示进度条的插件，示例代码：

    $(document).ready(function() {
    $("#spaceused1").progressBar();
    $("#spaceused2").progressBar({ barImage: 'images/progressbg_yellow.gif'} );
    $("#spaceused3").progressBar({ barImage: 'images/progressbg_orange.gif', showText: false} );
    $("#spaceused4").progressBar(65, { showText: false, barImage: 'images/progressbg_red.gif'} );

    来源：http://blog.sina.com.cn/s/blog_a20cdaf00100z4c7.html

    • 标签：
    • 进度条
    • 设置
    • images
    • 标识
    • 图片
    • 默认值
    • progressbar
    • 初始化
    • barimage
    • 进度
  • 加入的知识群：
    学习元评论 (0条)

    评论为空
    聪明如你，不妨在这 发表你的看法与心得 ~



    登录之后可以发表学习元评论。
      
暂无内容~~
顶部