mirror of https://github.com/ColorlibHQ/gentelella
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
91 lines
2.7 KiB
91 lines
2.7 KiB
9 years ago
|
<!doctype html>
|
||
|
|
<head>
|
||
|
|
<title>Starrr, for jQuery</title>
|
||
|
|
<meta name="description" content="">
|
||
|
|
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
|
||
|
|
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css">
|
||
|
|
<link rel="stylesheet" href="dist/starrr.css">
|
||
|
|
<style type='text/css'>
|
||
|
|
img.ribbon {
|
||
|
|
position: fixed;
|
||
|
|
z-index: 1;
|
||
|
|
top: 0;
|
||
|
|
right: 0;
|
||
|
|
border: 0;
|
||
|
|
cursor: pointer; }
|
||
|
|
|
||
|
|
.container {
|
||
|
|
margin-top: 60px;
|
||
|
|
text-align: center;
|
||
|
|
max-width: 450px; }
|
||
|
|
|
||
|
|
input {
|
||
|
|
width: 30px;
|
||
|
|
margin: 10px 0;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<a href="https://github.com/dobtco/starrr">
|
||
|
|
<img class="ribbon" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub">
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<div class="container">
|
||
|
|
<h3>Starrr</h3>
|
||
|
|
|
||
|
|
<h5>Click to rate:</h5>
|
||
|
|
<div class='starrr' id='star1'></div>
|
||
|
|
<div>
|
||
|
|
<span class='your-choice-was' style='display: none;'>
|
||
|
|
Your rating was <span class='choice'></span>.
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h5>Advanced:</h5>
|
||
|
|
<div class='starrr' id='star2'></div>
|
||
|
|
<br />
|
||
|
|
<input type='text' name='rating' value='3' id='star2_input' />
|
||
|
|
|
||
|
|
<h5>Why?</h5>
|
||
|
|
<p>There are other libraries out there, but none that approach the level clarity and conciseness that I wanted. Starrr is less than 75 lines of code -- you can understand the entirety of its source code in about a minute.</p>
|
||
|
|
|
||
|
|
<h5>Dependencies</h5>
|
||
|
|
<p>jQuery.</p>
|
||
|
|
<p>I'm using Bootstrap + Font Awesome to render the stars, but you're more than welcome to use something else.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
|
||
|
|
<script src="dist/starrr.js"></script>
|
||
|
|
<script>
|
||
|
|
$('#star1').starrr({
|
||
|
|
change: function(e, value){
|
||
|
|
if (value) {
|
||
|
|
$('.your-choice-was').show();
|
||
|
|
$('.choice').text(value);
|
||
|
|
} else {
|
||
|
|
$('.your-choice-was').hide();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
var $s2input = $('#star2_input');
|
||
|
|
$('#star2').starrr({
|
||
|
|
max: 10,
|
||
|
|
rating: $s2input.val(),
|
||
|
|
change: function(e, value){
|
||
|
|
$s2input.val(value).trigger('input');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
<script type="text/javascript">
|
||
|
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||
|
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||
|
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||
|
|
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||
|
|
|
||
|
|
ga('create', 'UA-39205841-5', 'dobtco.github.io');
|
||
|
|
ga('send', 'pageview');
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|