2016-10-13 1 views
2

Я хочу изменить атрибуты «jquery-plugin-circliful» в теге HTML «div».Изменение атрибутов jquery-plugin-circliful HTML

"JQuery-плагин-circliful" URL Library: 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

Я не знаю, почему процент значение не изменяется. Я попробовал имя атрибута как «data-percent» или «percent». Но ничего не изменилось. В чем проблема?

+0

Что вы ожидаете от значения процента? – snit80

+0

в теге div, я установил процентное значение как 11. Я ожидаю, что 11 процентов. – spritecodej

+0

Но когда вы создаете экземпляр, вы установили его на 38. – snit80

ответ

2

(Опубликованный ответ от имени ОП).

URL: jsfiddle.net/me2loveit2/H9gak/

Я применил обычный JS файл (JQuery-плагин-circliful) в библиотеке. но когда я использую тег div для изменения круга, необходимо добавить некоторый js-код. URL-адрес является решением. В url скрипт js (fixed) предлагает функцию изменения атрибута html div.