Hướng dẫn star rating bootstrap - xếp hạng sao bootstrap

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à

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

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

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:

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

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

1. sử dụng

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

   9

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: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: Đầ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:

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

• Fractional range

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

• Stepping different

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

Symbol events

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

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

  0 : khi pointer enter

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

  1: khi pointer leavee ví dụ về events trên:

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

Methods

• Set value:

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

• Get value:

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

• Reset value:

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

References: Github của Bootstrap-rating

Đánh giá các ngôi sao bootstrap là gì?

Làm thế nào để đánh giá các sản phẩm trong Bootstrap 4 Anirudha Bhowmik?

Bạn có thể làm gì với Bootstrap 5?

How many Trang HTML5 are there in Bootstrap?