I looked around for a nice easy rating field using stars. Just like the ones you find on tripAdvisor. All the solutions looked a little CSS or JS heavy and needed images which are more HTTP connections.
So my solution uses only a little CSS, a small amount of jQuery and font-awesome. You'll have to get font-awesome for it to work.
See below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Font awesome stars</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" />
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
.star-selected
{
color:pink;
}
</style>
</head>
<body>
<form method="POST" action="someaction.php">
<div class="form-group">
<input type="hidden" name="stars">
<i class="fa fa-star" aria-hidden="true" value="1"></i>
<i class="fa fa-star" aria-hidden="true" value="2"></i>
<i class="fa fa-star" aria-hidden="true" value="3"></i>
<i class="fa fa-star" aria-hidden="true" value="4"></i>
<i class="fa fa-star" aria-hidden="true" value="5"></i>
</div>
<button type="submit">Submit</button>
</form>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script>
(function()
{
var theStars = $('form').find('i');
$('i').on('click', function()
{
theStars.removeClass('star-selected');
var theStarIclicked = $(this);
var highVal = theStarIclicked.attr('value');
theStarIclicked.addClass('star-selected');
$("input[name='stars']").attr('value',highVal);
theStars.each(function(i)
{
if($(this).attr('value') < highVal)
{
$(this).addClass('star-selected');
}
});
console.log('Star selected '+$("input[name='stars']").attr('value'));
});
})();
</script>
</body>
</html>
No comments:
Post a Comment