/ / Javascript & Jquery / Comments (3)

Đánh giá dạng ngôi sao với jQuery Rateit

Chắc hẳn các bạn từng bắt gặp nhiều website có chức năng cho phép đánh giá bài viết theo dạng ngôi sao,trong bài viết này mình xin hướng dẫn các bạn làm chức năng đó với thư viện jQuery Rateit kết hợp với sử dụng ajax để thực hiện cập nhật số điểm đánh giá của bài viết.Trước tiên chúng ta sẽ đi tìm hiểu qua về plugin này nhé.

Giới thiệu về thư viện jQuery Rateit

– Đây là 1 plugin nhẹ,dễ sử dụng,đặc biệt sử dụng html5.Sử dụng như nhiều ngôi sao như bạn muốn, và cũng có kích thước bất kỳ bước.Trước tiên các bạn vào đây để download phiên bản mới nhất của plugin này.
– Sau khi tải plugin này về các bạn chèn thư viện js và css vào website

<link href="rateit/src/rateit.css" rel="stylesheet" type="text/css">
<script src="rateit/src/jquery.rateit.js" type="text/javascript"></script>  

1.Hiển thị cơ bản,các bạn chỉ cần thêm đoạn html sau vào chỗ nào muốn hiển thị:

<div class="rateit"></div>

+ Demo:

thật đơn giản phải không nào

2.Hiển thị giá trị mặc định và không cho phép đánh giá

<div class="rateit" data-rateit-value="2.5"  data-rateit-readonly="true"></div>

+ Demo:

Như vậy các bạn chỉ việc thêm các thuộc tính vào là có thể tùy chỉnh theo ý muốn rồi

  1. data-rateit-value: gắn giá trị sao muốn hiển thị
  2. data-rateit-readonly: cho phép đánh giá hay không,nếu đặt là true sẽ không cho phép đánh giá

3.Các cấu hình quan trọng khác

Ngoài ra các bạn có thể tùy chỉnh 1 vài thông tin khác chỉ cần thêm vào thuộc tính,ví dụ:

<div class="bigstars">
<div class="rateit" data-rateit-value="3" data-rateit-starwidth="32" data-rateit-starheight="32" data-rateit-min="0" data-rateit-max="10"></div>
</div>

và thêm đoạn css sau:

div.bigstars div.rateit-range
{
    background: url(star-white32.png);
    height: 32px;
}
div.bigstars div.rateit-hover
{
    background: url(star-gold32.png);
}
div.bigstars div.rateit-selected
{
    background: url(star-red32.png);
}
div.bigstars div.rateit-reset
{
    background: url(star-black32.png);
    width: 32px;
    height: 32px;
}
div.bigstars div.rateit-reset:hover
{
    background: url(star-white32.png);
}

+ Demo:

  1. data-rateit-min: Đánh giá tối thiểu
  2. data-rateit-max: Đánh giá tối đa
  3. data-rateit-starwidth: Chiều rộng của ngôi sao
  4. data-rateit-starheight: Chiều cao của ngôi sao

Tùy chỉnh cấu hình bằng javascript

Ngoài cách sử dụng các thuộc tính trên chúng ta có thể sử dụng javascript để tùy chỉnh cấu hình cho việc đánh giá
+ ví dụ:

<div id="rateit_star"></div>
<script type="text/javascript">
    $(function () { $('#rateit_star').rateit({min: 1, max: 10, step: 2}); });
</script>

+ Demo:

Gọi tới hàm callback khi đánh giá xong

Sau khi đánh giá xong nó cho phép chúng ta lấy giá trị hay số điểm (số ngôi sao) vừa đánh giá và có thể gọi tới hàm callback thực thi các lệnh khác
+ ví dụ:

<div id="rateit_star1"  data-productid="123"></div>
<script type="text/javascript">
   $(function () {
       $('#rateit_star1').rateit({min: 1, max: 10, step: 1}); 
       $('#rateit_star1').bind('rated', function (e) {
         var ri = $(this);
         var value = ri.rateit('value');
         var productID = ri.data('productid'); 
         alert('Bạn đã đánh giá '+value +' sao cho sản phẩm có id là:'+productID );
         //không cho phép đánh giá,sau khi đã đánh giá xong
         ri.rateit('readonly', true);
     });
   });
</script>

+ Demo:

  1. rateit('value'): lấy số điểm (ngôi sao) đánh giá
  2. ri.data('productid'): lấy giá trị của thuộc tính productid,các bạn có thể gắn thuộc tính tùy ý
  3. rateit('readonly', true): Thực hiện không cho phép đánh giá

Với việc lấy được giá trị của đánh giá,id của sản phẩm qua thuộc tính các bạn hoàn toàn có thể thực hiện chức năng đánh giá cho sản phẩm này bằng cách sử dụng hàm ajax ngay trong hàm callback này để thực hiện cập nhật số lần đánh giá vào cơ sở dữ liệu.Nếu có thời gian mình sẽ hướng dẫn chi tiết chức năng này.
Tổng kết: Qua bài này mình đã giới thiệu cho các bạn về thư viện jquery rateit để thực hiện chức năng đánh giá theo dạng sao 1 cách thật đơn giản phải không nào.Chúc các bạn áp dụng tốt thư viện này vào dự án,trong quá trình thực hành có vấn đề gì vui lòng để lại phản hồi để được hỗ trợ.



07/05/2015
Written by nobitacnt

Trong bài viết không tránh khỏi những câu từ chưa chính xác,mong nhận được sự góp ý để website hoàn thiện hơn.Nếu thấy bài viết có ích với bạn hãy like và share để ủng hộ nhé :D.

Bài viết chùng chuyên mục

3 Comments

  1. kaka says:
     /  Reply

    Đang cần cái này,cảm ơn ad nhé.

  2. Khách sạn Cát Bà says:
     /  Reply

    Bạn ơi, link down thư viện bị lỗi rồi, vào thì cứ bị báo là không tồn tại ấy

  3. Văn AN says:
     /  Reply

    Như ngôi sao , mình mún nó to lên.. chỉnh sao ban
    Tks bạn nhiều

Gửi bình luận

Giới thiệu

Mình tạo ra blog này với mong muốn chia sẻ và học hỏi kinh nghiệm trong quá trình thiết kế website. Website đang trong quá trình phát triển chân thành cảm ơn mọi sự góp ý của các bạn để làm cho website ngày càng hoàn thiên.

DMCA.com Protection Status
Theo dõi qua Email

Tổng hợp các bài viết về

Hoc php - CodeIgniter Framework - Laravel Framework - PHP va MYSQL