前言

使用$.fn.progressbar.defaults重写默认值对象。下载该插件翻译源码

进度条提供了一个反馈显示一个长时间运行的操作进展。可以更新的进展条，让用户知道当前正在执行操作。

源码

/**

 * jQuery EasyUI 1.3.2

 *

 *翻译：qq 1364386878 进度条

 */

(function ($) {

    //初始化

    function init(target) {

        $(target).addClass("progressbar");

        $(target).html("<div class=\"progressbar-text\"></div><div class=\"progressbar-value\"><div class=\"progressbar-text\"></div></div>");

        return $(target);

    };

    //调整大小

    function _resize(jq, width) {

        var options = $.data(jq, "progressbar").options;

        var bar = $.data(jq, "progressbar").bar;

        if (width) {

            options.width = width;

        }

        bar._outerWidth(options.width)._outerHeight(options.height);

        bar.find("div.progressbar-text").width(bar.width());

        bar.find("div.progressbar-text,div.progressbar-value").css({ height: bar.height() + "px", lineHeight: bar.height() + "px" });

    };

    //实例化进度条组件

    $.fn.progressbar = function (target, parm) {

        if (typeof target == "string") {

            var method = $.fn.progressbar.methods[target];

            if (method) {

                return method(this, parm);

            }

        }

        target = target || {};

        return this.each(function () {

            var progressbar = $.data(this, "progressbar");

            if (progressbar) {

                $.extend(progressbar.options, target);

            } else {

                progressbar = $.data(this, "progressbar",

                    {

                        options: $.extend({}, $.fn.progressbar.defaults,

                          $.fn.progressbar.parseOptions(this), target),

                        bar: init(this)

                    });

            }

            $(this).progressbar("setValue", progressbar.options.value);

            _resize(this);

        });

    };

    //默认方法

    $.fn.progressbar.methods = {

        //返回属性对象

        options: function (jq) {

            return $.data(jq[0], "progressbar").options;

        },

        //组件大小。

        resize: function (jq, width) {

            return jq.each(function () {

                _resize(this, width);

            });

        },

        //返回当前进度值

        getValue: function (jq) {

            return $.data(jq[0], "progressbar").options.value;

        },

        //设置一个新的进度值

        setValue: function (jq, value) {

            if (value < 0) {

                value = 0;

            }

            if (value > 100) {

                value = 100;

            }

            return jq.each(function () {

                var options = $.data(this, "progressbar").options;

                var text = options.text.replace(/{value}/, value);

                var oldVal = options.value;

                options.value = value;

                $(this).find("div.progressbar-value").width(value + "%");

                $(this).find("div.progressbar-text").html(text);

                if (oldVal != value) {

                    options.onChange.call(this, value, oldVal);

                }

            });

        }

    };

    //解析器

    $.fn.progressbar.parseOptions = function (target) {

        return $.extend({}, $.parser.parseOptions(target,

            ["width", "height", "text", { value: "number" }]));

    };

    //默认属性和事件

    $.fn.progressbar.defaults = {

        width: "auto",//设置进度条宽度

        height: 22,//设置进度条gao度

        value: 0,//百分比值

        text: "{value}%",//要在组件上显示的文本模板

        onChange: function (newValue, oldValue) {

        }

    };

})(jQuery);

示例代码

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Basic ProgressBar - jQuery EasyUI Demo</title>

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

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

    <link rel="stylesheet" type="text/css" href="../demo.css">

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

    <script src="../../plugins2/jquery.parser.js"></script>

    <script src="../../plugins2/jquery.progressbar.js"></script>

</head>

<body>

    <h2>Basic ProgressBar</h2>

    <div class="demo-info">

        <div class="demo-tip icon-tip"></div>

        <div>Click the button below to show progress information.</div>

    </div>

    <div style="margin:10px 0;">

        <a href="#" class="easyui-linkbutton" onclick="start()">Start</a>

    </div>

    <div id="p" class="easyui-progressbar" style="width:400px;"></div>

    <script>

        function start(){

            var value = $('#p').progressbar('getValue');

            if (value < 100){

                value += Math.floor(Math.random() * 10);

                $('#p').progressbar('setValue', value);

                setTimeout(arguments.callee, 200);

            }

        };

    </script>

</body>

</html>

插件效果

