Tạo đánh giá với jQuery Raty

Bạn đang muốn xây dựng hệ thống đánh giá trên website của bạn, bạn muốn tạo đánh giá cho bài viết mà không cần dùng plugin của WordPress. Bài viết này mình sẽ giới thiệu đến các bạn plugin jQuery Raty với đầy đủ các tính năng cho bạn sử dụng.

Thông thường các website liên quan đến phần mềm, phim ảnh hay truyện tranh thì hay có hệ thống đánh giá để người sử dụng có thể đánh giá các bộ phim hoặc bộ truyện mà họ đã xem, chức năng này cũng rất hữu ích cho các bạn tạo blog đánh giá hosting hay là phần mềm.

Demo

jQuery Raty cũng giống như các plugin liên quan đến jQuery khác, bạn phải load thư viện của jQuery trước thì mới có thể sử dụng được plugin này.

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

Đối với WordPress thì bạn chỉ cần gọi hàm wp_enqueue_script(‘jquery’) hoặc là bạn đính kèm phụ thuộc trong các hàm load script.

wp_enqueue_script('test-script', get_template_directory_uri() . '/test-script.js', array('jquery'), false, true);

Nếu bạn muốn sử dụng các ngôi sao là hình ảnh thì bạn dùng như sau:

<script src="jquery.raty.js"></script>

<div></div>

$('div').raty();

Nếu bạn muốn sử dụng các ngôi sao bằng font chữ thì bạn dùng như sau:

<link rel="stylesheet" href="jquery.raty.css">
<script src="jquery.raty.js"></script>

<div></div>

$('div').raty({ starType: 'i' });

Các tùy chọn cho bạn khai báo khi gọi hàm hiển thị đánh giá:

cancel      : false                                          // Creates a cancel button to cancel the rating.
cancelClass : 'raty-cancel'                                  // Name of cancel's class.
cancelHint  : 'Cancel this rating!'                          // The cancel's button hint.
cancelOff   : 'cancel-off.png'                               // Icon used on active cancel.
cancelOn    : 'cancel-on.png'                                // Icon used inactive cancel.
cancelPlace : 'left'                                         // Cancel's button position.
click       : undefined                                      // Callback executed on rating click.
half        : false                                          // Enables half star selection.
halfShow    : true                                           // Enables half star display.
hints       : ['bad', 'poor', 'regular', 'good', 'gorgeous'] // Hints used on each star.
iconRange   : undefined                                      // Object list with position and icon on and off to do a mixed icons.
mouseout    : undefined                                      // Callback executed on mouseout.
mouseover   : undefined                                      // Callback executed on mouseover.
noRatedMsg  : 'Not rated yet!'                               // Hint for no rated elements when it's readOnly.
number      : 5                                              // Number of stars that will be presented.
numberMax   : 20                                             // Max of star the option number can creates.
path        : undefined                                      // A global locate where the icon will be looked.
precision   : false                                          // Enables the selection of a precision score.
readOnly    : false                                          // Turns the rating read-only.
round       : { down: .25, full: .6, up: .76 }               // Included values attributes to do the score round math.
score       : undefined                                      // Initial rating.
scoreName   : 'score'                                        // Name of the hidden field that holds the score value.
single      : false                                          // Enables just a single star selection.
space       : true                                           // Puts space between the icons.
starHalf    : 'star-half.png'                                // The name of the half star image.
starOff     : 'star-off.png'                                 // Name of the star image off.
starOn      : 'star-on.png'                                  // Name of the star image on.
target      : undefined                                      // Element selector where the score will be displayed.
targetFormat: '{score}'                                      // Template to interpolate the score in.
targetKeep  : false                                          // If the last rating value will be keeped after mouseout.
targetScore : undefined                                      // Element selector where the score will be filled, instead of creating a new hidden field (scoreName option).
targetText  : ''                                             // Default text setted on target.
targetType  : 'hint'                                         // Option to choose if target will receive hint o 'score' type.
starType    : 'img'                                          // Element used to represent a star.

Các hàm để bạn gọi hiển thị hệ thống đánh giá với chức năng khác nhau:

$('div').raty('score');                  // Get the current score.

$('div').raty('score', number);          // Set the score.

$('div').raty('click', number);          // Click on some star.

$('div').raty('readOnly', boolean);      // Change the read-only state.

$('div').raty('cancel', boolean);        // Cancel the rating. The last param force the click callback.

$('div').raty('reload');                 // Reload the rating with the current configuration.

$('div').raty('set', { option: value }); // Reset the rating with new configurations.

$('div').raty('destroy');                // Destroy the bind and give you the raw element.

$('div').raty('move', number);           // Move the mouse to the given score point position.

jQuery Raty sẽ đáp ứng được đầy đủ nhu cầu của bạn, cách cấu hình cũng như cách sử dụng cũng đơn giản, bạn có thể hiểu và tự code hệ thống đánh giá trên website của bạn. Chúc bạn thành công.