606 lines
24 KiB
HTML
606 lines
24 KiB
HTML
<!doctype html>
|
|
<html class="no-js" lang="">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
|
<title>jQuery Bar Rating - Minimal, light-weight jQuery ratings</title>
|
|
<meta name="description" content="">
|
|
<meta name="viewport" content="width=1024, initial-scale=1">
|
|
|
|
<link rel="stylesheet" href="css/normalize.min.css">
|
|
<link rel="stylesheet" href="css/main.css">
|
|
<link rel="stylesheet" href="css/examples.css">
|
|
|
|
<!-- Icons -->
|
|
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
|
|
<style>
|
|
@font-face {
|
|
font-family: 'Glyphicons Halflings';
|
|
src:url('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/fonts/glyphicons-halflings-regular.eot');
|
|
src:url('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
|
|
url('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/fonts/glyphicons-halflings-regular.woff') format('woff'),
|
|
url('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/fonts/glyphicons-halflings-regular.ttf') format('truetype'),
|
|
url('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
|
|
}
|
|
</style>
|
|
|
|
<!-- Themes -->
|
|
<link rel="stylesheet" href="../dist/themes/bars-1to10.css">
|
|
<link rel="stylesheet" href="../dist/themes/bars-movie.css">
|
|
<link rel="stylesheet" href="../dist/themes/bars-square.css">
|
|
<link rel="stylesheet" href="../dist/themes/bars-pill.css">
|
|
<link rel="stylesheet" href="../dist/themes/bars-reversed.css">
|
|
<link rel="stylesheet" href="../dist/themes/bars-horizontal.css">
|
|
|
|
<link rel="stylesheet" href="../dist/themes/fontawesome-stars.css">
|
|
<link rel="stylesheet" href="../dist/themes/css-stars.css">
|
|
<link rel="stylesheet" href="../dist/themes/bootstrap-stars.css">
|
|
<link rel="stylesheet" href="../dist/themes/fontawesome-stars-o.css">
|
|
|
|
<!-- Fonts -->
|
|
<link href="http://fonts.googleapis.com/css?family=Lato:300,400" rel="stylesheet" type="text/css">
|
|
<link href="http://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
|
|
|
|
<!--[if lt IE 9]>
|
|
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
|
<script>window.html5 || document.write('<script src="js/vendor/html5shiv.js"><\/script>')</script>
|
|
<![endif]-->
|
|
</head>
|
|
<body>
|
|
<!--[if lt IE 9]>
|
|
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
|
|
<![endif]-->
|
|
|
|
<a href="http://github.com/antennaio/jquery-bar-rating" target="_blank" class="github" title="Fork me on GitHub"></a>
|
|
|
|
<section class="section section-intro">
|
|
<div class="bars"></div>
|
|
<h1>jQuery Bar Rating</h1>
|
|
<p class="tagline">Minimal, light-weight jQuery ratings.</p>
|
|
<p>
|
|
jQuery Bar Rating Plugin works by transforming a standard
|
|
select field into a rating widget. The rating widget can be
|
|
flexibly styled with CSS. Take a look at a few examples.
|
|
</p>
|
|
</section>
|
|
|
|
<section class="section section-examples">
|
|
<div class="controls">
|
|
<a href="#" class="deactivated rating-enable">enable</a>
|
|
<a href="#" class="rating-disable">disable</a>
|
|
</div>
|
|
<div class="examples">
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="box box-orange box-example-1to10">
|
|
<div class="box-header">1/10 Rating</div>
|
|
<div class="box-body">
|
|
<select id="example-1to10" name="rating" autocomplete="off">
|
|
<option value="1">1</option>
|
|
<option value="2">2</option>
|
|
<option value="3">3</option>
|
|
<option value="4">4</option>
|
|
<option value="5">5</option>
|
|
<option value="6">6</option>
|
|
<option value="7" selected="selected">7</option>
|
|
<option value="8">8</option>
|
|
<option value="9">9</option>
|
|
<option value="10">10</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="box box-blue box-example-movie">
|
|
<div class="box-header">Movie Rating</div>
|
|
<div class="box-body">
|
|
<select id="example-movie" name="rating" autocomplete="off">
|
|
<option value="Bad">Bad</option>
|
|
<option value="Mediocre">Mediocre</option>
|
|
<option value="Good" selected="selected">Good</option>
|
|
<option value="Awesome">Awesome</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="box box-blue box-example-square">
|
|
<div class="box-header">Square Rating</div>
|
|
<div class="box-body">
|
|
<select id="example-square" name="rating" autocomplete="off">
|
|
<option value=""></option>
|
|
<option value="1">1</option>
|
|
<option value="2">2</option>
|
|
<option value="3">3</option>
|
|
<option value="4">4</option>
|
|
<option value="5">5</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="box box-green box-example-pill">
|
|
<div class="box-header">Pill Rating</div>
|
|
<div class="box-body">
|
|
<select id="example-pill" name="rating" autocomplete="off">
|
|
<option value="A">A</option>
|
|
<option value="B">B</option>
|
|
<option value="C">C</option>
|
|
<option value="D">D</option>
|
|
<option value="E">E</option>
|
|
<option value="F">F</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="box box-green box-large box-example-reversed">
|
|
<div class="box-header">Reversed Rating</div>
|
|
<div class="box-body">
|
|
<select id="example-reversed" name="rating" autocomplete="off">
|
|
<option value="Strongly Agree">Strongly Agree</option>
|
|
<option value="Agree">Agree</option>
|
|
<option value="Neither Agree or Disagree" selected="selected">Neither Agree or Disagree</option>
|
|
<option value="Disagree">Disagree</option>
|
|
<option value="Strongly Disagree">Strongly Disagree</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="box box-orange box-large box-example-horizontal">
|
|
<div class="box-header">Horizontal Rating</div>
|
|
<div class="box-body">
|
|
<select id="example-horizontal" name="rating" autocomplete="off">
|
|
<option value="10">10</option>
|
|
<option value="9">9</option>
|
|
<option value="8">8</option>
|
|
<option value="7">7</option>
|
|
<option value="6">6</option>
|
|
<option value="5">5</option>
|
|
<option value="4">4</option>
|
|
<option value="3">3</option>
|
|
<option value="2">2</option>
|
|
<option value="1" selected="selected">1</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col col-fullwidth">
|
|
<div class="star-ratings start-ratings-main clearfix">
|
|
<h1>How about star ratings?</h1>
|
|
<p>The plugin comes with a few flavours of star ratings compatible with popular libraries.</p>
|
|
<div class="stars stars-example-fontawesome">
|
|
<select id="example-fontawesome" name="rating" autocomplete="off">
|
|
<option value="1">1</option>
|
|
<option value="2">2</option>
|
|
<option value="3">3</option>
|
|
<option value="4">4</option>
|
|
<option value="5">5</option>
|
|
</select>
|
|
<span class="title">Font Awesome</span>
|
|
</div>
|
|
<div class="stars stars-example-css">
|
|
<select id="example-css" name="rating" autocomplete="off">
|
|
<option value="1">1</option>
|
|
<option value="2">2</option>
|
|
<option value="3">3</option>
|
|
<option value="4">4</option>
|
|
<option value="5">5</option>
|
|
</select>
|
|
<span class="title">CSS Stars</span>
|
|
</div>
|
|
<div class="stars stars-example-bootstrap">
|
|
<select id="example-bootstrap" name="rating" autocomplete="off">
|
|
<option value="1">1</option>
|
|
<option value="2">2</option>
|
|
<option value="3">3</option>
|
|
<option value="4">4</option>
|
|
<option value="5">5</option>
|
|
</select>
|
|
<span class="title">Bootstrap</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col col-fullwidth">
|
|
<div class="star-ratings">
|
|
<p>It can be used to display fractional star ratings.</p>
|
|
<div class="stars stars-example-fontawesome-o">
|
|
<select id="example-fontawesome-o" name="rating" data-current-rating="5.6" autocomplete="off">
|
|
<option value=""></option>
|
|
<option value="1">1</option>
|
|
<option value="2">2</option>
|
|
<option value="3">3</option>
|
|
<option value="4">4</option>
|
|
<option value="5">5</option>
|
|
<option value="6">6</option>
|
|
<option value="7">7</option>
|
|
<option value="8">8</option>
|
|
<option value="9">9</option>
|
|
<option value="10">10</option>
|
|
</select>
|
|
<span class="title current-rating">
|
|
Current rating: <span class="value"></span>
|
|
</span>
|
|
<span class="title your-rating hidden">
|
|
Your rating: <span class="value"></span>
|
|
<a href="#" class="clear-rating"><i class="fa fa-times-circle"></i></a>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section section-docs">
|
|
<div class="docs">
|
|
<div class="how-to-use">
|
|
<header>How to use</header>
|
|
<div class="instructions">
|
|
<ol>
|
|
<li>
|
|
<p>
|
|
Get the plugin from <a href="http://github.com/antennaio/jquery-bar-rating">GitHub</a>
|
|
or install with Bower or NPM:
|
|
</p>
|
|
|
|
<pre>
|
|
<code>
|
|
bower install jquery-bar-rating
|
|
</code>
|
|
</pre>
|
|
|
|
<pre>
|
|
<code>
|
|
npm install jquery-bar-rating
|
|
</code>
|
|
</pre>
|
|
|
|
</li>
|
|
<li>
|
|
<p>Create a select field:</p>
|
|
|
|
<pre>
|
|
<code>
|
|
<select id="example">
|
|
<option value="1">1</option>
|
|
<option value="2">2</option>
|
|
<option value="3">3</option>
|
|
<option value="4">4</option>
|
|
<option value="5">5</option>
|
|
</select>
|
|
</code>
|
|
</pre>
|
|
|
|
</li>
|
|
<li>
|
|
<p>
|
|
If you would like to use one of the provided themes include the theme
|
|
in the head section of the page. Adjust the path to the CSS file
|
|
and make sure it points to the correct theme file. In this example we are
|
|
also pulling Font Awesome icons from a CDN.
|
|
</p>
|
|
|
|
<pre>
|
|
<code>
|
|
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
|
|
<link rel="stylesheet" href="fontawesome-stars.css">
|
|
</code>
|
|
</pre>
|
|
|
|
</li>
|
|
<li>
|
|
<p>
|
|
Include and call the plugin (after jQuery v1.7.2+)
|
|
</p>
|
|
|
|
<pre>
|
|
<code>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
|
|
<script src="jquery.barrating.min.js"></script>
|
|
<script type="text/javascript">
|
|
$(function() {
|
|
$('#example').barrating({
|
|
theme: 'fontawesome-stars'
|
|
});
|
|
});
|
|
</script>
|
|
</code>
|
|
</pre>
|
|
|
|
</li>
|
|
<li>
|
|
You are done.
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="configuration" id="nav-configuration">
|
|
<header>Configuration</header>
|
|
<div class="instructions">
|
|
<p>
|
|
<strong>theme: ''</strong><br>
|
|
Defines a theme.
|
|
</p>
|
|
<p>
|
|
<strong>initialRating: null</strong><br>
|
|
Defines initial rating.
|
|
</p>
|
|
<p>
|
|
The default value is `null`, which means that the plugin will try to set the initial rating by finding an option with a `selected` attribute.
|
|
</p>
|
|
<p>
|
|
Optionally, if your ratings are numeric, you can pass a fractional rating here (2.5, 2.8, 5.5). Currently the only theme that supports displaying of fractional ratings is the `fontawesome-stars-o` theme.
|
|
</p>
|
|
<p>
|
|
<strong>allowEmpty: null</strong><br>
|
|
If set to true, users will be able to submit empty ratings.
|
|
</p>
|
|
<p>
|
|
The default value is `null`, which means that empty ratings will be allowed under the condition that the select field already contains a first option with an empty value.
|
|
</p>
|
|
<p>
|
|
<strong>emptyValue: ''</strong><br>
|
|
Defines a value that will be considered empty. It is unlikely you will need to modify this setting.
|
|
</p>
|
|
<p>
|
|
<strong>showValues: false</strong><br>
|
|
If set to true, rating values will be displayed on the bars.
|
|
</p>
|
|
<p>
|
|
<strong>showSelectedRating: true</strong><br>
|
|
If set to true, user selected rating will be displayed next to the widget.
|
|
</p>
|
|
<p>
|
|
<strong>deselectable: true</strong><br>
|
|
If set to true, users will be able to deselect ratings.
|
|
</p>
|
|
<p>
|
|
For this feature to work the `allowEmpty` setting needs to be set to `true` or the select field must contain a first option with an empty value.
|
|
</p>
|
|
<p>
|
|
<strong>reverse: false</strong><br>
|
|
If set to true, the ratings will be reversed.
|
|
</p>
|
|
<p>
|
|
<strong>readonly: false</strong><br>
|
|
If set to true, the ratings will be read-only.
|
|
</p>
|
|
<p>
|
|
<strong>fastClicks: true</strong><br>
|
|
Remove 300ms click delay on touch devices.
|
|
</p>
|
|
<p>
|
|
<strong>hoverState: true</strong><br>
|
|
Change state on hover.
|
|
</p>
|
|
<p>
|
|
<strong>silent: false</strong><br>
|
|
Supress callbacks when controlling ratings programatically.
|
|
</p>
|
|
<p>
|
|
<strong>triggerChange: true</strong><br>
|
|
Trigger change event on the select field when ratings are set or reset.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="methods" id="nav-methods">
|
|
<header>Methods</header>
|
|
<div class="instructions">
|
|
<p>
|
|
<strong>$('select').barrating('show');</strong><br>
|
|
Shows the rating widget.
|
|
</p>
|
|
<p>
|
|
<strong>$('select').barrating('set', value);</strong><br>
|
|
Sets the value of the rating widget.<br>
|
|
The value needs to exist in the underlying select field.
|
|
</p>
|
|
<p>
|
|
<strong>$('select').barrating('readonly', state);</strong><br>
|
|
Switches the read-only state to true or false.<br>
|
|
</p>
|
|
<p>
|
|
<strong>$('select').barrating('clear');</strong><br>
|
|
Clears the rating.
|
|
</p>
|
|
<p>
|
|
<strong>$('select').barrating('destroy');</strong><br>
|
|
Destroys the rating widget.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="callbacks" id="nav-callbacks">
|
|
<header>Callbacks</header>
|
|
<div class="instructions">
|
|
<p>
|
|
<strong>onSelect:function(value, text, event)</strong><br>
|
|
Fired when a rating is selected.<br>
|
|
If the rating was set programmatically by using the `set` method event will be null.
|
|
</p>
|
|
<p>
|
|
<strong>onClear:function(value, text)</strong><br>
|
|
Fired when a rating is cleared.
|
|
</p>
|
|
<p>
|
|
<strong>onDestroy:function(value, text)</strong><br>
|
|
Fired when a rating is destroyed.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="faq" id="nav-faq">
|
|
<header>FAQ</header>
|
|
<div class="instructions">
|
|
<div class="question">
|
|
<p>
|
|
<strong>How does this plugin work?</strong>
|
|
</p>
|
|
<p>
|
|
When you initialise the plugin the select field will be wrapped in a div
|
|
with a `.br-theme-fontawesome-stars` class (or a different class indicating
|
|
the theme currently in use). The select field will get hidden and a rating widget
|
|
will be appended right after the select field.
|
|
</p>
|
|
<p>Expected result:</p>
|
|
|
|
<pre>
|
|
<code>
|
|
<div class="br-wrapper br-theme-fontawesome-stars">
|
|
<select id="example"> <!-- now hidden -->
|
|
<option value="1">1</option>
|
|
<option value="2">2</option>
|
|
<option value="3">3</option>
|
|
<option value="4">4</option>
|
|
<option value="5">5</option>
|
|
</select>
|
|
...rating widget...
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
|
|
</div>
|
|
<div class="question">
|
|
<p>
|
|
<strong>How do I allow users to select empty ratings?</strong>
|
|
</p>
|
|
<p>
|
|
To allow users to select empty ratings simply set the `allowEmpty`
|
|
setting to `true` or alternatively include an option with an empty value
|
|
in your select field:
|
|
</p>
|
|
|
|
<pre>
|
|
<code>
|
|
<select id="example">
|
|
<option value=""></option>
|
|
<option value="1">1</option>
|
|
<option value="2">2</option>
|
|
<option value="3">3</option>
|
|
</select>
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
<div class="question">
|
|
<p>
|
|
<strong>How can I specify text that is displayed on the bars?</strong>
|
|
</p>
|
|
<p>
|
|
The `showValues` plugin setting already makes it easy to display
|
|
option values directly on the bars. For more control over the text
|
|
that is displayed on the bars you can define `data-html` attribute
|
|
on each of the <option> elements that will take precedence
|
|
over actual option value.
|
|
</p>
|
|
|
|
<pre>
|
|
<code>
|
|
<select id="example">
|
|
<option value="1" data-html="good">1</option>
|
|
<option value="2" data-html="better">2</option>
|
|
<option value="3" data-html="best">3</option>
|
|
</select>
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
<div class="question">
|
|
<p>
|
|
<strong>How do I use the onSelect callback?</strong>
|
|
</p>
|
|
<p>
|
|
The onSelect callback is fired when a user selects a rating or when the
|
|
`set` method is called to select a rating programmatically. The optional
|
|
third argument will give you access to the event object if it's available.
|
|
</p>
|
|
|
|
<pre>
|
|
<code>
|
|
$('#example').barrating('show', {
|
|
theme: 'my-awesome-theme',
|
|
onSelect: function(value, text, event) {
|
|
if (typeof(event) !== 'undefined') {
|
|
// rating was selected by a user
|
|
console.log(event.target);
|
|
} else {
|
|
// rating was selected programmatically
|
|
// by calling `set` method
|
|
}
|
|
}
|
|
});
|
|
</code>
|
|
</pre>
|
|
<p>
|
|
Often you don't want the callback to run at all when a rating is selected
|
|
with the `set` method. If this is the case please use the <a href="#nav-configuration">
|
|
`silent`</a> option.
|
|
</p>
|
|
</div>
|
|
<div class="question">
|
|
<p>
|
|
<strong>Is keyboard navigation supported?</strong>
|
|
</p>
|
|
<p>
|
|
Since the rating widget consists of anchor elements, you can tab or shift-tab between
|
|
elements and press `Enter` to select a rating.
|
|
</p>
|
|
</div>
|
|
<div class="question">
|
|
<p>
|
|
<strong>Can the plugin be used outside of Javascript ecosystem?</strong>
|
|
</p>
|
|
<p>
|
|
Harvey Lieberman (<a href="https://github.com/harveyl888" target="_blank">@harveyl888</a>) created
|
|
an R htmlwidget wrapper for the jQuery Bar Rating plugin. For more details go to:
|
|
</p>
|
|
<p>
|
|
<a href="https://github.com/harveyl888/barRating" target="_blank">
|
|
https://github.com/harveyl888/barRating</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="license" id="nav-license">
|
|
<header>License</header>
|
|
<div class="instructions">
|
|
<p>This plugin is available under the MIT license:</p>
|
|
<p>
|
|
<a href="http://www.opensource.org/licenses/mit-license.php" target="_blank">
|
|
http://www.opensource.org/licenses/mit-license.php</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="download" id="nav-download">
|
|
<header>Download</header>
|
|
<div class="instructions">
|
|
<p>Download it at GitHub:</p>
|
|
<p>
|
|
<a href="http://github.com/antennaio/jquery-bar-rating" target="_blank">
|
|
http://github.com/antennaio/jquery-bar-rating</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<a href="http://antenna.io" class="antennaio" target="_blank">
|
|
<span>Made by ANTENNA.IO</span>
|
|
</a>
|
|
|
|
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
|
|
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
|
|
|
|
<script src="../jquery.barrating.js"></script>
|
|
<script src="js/examples.js"></script>
|
|
</body>
|
|
</html>
|