easyui源码翻译1.32---ProgressBar（进度条）的更多相关文章

  1. easyui源码翻译1.32+API翻译全篇导航 (提供下载源码)

    前言 EasyUI每个组件都会有 属性.方法.事件 属性 所有的属性都定义在jQuery.fn.{plugin}.defaults里面.例如,对话框属性定义在jQuery.fn.dialog.defa ...

  2. easyui源码翻译1.32--Slider（滑动条）

    前言 使用$.fn.slider.defaults重写默认值对象.下载该插件翻译源码 滑动条允许用户从一个有限的范围内选择一个数值.当滑块控件沿着轨道移动的时候,将会显示一个提示来表示当前值.用户可以 ...

  3. easyui源码翻译1.32--datagrid(数据表格)

    前言 此前网上有easyui1.25的源码  应该算是比较老的版本  之后又经历了1.26 . 1.3. 1.31. 1.32 .1.33.1.34  1.33开始支持css3 算是又一个转折  但是 ...

  4. easyui源码翻译1.32--Messager（消息窗口）

    前言 使用$.messager.defaults重写默认值对象.下载该插件翻译源码 消息窗口提供了不同的消息框风格,包含alert(警告框), confirm(确认框), prompt(提示框), p ...

  5. easyui源码翻译1.32--EasyLoader（简单加载）

    前言 扩展自$.fn.datebox.defaults,使用$.fn.datetimebox.defaults重写默认值对象.下载该插件翻译源码 源码 /** * jQuery EasyUI 1.3. ...

  6. easyui源码翻译1.32--Draggable（拖动）

    前言 使用$.fn.draggable.defaults重写默认值对象.下载该插件翻译源码 源码 /** * jQuery EasyUI 1.3.2 * *翻译:qq 1364386878 --拖动 ...

  7. easyui源码翻译1.32--Droppable（放置）

    前言 使用$.fn.droppable.defaults重写默认值对象.下载该插件翻译源码 源码 /** * jQuery EasyUI 1.3.2 * *翻译:lbq --放置 拉伸 */ (fun ...

  8. easyui源码翻译1.32--Resizable（调整大小）

    前言 使用$.fn.resizable.defaults重写默认值对象 下载该插件翻译源码 源码 /** * jQuery EasyUI 1.3.2 * *翻译:qq 1364386878 Resiz ...

  9. easyui源码翻译1.32--Pagination（分页）

    前言 使用$.fn.pagination.defaults重写默认值对象下载该插件翻译源码 该分页控件允许用户导航页面的数据.它支持页面导航和页面长度选择的选项设置.用户可以在分页控件上添加自定义按钮 ...

随机推荐

  1. GlusterFS集群文件系统概述

    http://blog.csdn.net/zonelan/article/details/8468383 1.      GlusterFS概述 GlusterFS是Scale-Out存储解决方案Gl ...

  2. ant+dbunit 导xml到mysql

    1.增加自己的data目录和xml数据文件 2.lib依赖 commons-logging-1.1.1.jar dbunit-2.4.8.jar junit-4.9b2.jar mysql-conne ...

  3. 20160504-hibernate入门

    关系型数据库与面向对象 模型不匹配(阻抗不匹配) Java面向对象语言,对象模型,其主要概念有:继承.关联.多态等:数据库是关系模型,其主要概念有:表.主键.外键等. 解决办法: 1使用JDBC手工转 ...

  4. ACM——Quicksum

    Quicksum 时间限制(普通/Java):1000MS/3000MS          运行内存限制:65536KByte总提交:615            测试通过:256 描述 A chec ...

  5. 不关闭seLinux解决vsftpd服务本地用户不能登录问题（500 OOPS: cannot change directory:/home/***

    这里不讲vsftpd的基本配置,网上教程已经太多了.这里只说seLinux的问题. 日前在CentOS6.5中安装了vsftpd,按照网上搜索的教程,配置好/etc/vsftpd/vsftpd.con ...

  6. 12天学好C语言——记录我的C语言学习之路（Day 2）

    12天学好C语言--记录我的C语言学习之路 Day 2: 我建议大家每一天学习之前都仅凭记忆去敲前一天敲过的最后一个程序,或者敲前一天你认为最难最长的一个程序,如果一晚上的睡眠之后不看书还能敲的出来, ...

  7. 懒人记录 Hadoop2.7.1 集群搭建过程

    懒人记录 Hadoop2.7.1 集群搭建过程 2016-07-02 13:15:45 总结 除了配置hosts ,和免密码互连之外,先在一台机器上装好所有东西 配置好之后,拷贝虚拟机,配置hosts ...

  8. Codevs 3289 花匠 2013年NOIP全国联赛提高组

    3289 花匠 2013年NOIP全国联赛提高组 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 钻石 Diamond 题目描述 Description 花匠栋栋种了一排花,每株花都 ...

  9. ASP.NET输入文本框自动提示功能

    在ASP.NET Web开发中会经常用到自动提示功能,比如百度搜索.我们只要输入相应的关键字,就可以自动得到相似搜索关键字的提示,方便我们快速的输入关键字进行查询. 那么在ASP.NET中,如果我们需 ...

  10. thymeleaf 基本语法

    四.标准表达式语法 · 简单表达式 (simple expressions) ${...}  变量表达式 *{...}  选择变量表达式 #{...}  消息表达式 @{...}  链接url表达式 ...