easyui源码翻译1.32---ProgressBar（进度条）

前言

使用$.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);
View Code

 

示例代码

 

<!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>
View Code

 

插件效果

posted @ 2014-01-01 21:54  Jimmy-Lee  阅读(612)  评论(1)  编辑  收藏  举报