starry-rating
Version:
JavaScript star rating system
469 lines (425 loc) • 18.6 kB
HTML
<html lang='en-US'>
<head>
<meta charset='utf-8' />
<title>Starry</title>
<meta name='author' content='Andre Sieverding' />
<meta name='keywords' content='starry, starryjs, javascript, star, rating, star rating, starrating, js, github, andre sieverding, teddy, teddy95, github, five, five star rating, fuenf, fünf, sterne, sternebewertung, html, css, ajax, jquery' />
<meta name='description' content='Starry is a JavaScript star rating system based on Ajax.' />
<link rel='stylesheet' type='text/css' href='scripts/tipsy.css' />
<link rel='stylesheet' type='text/css' href='https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css' />
<link rel='stylesheet' type='text/css' href='https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css' />
<link rel='stylesheet' type='text/css' href='https://fonts.googleapis.com/css?family=Patrick+Hand' />
<link rel='stylesheet' type='text/css' href='starry.min.css' />
<link rel='shortcut icon' type='image/x-icon' href='icons/star_hover.png' />
<link rel='canonical' href='https://teddy95.github.io/Starry/index.html' />
<script type='text/javascript' language='javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
<script type='text/javascript' language='javascript' src='scripts/tipsy.js'></script>
<script type='text/javascript' language='javascript' src='starry.min.js'></script>
<script type='text/javascript' language='javascript'>
$(document).ready(function () {
var rating;
rating = new Starry('#rating');
rating.init({
stars: 5,
multiple: false,
startValue: 5,
readOnly: false,
iconPath: 'icons/1/',
tooltips: [
'Awful',
'Poor',
'Average',
'Good',
'Excellent'
],
success: function (level) {
if (level == 1) {
alert('That\'s a real shame!');
}
if (level == 5) {
alert('Thank you!');
}
}
});
var starry_first;
starry_first = new Starry('#starry_first');
starry_first.init({
stars: 5,
starSize: 24,
multiple: false,
startValue: 2.5,
readOnly: false,
iconPath: 'icons/8/',
tooltips: [
'Awful',
'Poor',
'Average',
'Good',
'Excellent'
]
});
var starry_second;
starry_second = new Starry('#starry_second');
starry_second.init({
stars: 6,
starSize: 24,
startValue: 3.6,
readOnly: true,
iconPath: 'icons/8/'
});
var starry_third;
starry_third = new Starry('#starry_third');
starry_third.init({
stars: 3,
starSize: 24,
multiple: true,
startValue: 0,
readOnly: false,
iconPath: 'icons/8/',
tooltips: [
'Bad',
'OK',
'Good'
]
});
var starry_4;
starry_4 = new Starry('#starry_4');
starry_4.init({
stars: 10,
starSize: 24,
multiple: true,
startValue: 6.35,
readOnly: false,
iconPath: 'icons/8/'
});
var starry_5;
starry_5 = new Starry('#starry_5');
starry_5.init({
stars: 8,
starSize: 24,
multiple: true,
startValue: 2.7,
readOnly: false,
iconPath: 'icons/8/',
success: function (level) {
alert('You voted: ' + level);
}
});
var starry_playground;
starry_playground = new Starry('#starry_playground');
starry_playground.init({
stars: 20,
multiple: true,
startValue: 0,
readOnly: false,
iconPath: 'icons/7/',
success: function (level) {
//
}
});
$('#destroy').off();
$('#destroy').click(function () {
starry_playground.destroy();
});
$('#rebuild').off();
$('#rebuild').click(function () {
starry_playground.rebuild();
});
$('#getRating').off();
$('#getRating').click(function () {
alert(starry_playground.getRating());
});
$('#enableMultiple').off();
$('#enableMultiple').click(function () {
starry_playground.update({
multiple: true
});
});
$('#disableMultiple').off();
$('#disableMultiple').click(function () {
starry_playground.update({
multiple: false
});
});
$('#enableReadonly').off();
$('#enableReadonly').click(function () {
starry_playground.update({
readOnly: true
});
});
$('#disableReadonly').off();
$('#disableReadonly').click(function () {
starry_playground.update({
readOnly: false
});
});
$('#switchIcon').off();
$('#switchIcon').click(function () {
var random;
random = 1 + parseInt(Math.random() * ((7 + 1) - 1));
random = 'icons/' + random + '/';
starry_playground.update({
iconPath: random
});
});
$('#enableTooltips').off();
$('#enableTooltips').click(function () {
starry_playground.update({
tooltips: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49', '50', '51', '52', '53', '54', '55', '56', '57', '58', '59', '60', '61', '62', '63', '64', '65', '66', '67', '68', '69', '70', '71', '72', '73', '74', '75', '76', '77', '78', '79', '80', '81', '82', '83', '84', '85', '86', '87', '88', '89', '90', '91', '92', '93', '94', '95', '96', '97', '98', '99', '100']
});
});
$('#disableTooltips').off();
$('#disableTooltips').click(function () {
starry_playground.update({
tooltips: false
});
});
$('#addSuccess').off();
$('#addSuccess').click(function () {
starry_playground.update({
success: function (level) {
alert('You voted: ' + level);
}
});
});
$('#removeSuccess').off();
$('#removeSuccess').click(function () {
starry_playground.update({
success: false
});
});
$('#stars').off();
$('#stars').change(function () {
starry_playground.update({
stars: $('#stars').val()
});
});
$('#startVal').off();
$('#startVal').change(function () {
starry_playground.setRating($('#startVal').val());
});
});
</script>
</head>
<body>
<div style='width: 100%; background: url(background_image.jpg) no-repeat scroll center -1400px transparent; padding: 40px; color: #ffffff; text-shadow: 0px -1px 0px #cccccc;'>
<div style='width: 800px; margin: 0 auto !important; text-align: center;'>
<h1 style='font-size: 100px'><i class='fa fa-star'></i> Starry</h1>
<br />
<div id='rating' name='rating'></div>
</div>
</div>
<div style='width: 100%; padding: 40px; background-color: #f2f1ed;'>
<div style='width: 800px; margin: 0 auto !important; text-align: center;'>
<iframe src="https://ghbtns.com/github-btn.html?user=Teddy95&repo=Starry&type=watch&count=true&size=large"
allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe> <iframe src="https://ghbtns.com/github-btn.html?user=Teddy95&repo=Starry&type=fork&count=true&size=large"
allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe>
</div>
</div>
<div style='width: 100%; padding: 40px;'>
<div style='width: 800px; margin: 0 auto !important;'>
<h1 id='Examples' style="text-align: center; font-family: 'Patrick Hand', cursive;"><i class='fa fa-lightbulb-o'></i> Examples</h1>
<hr />
<table class='table table-bordered table-striped'>
<tbody>
<tr>
<th>Example</th>
<th>Description</th>
</tr>
<tr>
<td><div id='starry_first' name='starry_first'></div></td>
<td>Five stars with tooltips. You may submit only one rating.<br />For tooltips you must include <a href='https://github.com/jaz303/tipsy'>tipsy</a>.</td>
</tr>
<tr>
<td><div id='starry_second' name='starry_second'></div></td>
<td>Six stars, you can't vote.</td>
</tr>
<tr>
<td><div id='starry_third' name='starry_third'></div></td>
<td>Three stars with tooltips. You can vote repeatedly.</td>
</tr>
<tr>
<td><div id='starry_4' name='starry_4'></div></td>
<td>Ten stars, you can vote repeatedly.</td>
</tr>
<tr>
<td><div id='starry_5' name='starry_5'></div></td>
<td>Eight stars, you can vote repeatedly. An alert appears on success.</td>
</tr>
</tbody>
</table>
</div>
</div>
<div style='width: 100%; background-color: #ffc600; padding: 40px; color: #ffffff; text-shadow: 0px -1px 0px #f2a500;'>
<div style='width: 800px; margin: 0 auto !important; text-align: center;'>
<a href='https://github.com/Teddy95/Starry/archive/v3.1.3.zip' class='btn btn-warning'><h4><i class='fa fa-download'></i> Download v3.1.3</h4></a> <a href='https://github.com/Teddy95/Starry' class='btn btn-warning'><h4><i class='fa fa-github'></i> View source on Github</h4></a>
</div>
</div>
<div style='width: 100%; padding: 40px;'>
<div style='width: 800px; margin: 0 auto !important;'>
<h1 id='Getting-Started' style="text-align: center; font-family: 'Patrick Hand', cursive;"><i class='fa fa-gamepad'></i> Playground</h1>
<hr />
<div style="text-align: center;">
<div id='starry_playground' name='starry_playground'>
Rebuild Starry!
</div>
<br />
<br />
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label for="stars">Stars</label>
<input id="stars" type="number" class="form-control" value="20" />
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label for="startVal">Start value</label>
<input id="startVal" type="number" class="form-control" value="0" />
</div>
</div>
</div>
<br />
<button id="destroy" class="btn btn-default">Destroy Starry</button>
<button id="rebuild" class="btn btn-default">Rebuild Starry</button>
<button id="getRating" class="btn btn-default">Get active rating</button>
<button id="enableMultiple" class="btn btn-default">Enable multiple rating</button>
<br />
<br />
<button id="disableMultiple" class="btn btn-default">Disable multiple rating</button>
<button id="enableReadonly" class="btn btn-default">Enable readonly</button>
<button id="disableReadonly" class="btn btn-default">Disable readonly</button>
<button id="enableTooltips" class="btn btn-default">Enable tooltips</button>
<br />
<br />
<button id="disableTooltips" class="btn btn-default">Disable tooltips</button>
<button id="addSuccess" class="btn btn-default">Add success function</button>
<button id="removeSuccess" class="btn btn-default">Remove success function</button>
<button id="switchIcon" class="btn btn-warning"><i class="fa fa-picture-o"></i> Switch icons</button>
</div>
</div>
</div>
<div style='width: 100%; background-color: #ffc600; padding: 40px; color: #ffffff; text-shadow: 0px -1px 0px #f2a500;'>
<div style='width: 800px; margin: 0 auto !important; text-align: center;'>
<a href='https://github.com/Teddy95/Starry/archive/v3.1.3.zip' class='btn btn-warning'><h4><i class='fa fa-download'></i> Download v3.1.3</h4></a> <a href='https://github.com/Teddy95/Starry' class='btn btn-warning'><h4><i class='fa fa-github'></i> View source on Github</h4></a>
</div>
</div>
<div style='width: 100%; padding: 40px;'>
<div style='width: 800px; margin: 0 auto !important;'>
<h1 id='Getting-Started' style="text-align: center; font-family: 'Patrick Hand', cursive;"><i class='fa fa-paper-plane-o'></i> Getting Started</h1>
<hr />
<p><b>Set up your HTML markup</b></p>
<p><pre><div id="starry" name="starry"></div></pre></p>
<hr />
<p><b>Add starry.css and starry.js in your <head></b> - Don't forget jQuery!</p>
<p><pre><link rel="stylesheet" type="text/css" href="starry/starry.min.css" /><br /><script type="text/javascript" language="javascript" src="starry/starry.min.js"></script></pre></p>
<hr />
<p><b>Initialize your star rating in your script file or an inline script tag</b></p>
<p><pre>$(document).ready(function () {<br />    var starry = new Starry('#starry');<br />    starry.init();<br />});</pre></p>
</div>
</div>
<div style='width: 100%; background-color: #ffc600; padding: 40px; color: #ffffff; text-shadow: 0px -1px 0px #f2a500;'>
<div style='width: 800px; margin: 0 auto !important; text-align: center;'>
<a href='https://github.com/Teddy95/Starry/archive/v3.1.3.zip' class='btn btn-warning'><h4><i class='fa fa-download'></i> Download v3.1.3</h4></a> <a href='https://github.com/Teddy95/Starry' class='btn btn-warning'><h4><i class='fa fa-github'></i> View source on Github</h4></a>
</div>
</div>
<div style='width: 100%; padding: 40px;'>
<div style='width: 800px; margin: 0 auto !important;'>
<h1 id='Options' style="text-align: center; font-family: 'Patrick Hand', cursive;"><i class='fa fa-cogs'></i> Options</h1>
<hr />
<table class='table table-bordered table-striped'>
<tbody>
<tr>
<th>Option</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
<tr>
<td>stars</td>
<td>int</td>
<td>5</td>
<td>Number of rating stars. (= y)</td>
</tr>
<tr>
<td>starSize</td>
<td>int</td>
<td>32</td>
<td>Height and width of star icons in pixel.</td>
</tr>
<tr>
<td>multiple</td>
<td>boolean</td>
<td>false</td>
<td>Determines whether the user can submit several ratings.</td>
</tr>
<tr>
<td>startValue</td>
<td>int</td>
<td>0</td>
<td>Preloaded rating. <code>{x ∈ ℝ<sub>+</sub> | x <= y}</code></td>
</tr>
<tr>
<td>readOnly</td>
<td>boolean</td>
<td>false</td>
<td>Determines whether the user can submit ratings.</td>
</tr>
<tr>
<td>iconPath</td>
<td>string</td>
<td>icons/</td>
<td>Path to rating icons.</td>
</tr>
<tr>
<td>tooltips</td>
<td>array</td>
<td>false</td>
<td>Tooltips for the stars. (You must include <a href='https://github.com/jaz303/tipsy'>tipsy</a>!)</td>
</tr>
<tr>
<td>success</td>
<td>function</td>
<td>false</td>
<td>A function to be called if the request succeeds. The function gets passed one argument: Your rating (3 for example).</td>
</tr>
</tbody>
</table>
</div>
</div>
<div style='width: 100%; background-color: #ffc600; padding: 40px; color: #ffffff; text-shadow: 0px -1px 0px #f2a500;'>
<div style='width: 800px; margin: 0 auto !important; text-align: center;'>
<a href='https://github.com/Teddy95/Starry/archive/v3.1.3.zip' class='btn btn-warning'><h4><i class='fa fa-download'></i> Download v3.1.3</h4></a> <a href='https://github.com/Teddy95/Starry' class='btn btn-warning'><h4><i class='fa fa-github'></i> View source on Github</h4></a>
</div>
</div>
<div style='width: 100%; padding: 40px;'>
<div style='width: 800px; margin: 0 auto !important;'>
<h1 id='Example-of-evaluation-with-PHP' style="text-align: center; font-family: 'Patrick Hand', cursive;"><i class='fa fa-code'></i> Example of evaluation with PHP</h1>
<hr />
<p><b>Starry script</b></p>
<p><pre>$(document).ready(function () {<br />    var starry = new Starry('#starry');<br />    starry.init({<br />        success: function (level) {<br />            $.post('rate.php', {<br />                rate: level<br />            });<br />        }<br />    });<br />});</pre></p>
<hr />
<p><b>PHP file <code>rate.php</code></b></p>
<p><pre><?php<br /># rate.php<br /><br />/**<br /> * In this example, we save the rating results in our database<br /> */<br /><br />// Read the rating result<br />$rate = (int)$_POST['rate'];<br /><br />// Create database connection<br />$db = new mysqli('localhost', 'root', 'password', 'database');<br /><br />// Our query<br />$query = "INSERT INTO `ratings` (`rating`) VALUES (?)";<br />$query = $db->prepare($query);<br />$query->bind_param('i', $rate);<br />$query->execute();<br /><br />// Close the statement and the database connection<br />$query->close();<br />$db->close();<br />?></pre></p>
</div>
</div>
<div style='width: 100%; background-color: #ffc600; padding: 40px; color: #ffffff; text-shadow: 0px -1px 0px #f2a500;'>
<div style='width: 800px; margin: 0 auto !important; text-align: center;'>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_donations">
<input type="hidden" name="business" value="mail@andre-sieverding.de">
<input type="hidden" name="lc" value="DE">
<input type="hidden" name="item_name" value="Starry">
<input type="hidden" name="no_note" value="0">
<input type="hidden" name="currency_code" value="EUR">
<input type="hidden" name="bn" value="PP-DonationsBF:btn_donate_LG.gif:NonHostedGuest">
<input id="paypalDonateButton" style="display: none;" type="image" src="https://www.paypalobjects.com/de_DE/DE/i/btn/btn_donate_LG.gif" border="0" name="submit" alt="Jetzt einfach, schnell und sicher online bezahlen – mit PayPal.">
<img alt="" style="display: none;" border="0" src="https://www.paypalobjects.com/de_DE/i/scr/pixel.gif" width="1" height="1">
</form>
<button onclick="document.getElementById('paypalDonateButton').click();" class="btn btn-warning"><i class="fa fa-coffee"></i> Buy me a coffee</button>
<h3><a href='https://github.com/Teddy95' style='color: #ffffff !important;'>Made with <i class='fa fa-heart'></i> by Teddy95!</a></h3>
</div>
</div>
</body>
</html>