Tạo Rating với bootstrap-rating

Bài đăng này đã không được cập nhật trong 2 năm

Giới thiệu

Rating cũng là một cái quan trọng khi các bạn cần làm các chức năng liên quan đến review hoặc rating gì đó. Có khá nhiều plugins để làm chức năng rating này. Trong bài này, mình xin giới thiệu một plugins để tạo ra các rating symbols rất nhanh và dễ dàng, đây là bootstrap-rating. Plugin này sử dụng Bootstrap glyphicons để tạo các rating symbols. Tuy nhiên, các bạn có thể customize sử dụng symbols khác như font-awesome, hoặc dùng css của mình cũng được một các dễ dàng.

Cách cài đặt

Plugin này sử dụng Jquery và Bootstrap. Vậy, đầu tiên phải thêm 2 thư viện trên vào project của bạn.

<link href="dist/css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="dist/js/jquery-1.10.2.js"></script>

Sau đó, bạn chỉ cần 2 files css và javascript của bootstrap-rating đưa vào project của bạn là xong.

<link href="bootstrap-rating.css" rel="stylesheet">
<script type="text/javascript" src="bootstrap-rating.js"></script>

(2 files trên có thể download tại: https://github.com/dreyescat/bootstrap-rating)

Cách sử dụng

Để tạo ra rating symbol bạn có 2 cách:

thêm class="rating" vào input:

<input type="hidden" class="rating"/>

sử dụng $("input").rating();

Rất đơn giản, sau đó bạn sẽ thấy kết quả:

Bây giờ, mình sẽ vào cách sử dụng chi tiết của plugin này.

Sử dụng disable or read-only để disable hoặc cho nó chỉ hiển thị.

<input type="hidden" class="rating" disabled="disabled"/>
<input type="hidden" class="rating" data-readonly/>

Để initial giá trị:

<input type="hidden" class="rating" value="2"/>

Cách customize

Mặc định của plugin này là sử dụng bootstrap glyphicon để tạo symbols hình sao.
Nếu bạn muốn dùng symbols khác, bạn chỉ cần thêm data-filled="..." và data-empty="..." là xong.

// tạo symbol heart
<input type="hidden" class="rating" data-filled="glyphicon glyphicon-heart" data-empty="glyphicon glyphicon-heart-empty"/>`
// hoặc js
$('input').rating({
  filled: 'glyphicon glyphicon-heart',
  empty: 'glyphicon glyphicon-heart-empty'
});

Nếu bạn muốn đổi symbol mặc định của nó, bạn phải overide lại giá trị mặc định của plugin như sau:

$.fn.rating.defaults.filled = 'glyphicon glyphicon-heart';
$.fn.rating.defaults.empty = 'glyphicon glyphicon-heart-empty';

Nếu bạn không muốn dùng symbols của bootstrap, bạn có thể dùng Font Awesome icons hoặc dùng Custom CSS icons. 1. Font Awesome icons Đầu tiên, bạn phải thêm plugin của font Awesome vào project. Sau đó bạn có thể dùng symbol của nó như sau:

<input type="hidden" class="rating" data-filled="fa fa-bell fa-3x" data-empty="fa fa-bell-o fa-3x"/>

2. Custom CSS icons Đầu tiên, bạn phải viết các CSS như sau:

   .symbol {
       display: inline-block;
       border-radius: 50%;
       border: 5px double white;
       width: 30px;
       height: 30px;
     }

     .symbol-empty {
       background-color: #ccc;
     }

     .symbol-filled {
       background-color: black;
     }

Sau đó, bạn có thể dùng luôn vào trong data của bootstrap-rating này:

<input type="hidden" class="rating" data-filled="symbol symbol-filled" data-empty="symbol symbol-empty"/>

Setting rate range

Bạn cũng có thể tạo thành các range, start, stop, step, và các properties khác như sau:

Tạo rating start tư 5 đến 10:

<input type="hidden" class="rating" data-start="5" data-stop="10"/>
//hoặc js
$('input').rating({
  start: 5,
  stop: 10
});

Fractional range

<input type="hidden" class="rating" data-fractions="2"/>

Stepping different

<input type="hidden" class="rating" data-stop="10" data-step="2"/>
//hoặc js
$('input').rating({
  stop: 10,
  step: 2
});

Symbol events

Rating symbols có thể nhận 2 events:

rating.rateenter : khi pointer enter
rating.rateleave: khi pointer leavee ví dụ về events trên:

<input type="hidden" class="rating-tooltip-manual" data-filled="fa fa-star fa-3x" data-empty="fa fa-star-o fa-3x" data-fractions="3"/>

$('.rating-tooltip-manual').rating({
  extendSymbol: function () {
    var title;
    $(this).tooltip({
      container: 'body',
      placement: 'bottom',
      trigger: 'manual',
      title: function () {
        return title;
      }
    });
    $(this).on('rating.rateenter', function (e, rate) {
      title = rate;
      $(this).tooltip('show');
    })
    .on('rating.rateleave', function () {
      $(this).tooltip('hide');
    });
  }
});