pecintaseni
/
engineN
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
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.
181 Commits
1 Branch
0 Tags
510 MiB
 
 
 
 
 
 
Branch: main
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'main'
${ noResults }
engineN/public/theme/plugins/jquery-bar-rating/examples/index.html

601 lines
23 KiB
Raw Permalink Blame History

<!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>&nbsp;
<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>
&lt;select id=&quot;example&quot;&gt;
&lt;option value=&quot;1&quot;&gt;1&lt;/option&gt;
&lt;option value=&quot;2&quot;&gt;2&lt;/option&gt;
&lt;option value=&quot;3&quot;&gt;3&lt;/option&gt;
&lt;option value=&quot;4&quot;&gt;4&lt;/option&gt;
&lt;option value=&quot;5&quot;&gt;5&lt;/option&gt;
&lt;/select&gt;
</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>
&lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css"&gt;
&lt;link rel="stylesheet" href="fontawesome-stars.css"&gt;
</code>
</pre>
</li>
<li>
<p>
Include and call the plugin (after jQuery v1.7.2+)
</p>
<pre>
<code>
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="jquery.barrating.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
$(function() {
$('#example').barrating({
theme: 'fontawesome-stars'
});
});
&lt;/script&gt;
</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>
</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>
&lt;div class=&quot;br-wrapper br-theme-fontawesome-stars&quot;&gt;
&lt;select id=&quot;example&quot;&gt; &lt;!-- now hidden --&gt;
&lt;option value=&quot;1&quot;&gt;1&lt;/option&gt;
&lt;option value=&quot;2&quot;&gt;2&lt;/option&gt;
&lt;option value=&quot;3&quot;&gt;3&lt;/option&gt;
&lt;option value=&quot;4&quot;&gt;4&lt;/option&gt;
&lt;option value=&quot;5&quot;&gt;5&lt;/option&gt;
&lt;/select&gt;
...rating widget...
&lt;/div&gt;
</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>
&lt;select id=&quot;example&quot;&gt;
&lt;option value=&quot;&quot;&gt;&lt;/option&gt;
&lt;option value=&quot;1&quot;&gt;1&lt;/option&gt;
&lt;option value=&quot;2&quot;&gt;2&lt;/option&gt;
&lt;option value=&quot;3&quot;&gt;3&lt;/option&gt;
&lt;/select&gt;
</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 &lt;option&gt; elements that will take precedence
over actual option value.
</p>
<pre>
<code>
&lt;select id=&quot;example&quot;&gt;
&lt;option value=&quot;1&quot; data-html=&quot;good&quot;&gt;1&lt;/option&gt;
&lt;option value=&quot;2&quot; data-html=&quot;better&quot;&gt;2&lt;/option&gt;
&lt;option value=&quot;3&quot; data-html=&quot;best&quot;&gt;3&lt;/option&gt;
&lt;/select&gt;
</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>