mirror of
https://gitlab.com/JKANetwork/CheckServer.git
synced 2026-02-23 13:33:47 +01:00
Start again
This commit is contained in:
90
vendors/starrr/index.html
vendored
Normal file
90
vendors/starrr/index.html
vendored
Normal file
@@ -0,0 +1,90 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user