কেবলমাত্র একটি খুব ক্ষুদ্র এবং সাধারণ চিত্র এবং একটি স্বয়ংক্রিয়ভাবে উত্পন্ন স্প্যান উপাদান ব্যবহার করে আপনার জন্য এখানে একটি সমাধান রয়েছে:
সিএসএস
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 )
দ্রষ্টব্য: উপরের চিত্রটিতে হটলিঙ্ক করবেন না ! আপনার নিজের সার্ভারে ফাইলটি অনুলিপি করুন এবং সেখান থেকে এটি ব্যবহার করুন।
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 আকার এবং একটি ব্যাকগ্রাউন্ড ইমেজ তারকারা পেয়েছে। স্প্যানগুলি বাসা বেঁধেছে, যাতে স্প্যানগুলির কাঠামোটি দেখতে এইরকম হয়:
<span class="stars">
<span></span>
</span>
বাইরের বিঘত একটি পায় background-positionএর 0 -16px। এটি বাইরের স্প্যানের ধূসর তারাগুলি দৃশ্যমান করে তোলে। বাইরের স্প্যানটির উচ্চতা 16px এবং repeat-xএটি কেবল 5 ধূসর তারা দেখায়।
অন্যদিকে অভ্যন্তরীণ স্প্যানগুলির মধ্যে একটি background-positionরয়েছে 0 0যা কেবল হলুদ নক্ষত্রকে দৃশ্যমান করে।
এটি অবশ্যই দুটি পৃথক চিত্রের ফাইল, স্টার_ইলো.পিএনজি এবং স্টার_গ্রায়.পিএনএ সাথে কাজ করবে। তবে তারকাদের একটি নির্দিষ্ট উচ্চতা হওয়ায় আমরা এগুলি সহজেই একটি চিত্রের সাথে সংযুক্ত করতে পারি। এটি সিএসএস স্প্রাইট কৌশলটি ব্যবহার করে ।
এখন, স্প্যানগুলি যেমন বাসা বেঁধেছে, সেগুলি স্বয়ংক্রিয়ভাবে একে অপরের উপরে আবৃত। ডিফল্ট ক্ষেত্রে, যখন উভয় স্প্যানের প্রস্থ 80px হয়, হলুদ তারাগুলি ধূসর তারাগুলি পুরোপুরি অস্পষ্ট করে।
তবে যখন আমরা অভ্যন্তরের স্প্যানটির প্রস্থ সামঞ্জস্য করি তখন ধূসর নক্ষত্র প্রকাশ করে হলুদ তারাগুলির প্রস্থ হ্রাস পায়।
অ্যাক্সেসযোগ্যতা অনুসারে, অভ্যন্তরের স্প্যানের অভ্যন্তরে ভাসমান নম্বরটি রেখে এটি লুকিয়ে রাখাই বুদ্ধিমানের কাজ হত text-indent: -9999px, যাতে সিএসএস বন্ধ হওয়া লোকেরা তারার পরিবর্তে কমপক্ষে ভাসমান পয়েন্ট নম্বরটি দেখতে পারে would
আশা করি কিছুটা বোধগম্য হয়েছিল।
আপডেট হয়েছে 2010/10/22
এখন আরও কমপ্যাক্ট এবং বুঝতে আরও কঠিন! একটি লাইনারে নিচে চেপে রাখা যায়:
$.fn.stars = function() {
return $(this).each(function() {
$(this).html($('<span />').width(Math.max(0, (Math.min(5, parseFloat($(this).html())))) * 16));
});
}
