Fast JavaScript 0-5 Stars Ratings HTML Generator
<style> | |
.stars-sup { | |
font-size: 75%; | |
position: relative; | |
top: -6px; | |
left: 6px; | |
} | |
</style> | |
<ul class="used-technologies"> | |
<li>Design UX<span class="stars-sup" data-stars="4"></span></li> | |
<li>Design Software<span class="stars-sup" data-stars="3"></span></li> | |
<li> Database Architecture<span class="stars-sup" data-stars="4"></span></li> | |
<li> .NET<span class="stars-sup" data-stars="4"></span></li> | |
<li> C# latest<span class="stars-sup" data-stars="4"></span></li> | |
<li> ASP.NET<span class="stars-sup" data-stars="3"></span></li> | |
<li> PHP<span class="stars-sup" data-stars="3"></span></li> | |
<li> Python<span class="stars-sup" data-stars="3"></span></li> | |
<li> Django<span class="stars-sup" data-stars="3"></span></li> | |
<li> JavaScript<span class="stars-sup" data-stars="4"></span></li> | |
<li> jQuery<span class="stars-sup" data-stars="5"></span></li> | |
<li> jQuery UI<span class="stars-sup" data-stars="3"></span></li> | |
<li> Dojo<span class="stars-sup" data-stars="2"></span></li> | |
<li> HTML5 Canvas<span class="stars-sup" data-stars="2"></span></li> | |
</ul> |
$(document).ready(function () { | |
//fast and simple stars ratings creation function | |
var stars = [ | |
'☆☆☆☆☆', //0 | |
'★☆☆☆☆', //1 | |
'★★☆☆☆', //2 | |
'★★★☆☆', //3 | |
'★★★★☆', //4 | |
'★★★★★' //5 | |
]; | |
$('[data-stars]').each(function (i, el) { | |
var numStars = $(el).data('stars'); | |
$(el).html('(' + stars[numStars] + ')'); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment