2016-10-13 20 views
2

HTMLの「div」タグの「jquery-plugin-circliful」属性を変更したいとします。HTML jquery-plugin-circliful属性の変更

"jqueryの - プラグインcircliful" ライブラリURL:https://github.com/pguso/jquery-plugin-circliful

私のHTMLコード:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>SVG Circliful</title> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
<link rel="stylesheet" href="css/material-design-iconic-font.min.css"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 
<link rel="stylesheet" href="css/jquery.circliful.css"> 
</head> 
<body> 
<section class="container"> 
<h3>Circliful</h3> 
<div class="row"> 
    <div class="col-lg-2"> 
     <div id="test-circle" data-percent="11"></div> **<!-- HERE -->** 
    </div> 
</div> 
</section> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
<script src="js/jquery.circliful.js"></script> 
<script> 
$(document).ready(function() { // 6,32 5,38 2,34 
    $("#test-circle").circliful({ 
     animation: 1, 
     animationStep: 5, 
     foregroundBorderWidth: 15, 
     backgroundBorderWidth: 15, 
     percent: 38, 
     textSize: 28, 
     textStyle: 'font-size: 12px;', 
     textColor: '#666', 
     multiPercentage: 1, 
     percentages: [10, 20, 30] 
    }); 
    }); 
</script> 
</body> 
</html> 

結果:

enter image description here

私はなぜパーセント分かりません値は変更されません。私は属性の名前を "データ - パーセント"または "パーセント"として試しました。しかし、何も変わらない。何が問題ですか?

+0

パーセント値はどのような値になると思いますか? – snit80

+0

divタグでは、私は11のパーセント値を設定します。私は11%を期待しています。 – spritecodej

+0

しかし、あなたが円をインスタンス化しているときには、38に設定しました。 – snit80

答えて

2

(OPのために掲示された回答)

URL:jsfiddle.net/me2loveit2/H9gak/

私は図書館で通常のjsファイル(jqueryの - プラグインcircliful)を適用します。円を変更するためにdivタグを使用するときは、いくつかのjsコードを追加する必要があります。 URLは解決策です。 URLでは、jsスクリプト(固定)はhtml div属性変更機能を提供します。