2012-12-18 10 views
5

Ho un pagecambio formato elemento di jquery.knob.js lib

dopo aver premuto il pulsante, si vede elemento di jquery.knob.js lib (cerchio) che voglio cambiare ot dimensione del cerchio e ho scritto questo codice:

<div style="float:left; width:255px; height:155px"> 
      <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> 

ma se cambio larghezza e altezza di div, le dimensioni del cerchio non vengono modificate?

Tutti pagina di codice di pb.php:

<?php 
header('Content-Type: text/html; charset=utf-8'); 
include '../connect.php'; 
include '../ProcessingMySQL.php'; 
$mysqli = new ProcessingMySQL($hostname, $user_name, $password, $db_name); 
$site = $_POST['sites']; 
$percent = $mysqli->getPercentTopQuery($site); 
?> 

<html> 
    <head> 
    <style type="text/css"> 
     .knob{color:#000000 !important;} 
    </style> 

     <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; 
              } 
            } 
           );  
           $('.knob').val($('.knob').val() + '%');  
      }); 
     </script> 
     <style> 
      h2{color:#87CEEB;font-family:'Georgia';} 
     </style> 
    </head> 
    <body> 
     <h1>Процент запросов в топе для сайта <?php echo $site; ?></h1> 
     <div style="float:left; width:255px; height:155px"> 
      <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> 

    </body> 
</html> 

risposta

1
<div style="float:left; width:255px; height:155px"> 
      <input class="knob" data-fgColor="#9dc806" data-cgColor="black" data-bgColor="#7d7d7d" data-tickColor="black" data-thickness=".25" data-readOnly=true data-width="255" value="<?php echo $percent; ?>"> 
     </div> 

tenta di aggiungere l'attributo data-width="width_of_circle" al vostro input.knob. Per quanto posso vedere, è così che puoi controllare la larghezza di un cerchio. Come nel codice sopra (la larghezza è impostata su 255)

Problemi correlati