यहां आपके लिए एक समाधान है, केवल एक बहुत छोटी और सरल छवि का उपयोग करके और एक स्वचालित रूप से उत्पन्न अवधि तत्व:
सीएसएस
span.stars, span.stars span {
display: block;
background: url(stars.png) 0 -16px repeat-x;
width: 80px;
height: 16px;
}
span.stars span {
background-position: 0 0;
}
छवि
(स्रोत: ulmanen.fi )
नोट: है नहीं ऊपर छवि को hotlink! फ़ाइल को अपने सर्वर पर कॉपी करें और वहां से इसका उपयोग करें।
jQuery
$.fn.stars = function() {
return $(this).each(function() {
// Get the value
var val = parseFloat($(this).html());
// Make sure that the value is in 0 - 5 range, multiply to get width
var size = Math.max(0, (Math.min(5, val))) * 16;
// Create stars holder
var $span = $('<span />').width(size);
// Replace the numerical value with stars
$(this).html($span);
});
}
यदि आप सितारों को केवल आधा या चौथाई स्टार आकार तक सीमित करना चाहते हैं, तो var sizeपंक्ति से पहले इनमें से एक पंक्ति जोड़ें:
val = Math.round(val * 4) / 4; /* To round to nearest quarter */
val = Math.round(val * 2) / 2; /* To round to nearest half */
एचटीएमएल
<span class="stars">4.8618164</span>
<span class="stars">2.6545344</span>
<span class="stars">0.5355</span>
<span class="stars">8</span>
प्रयोग
$(function() {
$('span.stars').stars();
});
उत्पादन
(स्रोत: ulmanen.fi )
डेमो
http://www.ulmanen.fi/stuff/stars.php
यह संभवतः आपकी आवश्यकताओं के अनुरूप होगा। इस पद्धति के साथ आपको किसी भी तीन तिमाही या व्हाट्सएप स्टार चौड़ाई की गणना करने की आवश्यकता नहीं है, बस इसे एक फ्लोट दें और यह आपको आपके सितारे देगा।
तारों को कैसे प्रस्तुत किया जाता है, इस पर एक छोटा विवरण क्रम में हो सकता है।
स्क्रिप्ट दो ब्लॉक स्तर स्पैन तत्वों को बनाता है। दोनों स्पैनों को आमतौर पर 80px * 16px और एक बैकग्राउंड इमेज स्टार्स का आकार मिलता है। png स्पैन घोंसले के शिकार होते हैं, ताकि स्पैन की संरचना इस तरह दिखे:
<span class="stars">
<span></span>
</span>
बाहरी अवधि एक हो जाता है background-positionकी 0 -16px। जो बाहरी फैलाव में ग्रे सितारों को दिखाई देता है। चूंकि बाहरी स्पैन की ऊंचाई 16px है और repeat-x, इसमें केवल 5 ग्रे स्टार दिखाई देंगे।
दूसरी ओर के आंतरिक स्पैन में एक है background-position, 0 0जो केवल पीले तारों को दिखाई देता है।
यह निश्चित रूप से दो अलग-अलग इमेजफाइल्स, star_yellow.png और star_gray.png के साथ काम करेगा। लेकिन जैसा कि तारों की एक निश्चित ऊंचाई है, हम उन्हें आसानी से एक छवि में जोड़ सकते हैं। यह सीएसएस स्प्राइट तकनीक का उपयोग करता है ।
अब, जैसा कि स्पैन नेस्टेड हैं, वे स्वचालित रूप से एक-दूसरे के ऊपर ओवरले होते हैं। डिफ़ॉल्ट स्थिति में, जब दोनों स्पैन की चौड़ाई 80px होती है, तो पीले तारे ग्रे तारों को पूरी तरह से अस्पष्ट कर देते हैं।
लेकिन जब हम आंतरिक स्पैन की चौड़ाई को समायोजित करते हैं, तो पीले तारों की चौड़ाई कम हो जाती है, ग्रे सितारों को प्रकट करते हैं।
सुगम्यता-वार, यह समझदारी होगी कि फ्लोट नंबर को आंतरिक स्पैन के अंदर छोड़ दिया जाए और इसे छिपा दिया text-indent: -9999pxजाए, ताकि CSS से बंद लोग कम से कम तारों के बजाय फ्लोटिंग पॉइंट नंबर देख सकें।
उम्मीद है कि कुछ समझ में आया।
अपडेटेड 2010/10/22
अब और भी अधिक कॉम्पैक्ट और कठिन समझना! एक लाइनर के लिए भी निचोड़ा जा सकता है:
$.fn.stars = function() {
return $(this).each(function() {
$(this).html($('<span />').width(Math.max(0, (Math.min(5, parseFloat($(this).html())))) * 16));
});
}
