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> 7. Plugin này sử dụng <link href="bootstrap-rating.css" rel="stylesheet"> <script type="text/javascript" src="bootstrap-rating.js"></script> 8 để 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: //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:
- 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ị.
- Để initial giá trị:
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.
- 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:
- 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:
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:
- Fractional range
- Stepping different
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:
Methods
- Set value:
- Get value:
- Reset value:
References: Github của Bootstrap-rating