एक शानदार स्टार रेटिंग कैसे बनाएं

Question

क्या Jquery-mobile में 5 सितारा रेटिंग तत्व उत्पन्न करने का कोई आसान तरीका है? http://orkans-tmp.22web.net/star_rating/ के समान।

Answer 1

आपको लगता है कि इस कार्य को पूरा किसी भी jQuery प्लगइन का उपयोग कर सकते हैं। अतीत में, मैं

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

केवल एक चीज के बारे में आप की अपनी शैली के साथ रेडियो बटन प्रतिपादन से jQuery मोबाइल को रोकने के लिए है सोचने की जरूरत पर jQuery स्टार रेटिंग प्लगइन का इस्तेमाल किया है। आप इनपुट टैग के लिए data-role="none" जोड़कर इस लक्ष्य को हासिल कर सकते हैं,

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

Answer 2

देख रहा jQuery Raty plugin उपयोग करने के लिए एक बहुत आसान लगता है!

मैं कभी भी कक्षा = "स्टार" को फ़िनवर्क के साथ काम करने के लिए कभी नहीं मिला।

Answer 3

आप एक मोबाइल रेटिंग घटक के लिए देख रहे हैं, http://demo.mobiscroll.com/rating

संपादित करें पर एक नज़र डालें: और स्क्रोलर jQuery मोबाइल विषय-वस्तु के साथ एकीकृत करता है। जेक्यूएम + रेटिंग & ग्रेडिंग स्क्रोलर here के साथ रेटिंग सिस्टम बनाने के लिए ट्यूटोरियल।

Answer 4

मैं jQuery-मोबाइल (संस्करण 1.4.5)

डेटा भूमिका से ऊपर बताए चाल के साथ एक साथ http://www.fyneworks.com/jquery/star-rating/ का उपयोग करने में कामयाब हो = इनपुट क्षेत्र पर "कोई नहीं" काम नहीं करता। आपको अपने स्वयं के टैग को प्रस्तुत करने की आवश्यकता है। मैं पृष्ठ पर रंग करने के लिए 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> 

समायोजन सबसे सरल उदाहरण का इस्तेमाल किया और आकार काफी मुश्किल है और star.gif और .css फ़ाइल

Answer 5

यहाँ jQuery के मोबाइल के साथ अपने समाधान है में परिवर्तन की जरूरत है। आप इसे पसंद उम्मीद है कि:

<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/