Cách tạo xếp hạng sao tuyệt vời

Question

Có cách nào đơn giản để tạo phần tử xếp hạng 5 sao trong Jquery-mobile không? Tương tự như http://orkans-tmp.22web.net/star_rating/.

Answer 1

Bạn có thể sử dụng bất kỳ plugin jQuery nào đáp ứng được nhiệm vụ này. Trong quá khứ, tôi đã sử dụng các plugin jQuery Xếp hạng sao tại

http://www.fyneworks.com/jquery/star-rating/

Điều duy nhất bạn cần phải suy nghĩ về là để ngăn chặn jQuery Mobile từ render các nút radio với phong cách riêng của mình. Bạn có thể đạt được điều này bằng cách thêm data-role="none" cho thẻ đầu vào, thấy

http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/forms/forms-all-native.html

Answer 2

tôi tìm ra jQuery Raty plugin dễ dàng hơn nhiều để sử dụng!

Tôi không bao giờ có thể lấy class = "star" để làm việc với fyneworks.

Answer 3

Nếu bạn đang tìm kiếm một phần giá điện thoại di động, hãy nhìn vào các http://demo.mobiscroll.com/rating

EDIT: Và scroller tích hợp với jQuery Mobile Chủ đề. Hướng dẫn xây dựng hệ thống xếp hạng với jQM + Xếp loại & Bộ lọc chấm điểm here.

Answer 4

tôi đã quản lý để sử dụng http://www.fyneworks.com/jquery/star-rating/ cùng với jquery-mobile (phiên bản 1.4.5)

lừa nêu trên với dữ liệu-role = "none" trên các lĩnh vực đầu vào không hoạt động. bạn cần hiển thị thẻ riêng. Tôi đã sử dụng các ví dụ đơn giản nhất trên trang http://www.fyneworks.com/jquery/star-rating/#tab-Testing

<div data-role="none"> 
    <input name="star1" type="radio" class="star" value="1"/> 
    <input name="star1" type="radio" class="star" value="2"/> 
    <input name="star1" type="radio" class="star" value="3"/> 
    <input name="star1" type="radio" class="star" value="4"/> 
    <input name="star1" type="radio" class="star" value="5"/> 
</div> 

điều chỉnh màu sắc và kích thước là khá khó khăn và nhu cầu thay đổi đối với star.gif và tập tin .css

Answer 5

Đây là giải pháp của tôi với Jquery Mobile. Hy vọng bạn thích nó:

<style> 
    .rated { background-color: yellow !important; } 
    .rating a { border: 0px !important; } 
</style> 

<div class="rating" id="first"> 
    <a href="#" data-role="button" data-inline="true" data-icon="star" data-vote="1" data-iconpos="notext"></a> 
    <a href="#" data-role="button" data-inline="true" data-icon="star" data-vote="2" data-iconpos="notext"></a> 
    <a href="#" data-role="button" data-inline="true" data-icon="star" data-vote="3" data-iconpos="notext"></a> 
    <a href="#" data-role="button" data-inline="true" data-icon="star" data-vote="4" data-iconpos="notext"></a> 
    <a href="#" data-role="button" data-inline="true" data-icon="star" data-vote="5" data-iconpos="notext"></a> 
</div> 

$(".rating a").on("vmouseover", function() { 

    var id = $(this).parent().attr("id"); 
    $("#" + id + ".rating a").each(function (i, v) { 
    $(v).removeClass("rated"); 
    }); 

    $(this).prevAll().each(function (i, v) { 
    $(v).addClass("rated"); 
    }); 
    $(this).addClass("rated"); 

    $("#" + id).data("vote", $(this).data("vote")); 
}); 

https://jsfiddle.net/lgrillo/cz7z479j/