-2

我在 lib jquery.knobs.js 的帮助下创建了进度条：示例

这是我的代码：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
        <script src="js/jquery.knob.js"></script>
        <script>
            $(function() {
                $(".knob").knob();
                var val,up=0,down=0,i=0
                    ,$idir = $("div.idir")
                    ,$ival = $("div.ival")
                    ,incr = function() { i++; $idir.show().html("+").fadeOut(); $ival.html(i); }
                    ,decr = function() { i--; $idir.show().html("-").fadeOut(); $ival.html(i); };
                $("input.infinite").knob(
                                    {
                                    'min':0
                                    ,'max':20
                                    ,'stopper':false
                                    ,'change':function(v){
                                                if(val>v){
                                                    if(up){
                                                        decr();
                                                        up=0;
                                                    }else{up=1;down=0;}
                                                }else{
                                                    if(down){
                                                        incr();
                                                        down=0;
                                                    }else{down=1;up=0;}
                                                }
                                                val=v;
                                            }
                                    }
                                    );            });
        </script>
        <style>
            h2{color:#87CEEB;font-family:'Georgia';}
        </style>
    </head>
    <body>
        <h1>Процент запросов в топе для сайта <?php echo $site; ?></h1>
        <div style="float:left; width:300px; height:320px; padding:20px">
            <input class="knob" data-fgColor="#9dc806" data-cgColor="black" data-bgColor="#7d7d7d" data-tickColor="black" data-thickness=".25" data-readOnly=true value="<?php echo $percent; ?>">
        </div>

我想将数字的颜色更改为黑色并在数字上添加百分比签名？

4

2 回答 2

3

在您的设置中，更改

data-fgcolor to #000000

如果您只想更改号码的颜色，只需用这个破解您的 CSS -

.knob{color:#000000 !important;}

此外，就添加百分比而言，只需在准备好的 DOM 上运行它 - 

$('.knob').val($('.knob').val() + '%');

这是我通过 Google 找到的文档 - http://anthonyterrien.com/knob/

于 2012-12-11T15:25:47.463 回答
1

你不能把data-fgcolor属性改成#000000?

于 2012-12-11T15:21:56.493 回答