Tuesday, August 15, 2017

Membuat Ranting Star Dengan SVG dan jQuery

Ranting bintang digunakan untuk media penilaian dengan cara digital. hampir semua perusahaan yang berbasis pelayanan jaya mereka mengunakan metode penilaian dengan ranting, disini saya akan membagikan bagaimana cara untuk membuat ranting star dengan jQuery dan AVG

Membuat Ranting Star Dengan SVG dan jQuery

1. Include jQuery simple rater plugin
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="jquery.rating.js"></script>

2.  Buat bcontainer untuk ranting control

<div id="rate"></div>

3. Code generate rating control

$('#rate').rating();

4. Castem default script

$('#rate').rating({

// You can pre-set any rating value here.
// It should be less than number of Count.
// Like if your count is 5, then it should be from 0 to 5
rate:0,

// You can set any value here.
// This is size of stars.
// Typically ranges between 20-60.
size:20,

// You can set any color code here.
// This is color of stars which are not selected.
primaryColor:"#F4F4F4",

// You can set any color code here.
// This is color of stars which are selected.
hoverColor:"#fdb300",

// You can set 1,2 or 10. 10 is default.
// 10 means you can select and get any fraction of value like 1.1, 2.3, 4.6.
// If you set 2, it means you can get only half and full value. like 1.5, 2.5, 3, 3.5 etc.
// And if you select 1, it means you can get only 1, 2, 3, 4, 5 etc
scale:10,

// It means user can change value of rating box or not.
// It typically used where you just want to show rating, not to take any input from user.
readonly:"false",

// You can set any value here.
// This is number of stars.
// Typically ranges between 5-10.
count:5

});


5.  API

// resets the rater and set to 0
$('#rate').rating('refresh');

// returns the value of the rating
$('#rate').rating('val');

// disables the rater
$('#rate').rating('disable');




Jika ingin download bisa lihat url di bawah ini

server1  http://festyy.com/q2dW8d

server2   http://viahold.com/3Bnw