知識 分享 互助 懶人建站

    懶人建站專注于網頁素材下載,提供網站模板、網頁設計、ps素材、圖片素材等,服務于【個人站長】【網頁設計師】和【web開發從業者】的代碼素材與設計素材網站。

    懶人建站提供網頁素材下載、網站模板
    知識 分享 互助!

    jquery圓形進度插件radialIndicator.js(可根據不同進度改變顏色)

    作者:佳明媽 來源: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://www.ezdqdj.live/
            $('#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(可根據不同進度改變顏色)-最新評論

    • Evans 廣東省廣州市 2017-09-27 01:43:24
      請問怎么獲取到加載到100%的狀態?
    • 張哈哈丶 上海市 2017-08-18 01:57:17
      動態改值很麻煩啊,沒有詳細api
    • over 浙江省金華市 2017-06-06 10:23:20
      不兼容ie啊
    • 馬志遠 2017-01-22 02:20:43
      這個插件不錯,動態更新遇到點問題就是。
    • 11 2017-01-22 02:01:43
      這個插件不錯,動態更新遇到點問題就是。
    • 懶人建站網友 2016-12-28 05:12:24
      可以
    • 11 2016-12-28 05:12:24
      可以
    老子是皇帝在线客服