知识 分享 互助 懒人建站

    懒人建站专注于网页素材下载,提供网站模板、网页设计、ps素材、图片素材等,服务于【个人站长】【网页设计师】和【web开发从业者】的代码素材与设计素材网站。

    懒人建站提供网页素材下载、网站模板
    知识 分享 互助!

    jquery圆形进度插件radialIndicator.js(可根据不同进度改变颜色)

    作者:bbin视讯真人娱乐平台登入 来源:web前端开发 2016-09-10 人气:
    radialIndicator是一个轻量级的jquery圆形进度插件。它支持色彩范围,插值,格式,和更多的百分比值,很容易配置和更新,radialIndicator也可以不使用jquery,还有对angularJs的支持angular.radialIndicat

    radialIndicator

    radialIndicator是一个轻量级的jquery圆形进度插件。它支持色彩范围,插值,格式,和更多的百分比值,很容易配置和更新

    怎么引入radialIndicator插件?

    你需要引入jquery.js和radialIndicator.js
    <script src="radialIndicator.js"></script>

    radialIndicator最简单调用

     
            $('#indicatorContainer').radialIndicator();
        

    带一些参数的调用

     
            $('#indicatorContainer').radialIndicator({
                    barColor: '#87CEEB',
                    barWidth: 10,
                    initValue: 40,
                    roundCorner : true,
                    percentage: true
                });
        
    获取实例的进度
            var radialObj = $('#indicatorContainer').data('radialIndicator');
            //现在,您可以使用实例来调用不同的方法
            //像这样:
            radialObj.animate(60);
        

    radialIndicator也可以不使用jquery,单独工作,如下:

            //Intialiazation
            var radialObj = radialIndicator('#indicatorContainer', {
                barColor : '#87CEEB',
                barWidth : 10,
                initValue : 40
            });
    
            //Using Instance
            radialObj.animate(60);
        

    这样,第一个参数是一个选择器字符串或dom节点或节点列表(甚至是你通过一个节点列表只需要第一个节点)。函数返回一个实例,因此您可以使用它调用不同的方法所示jquery示例相同。 您可以使用下列任何一个方式根据您的方便。

    一个没有数字指示的进度

     
            $('#indicatorContainer').radialIndicator({
                displayNumber: false
            });
    
        

    不同的百分比提供不同的颜色

    你可以为不同的百分比提供不同的颜色,而且颜色的变化是会自动进行渐变动画

     
                    //懒人建站,web前端工程师学习交流平台http://bbinsxzrylptdr.xsb868.com/
            $('#indicatorContainer').radialIndicator({
                barColor: {
                    0: '#FF0000',
                    33: '#FFFF00',
                    66: '#0066FF',
                    100: '#33CC33'
                },
                percentage: true
            });
    
        

    提供一个最小值和最大值,来指定范围

     
            $('#indicatorContainer').radialIndicator({
                minValue: 1000,
                maxValue: 100000
            });
        

    格式化圆形进度的数据格式

    You can provide a # formatter or a formatter function to format indicator. 你可以使用 # 来格式化数据,如下例

     
            $('#indicatorContainer').radialIndicator({
                radius: 70,
                minValue: 10000,
                maxValue: 10000000,
                format: '¥ ##,##,###'
            });
    
        

    你可以放一个logo到圆形进度中间,

    懒人建站认为这并不算是功能,这是一个配合css定位的实现的效果

     
    
    	

    HTML

    <div id="indicatorContainerWrap"> <div id="indicatorContainer"></div> <img src="picture/lab_exp.png" id="prgLogo"/> </div>

    CSS

    #indicatorContainerWrap,#indicatorContainer{ display:inline-block; position:relative; } #prgLogo{ position:absolute; width:60px; height:60px; margin-top:-30px; margin-left:-30px; }

    JS

    $('#indicatorContainer').radialIndicator({value : 90});

    一个时钟的例子

     
                    var radialObj = radialIndicator('#indicatorContainer', {
                        radius: 60,
                        barWidth: 5,
                        barColor: '#FF0000',
                        minValue: 0,
                        maxValue: 60,
                        fontWeight: 'normal',
                        roundCorner: true,
                        format: function (value) {
                            var date = new Date();
                            return date.getHours() + ':' + date.getMinutes();
                        }
                    });
    
                    setInterval(function () {
                        radialObj.value(new Date().getSeconds() + 1);
                    }, 1000);
    
    
        

    一个上传进度的例子

    暂时没有服务端看不到效果

     
    点击这里选择文件

    HTML

                    <div id="indicatorContainerWrap">
                        <div class="rad-prg" id="indicatorContainer"></div>
                        <div class="rad-cntnt">Click / Drop file to select.</div>
                        <input type="file" id="prgFileSelector" />
                    </div>
                

    CSS

                        #indicatorContainerWrap{
                            position: relative;
                            display: inline-block;
                        }
    
                        .rad-cntnt{
                            position: absolute;
                            display: table;
                            vertical-align: middle;
                            text-align: center;
                            width: 100%;
                            top:50%;
                            -webkit-transform: translateY(-50%);
                            -moz-transform: translateY(-50%);
                            -ms-transform: translateY(-50%);
                            -o-transform: translateY(-50%);
                            transform: translateY(-50%);
                            font-size:20px;
                            line-height: 24px;
                        }
    
    
                        #prgFileSelector{
                            position: absolute;
                            width: 100%;
                            height: 100%;
                            opacity: 0;
                            top:0;
                            left:0;
                            z-index: 10;
                        }
                  

    JS

                    //file upload example
                    var container = $('#indicatorContainerWrap'),
                        msgHolder = container.find('.rad-cntnt'),
                        containerProg = container.radialIndicator({
                            radius: 100,
                            percentage: true,
                            displayNumber: false
                        }).data('radialIndicator');
    
    
                    container.on({
                        'dragenter': function (e) {
                            msgHolder.html("Drop here");
                        },
                        'dragleave': function (e) {
                            msgHolder.html("Click / Drop file to select.");
                        },
                        'drop': function (e) {
                            e.preventDefault();
                            handleFileUpload(e.originalEvent.dataTransfer.files);
                        }
                    });
    
                    $('#prgFileSelector').on('change', function () {
                        handleFileUpload(this.files);
                    });
    
                    function handleFileUpload(files) {
                        msgHolder.hide();
                        containerProg.option('displayNumber', true);
    
                        var file = files[0],
                            fd = new FormData();
    
                        fd.append('file', file);
    
    
                        $.ajax({
                            url: 'service/upload.php',
                            type: 'POST',
                            data: fd,
                            processData: false,
                            contentType: false,
                            success: function () {
                                containerProg.option('displayNumber', false);
                                msgHolder.show().html('File upload done.');
                            },
                            xhr: function () {
                                var xhr = new window.XMLHttpRequest();
                                //Upload progress
                                xhr.upload.addEventListener("progress", function (e) {
                                    if (e.lengthComputable) {
                                        var percentComplete = (e.loaded || e.position) * 100 / e.total;
                                        //Do something with upload progress
                                        console.log(percentComplete);
                                        containerProg.animate(percentComplete);
                                    }
                                }, false);
    
                                return xhr;
                            }
                        });
    
                    }
    
                  
    ↓ 查看全文

    jquery圆形进度插件radialIndicator.js(可根据不同进度改变颜色)由懒人建站收集整理,您可以自由传播,请主动带上本文链接

    懒人建站就是免费分享,觉得有用就多来支持一下,没有能帮到您,懒人也只能表示遗憾,希望有一天能帮到您。

    jquery圆形进度插件radialIndicator.js(可根据不同进度改变颜色)-最新评论

    网站地图 ag旗舰厅手机版登入 ag旗舰厅直营网登入 bbin视讯官网直营登入
    申博游戏网站 太阳城集团官方 申博sunbet注册 申博开户官网
    澳门威尼斯人电子游戏 网易彩票竞彩足球登入 金巴黎彩票上海快3 银河棋牌游戏
    ag视讯网址登入 ag视讯游戏开户登入 bbin视讯客户端下载登入 ag视讯官网登入
    BBIN馆官网现金网登入 ag旗舰厅游戏登入 bbin视讯游娱乐登入 ag旗舰厅游戏登入
    8NNS.COM 718jbs.com 578XTD.COM 000XSB.COM 157PT.COM
    698psb.com 1113885.COM 216SUN.COM 1112127.COM 44sbib.com
    618cw.com 787XTD.COM XSB889.COM 988xsb.com 87s8.com
    1888DZ.COM 132PT.COM XSB577.COM 478psb.com 657SUN.COM