Progressbar 进度条组件

通过$.fn.progressbar.fn.defaults重写默认的defaults
进度条（progressbar）提供了一种显示长时间操作进度的反馈。进度可被更新以便让用户知道当前正在执行的操作。

不依赖其他组件

用法：
1、创建进度条Progressbar
1)进度条（Progressbar）组件可以从html标记创建或者编程创建。从标记创建更容易点，把‘easyui-progressbar’ class加到<div>标记
<div id = "p" class="easyui-progressbar" data-options="value:60" style="width:400px;" ></div>
2)使用javascript创建progressbar
<div id="p" style="width:400px;"></div>
$("#p").progressbar({
value : 60
});

获取或设置值
我们获取当前值并且给这个组件设置一个新值。
var value = $('#p').progressbar('getValue');
if(value < 100){
value += Math.floor(Math.random()*10);
$("#p").progressbar('setValue' , value);
}

2、属性
width string 设置进度条progressbar的宽度 auto
height number 组件的高度。该属性自版本1.3.2起可用 22
value number 百分比值 0
text string 显示在组件上的文本模板 {value}%

3、事件
onChange newValue，oldValue 当值改变时触发

4、方法
options none 返回选项（options）对象
resize width 调整组件尺寸
例子：
$("#p").progressbar('resize');//调整进度条为初始宽度
$("#p").progressbar('resize' , 350);//调整进度条为一个新的宽度
getValue none 返回当前的进度值
setValue value 设置一个新的进度值

<html>

<title>index</title>

<head>

<meta charset="UTF-8">

    <script type="text/javascript" src="easyui/jquery.min.js"></script>

    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>

    <script type="text/javascript" src="js/index.js"></script>

    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">

    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">

</head>

<body>

    <div style="width:400px;height:400px; margin-left:400px; margin-top:100px;">

        <!--

        <div class="easyui-progressbar" data-options="value:30" style="width:600px;"></div>

        -->

        <div id="box"></div>

    </div>

</body>

</html>

$(function(){

    $.fn.progressbar.defaults.value = 40;

    $("#box").progressbar({

        width : 600,

        height : 30,

        //value : 20,

        text : '${value}%',  // 默认是{value}%

        onChange : function(newValue , oldValue){

            console.log("new:" + newValue + " , old:" + oldValue);

        }

    });

    /*

    setTimeout(function(){

        $("#box").progressbar('setValue' , 70);

    },1000);

    */

    /*

    setInterval(function(){

        $("#box").progressbar('setValue' , $("#box").progressbar('getValue') + 5);

    },200);

    */

    //console.log($("#box").progressbar('options'));

    //$("#box").progressbar('resize' , 800);

    //$("#box").progressbar('resize'); //这个没看出什么效果

});

progressbar进度条组件的更多相关文章

  1. 第一百九十八节，jQuery EasyUI，ProgressBar(进度条)组件

    jQuery EasyUI,ProgressBar(进度条)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 ProgressBar(进度条) ...

  2. ProgressBar( 进度条) 组件

    一． 加载方式 //class 加载方式<div class="easyui-progressbar"data-options="value:60" st ...

  3. Android学习笔记(24):进度条组件ProgressBar及其子类

    ProgressBar作为进度条组件使用,它还派生了SeekBar(拖动条)和RatingBar(星级评分条). ProgressBar支持的XML属性: Attribute Name Related ...

  4. 详解Bootstrap进度条组件

    在网页中,进度条的效果并不少见,如:平分系统.加载状态等,进度条组件使用了css3的transition和animation属性来完成一些特效,这些特效在IE9及IE9以下版本.Firefox的老版本 ...

  5. 手把手教你实现一个 Vue 进度条组件！

    最近在个人的项目中,想对页面之间跳转的过程进行优化,想到了很多文档或 npm 等都用到的页面跳转进度条,于是便想自己去实现一个,特此记录. 来看下 npm 搜索组件时候的效果: so 下面咱们一起动手 ...

  6. EasyUI系列学习(八)-ProgressBar(进度条)

    一.创建组件 1.class加载 <div class="easyui-progressbar"></div> 2.js加载 <div id=&quo ...

  7. 基于Vue的事件响应式进度条组件

    写在前面 找了很多Vue 进度条组件!,都不包含拖拽和点击事件,input range倒是原生包含input和change事件,但是直接基于input range做进度条的话,样式部分需要做大量调整和 ...

  8. Android学习笔记- ProgressBar(进度条)

    本节引言: 本节给大家带来的是Android基本UI控件中的ProgressBar(进度条),ProgressBar的应用场景很多,比如 用户登录时,后台在发请求,以及等待服务器返回信息,这个时候会用 ...

  9. 【Android 应用开发】 自定义 圆形进度条 组件

    转载著名出处 : http://blog.csdn.net/shulianghan/article/details/40351487 代码下载 : -- CSDN 下载地址 : http://down ...

随机推荐

  1. Let Her Go

    转自:https://www.zhihu.com/question/29255072/answer/43962611 [MV]Passenger-Let Her Go-高清MV在线播放 版本一 Let ...

  2. 优雅的处理你的Java异常

    本文介绍 本文仅按照业务系统开发角度描述异常的一些处理看法.不涉及java的异常基础知识,可以自行查阅 <Java核心技术 卷I> 和 <java编程思想> 可以得到更多的基础 ...

  3. Ubuntu16.04多个版本GCC编译器的安装和切换【转】

    本文转载自:https://www.cnblogs.com/uestc-mm/p/7511063.html 这几天在配置交叉编译ARM开发板的linux内核的过程中碰到了很多问题,其中包括了GCC版本 ...

  4. win32和x86以及x64的区别

    本来是知道x86和x64的区别的. 今天突然在VS2008上看到一个win32的选项,一下子懵了,这是什么玩意. 百度之,发现答案 win32是指windows 32位的操作系统,顾名思义是支持32为 ...

  5. LeetCode——Integer Replacement

    Question Given a positive integer n and you can do operations as follow: If n is even, replace n wit ...

  6. Flume在企业大数据仓库架构中位置及功能

    Flume在企业大数据仓库架构中位置及功能 hadoop 数据仓库 flume 数据仓库架构 1.如下图所示,外部数据中,关系型数据库导入到HDFS用sqoop,由Nginx产生的文件实时监控用Flu ...

  7. Ignatius and the Princess III - 拆分数-动态规划（dp）

    ---恢复内容开始--- 2017-08-10 20:00:45 writer:pprp 拆分数: 把正整数n拆分成k个正整数之和的方案数: 问题转换:将1转化为2 1.把n表示成m个正整数之和的方案 ...

  8. vjudge-A-这是测试你会不会语言的模拟

    2017-07-14 18:13:35 writer:pprp 介绍:最基本用代码展示思想的一道题 题意如下; 他细细观察了自己的工作环境,发现整个工作室是一个N行M列的矩形布局,或者是因为屌丝的本性 ...

  9. Rancher在Catalog中 使用Helm Chart安装应用

    1. 首先在github上创建一个项目: 这里以我的项目为例:https://github.com/hankuikuide/cis-rancher-cattle 可以看出里出其实除了chart文件什么 ...

  10. ABP 源码分析汇总之 AutoMapper

    AutoMapper 是一个对象映射工具, 安装时只需要安装 如下即可: 有关于它的介绍,参考官网:http://automapper.org/ AutoMapper使用比较简单,还是直奔主题,看一下 ...