ボタンを押すと、lib jquery.knob.js(circle) の要素が表示されます。円のサイズを変更したいので、次のコードを書きました。
<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>
しかし、divの幅と高さを変更しても、円のサイズは変わりませんか?
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>