jQuery Bar Rating / Дизайн / Плагины Bootstrap

Версия: v1.2.1

Каталог: Плагины Bootstrap

Категория: Дизайн

Для Bootstrap: 3, 4

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop

Язык: Английский

Вес файла: 107.8 Kb

Уникальный ID: 3266

Посмотрели: 1330 раз

Скачать бесплатно

Скачали бесплатно: 25 раз

Прокомментировали: 0 раз

Рейтинг: 5.0 / 5 - 2 голосов

Тип лицензии: CC BY 4.0

Авторство: //github.com/antennaio/jquery-bar-rating

Информация: Пользователям

Информация: Правообладателям

Теги: Plugin, рейтинг, rating jquery, jquery rating, Bootstrap, rating

Поделился: BootstrapTwitter

Добавлено: 2019-01-13 в 01:29

Метка: 1582281874

⇄ ⇅

<section>
 <div class="controls text-center">
<h1 class="mt-3 mb-3">jQuery Bar Rating & BootstrapTema</h1>
 <a href="#" class="deactivated rating-enable btn btn-success">enable</a>
 <a href="#" class="rating-disable btn btn-danger">disable</a>
 </div>
 <div class="container">
 <div class="row">

<div class="col-6 mt-3">
 <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-6 mt-3">
 <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-6 mt-3">
 <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-6 mt-3">
 <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-6 mt-3">
 <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-6 mt-3">
 <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-12">
 <h1 class="text-center">How about star ratings?</h1>
 <p class="text-center">The plugin comes with a few flavours of star ratings compatible with popular libraries.</p>
 </div>
 <div class="stars-example-fontawesome col-4 mt-3">
 <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-example-css col-4 mt-3">
 <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-example-bootstrap col-4 mt-3">
 <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 class="col-md-4 offset-4 mt-3">
 <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>
 </section>

$('#example-movie').barrating('show', {
 theme: 'bars-movie'
 });

$('#example-movie').barrating('set', 'Mediocre');

$('#example-square').barrating('show', {
 theme: 'bars-square',
 showValues: true,
 showSelectedRating: false
 });

$('#example-pill').barrating('show', {
 theme: 'bars-pill',
 initialRating: 'A',
 showValues: true,
 showSelectedRating: false,
 allowEmpty: true,
 emptyValue: '-- no rating selected --',
 onSelect: function(value, text) {
 alert('Selected rating: ' + value);
 }
 });

$('#example-reversed').barrating('show', {
 theme: 'bars-reversed',
 showSelectedRating: true,
 reverse: true
 });

$('#example-horizontal').barrating('show', {
 theme: 'bars-horizontal',
 reverse: true,
 hoverState: false
 });

$('#example-fontawesome').barrating({
 theme: 'fontawesome-stars',
 showSelectedRating: false
 });

$('#example-css').barrating({
 theme: 'css-stars',
 showSelectedRating: false
 });

$('#example-bootstrap').barrating({
 theme: 'bootstrap-stars',
 showSelectedRating: false
 });

var currentRating = $('#example-fontawesome-o').data('current-rating');

$('.stars-example-fontawesome-o .current-rating')
 .find('span')
 .html(currentRating);

$('.stars-example-fontawesome-o .clear-rating').on('click', function(event) {
 event.preventDefault();

$('#example-fontawesome-o')
 .barrating('clear');
 });

$('#example-fontawesome-o').barrating({
 theme: 'fontawesome-stars-o',
 showSelectedRating: false,
 initialRating: currentRating,
 onSelect: function(value, text) {
 if (!value) {
 $('#example-fontawesome-o')
 .barrating('clear');
 } else {
 $('.stars-example-fontawesome-o .current-rating')
 .addClass('hidden');

$('.stars-example-fontawesome-o .your-rating')
 .removeClass('hidden')
 .find('span')
 .html(value);
 }
 },
 onClear: function(value, text) {
 $('.stars-example-fontawesome-o')
 .find('.current-rating')
 .removeClass('hidden')
 .end()
 .find('.your-rating')
 .addClass('hidden');
 }
 });
 }

function ratingDisable() {
 $('select').barrating('destroy');
 }

$('.rating-enable').click(function(event) {
 event.preventDefault();

ratingEnable();

$(this).addClass('deactivated');
 $('.rating-disable').removeClass('deactivated');
 });

$('.rating-disable').click(function(event) {
 event.preventDefault();

ratingDisable();

$(this).addClass('deactivated');
 $('.rating-enable').removeClass('deactivated');
 });

ratingEnable();
});
</script>

BootstrapTema

jQuery Bar Rating

Скриншот

Подробнее

Похожие

Архив

Всего комментариев: 0