Главная | Регистрация | Вход Приветствую Вас Гость
Категории раздела
Шаблоны для UCOZ Шаблоны для DLE Скрипты для UCOZ
Популярные шаблоны



ШАБЛОН ДЛЯ UCOZ: FLA... Загрузок: 766 Просмотров: 4366 Добавил: Admin Дата: 25.07.2013



PSD исходник игровог... Загрузок: 268 Просмотров: 4075 Добавил: Admin Дата: 10.04.2013



Шаблон orizon blue Загрузок: 535 Просмотров: 4046 Добавил: Admin Дата: 12.07.2013



Шаблон сайта clipis ... Загрузок: 825 Просмотров: 3709 Добавил: Admin Дата: 09.07.2013



Софт шаблон для сайт... Загрузок: 690 Просмотров: 3527 Добавил: Admin Дата: 10.04.2013
Block title
Новости


Главная » »
12:41


Новый рейтинг из 10 звезд для uCoz. Это уже не первая подобная модификация стандартного вида рейтинга, были и другие. Но мне недавно понадобилось сделать простой рейтинг из 10 звезд, без каких-то лишних наворотов и скриптов.


В итоге я сделал очень простой и небольшой скрипт, и самое главное сам рейтинг выглядит очень просто: те-же самые звезды - только их теперь 10, а не 5 как обычно. При этом, это не просто внешне 10 звезд, они и работают так как надо, то есть 10 градаций оценки.

Более того, поскольку скрипт простой, он работает во всех модулях и на всех страницах, то есть и в виде материалов - на странице со списком материалов категории или главной, и на странице материала и комментариев к нему.

В данном примере будет показан рейтинг размером 20х20 px. и стандартной звездой. Если вам нужна другая звезда для рейтинга и/или другой размер, то это можно легко изменить - немного отредактировав код.

Установка рейтинга.

Замените ваш стандартный код рейтинга (),

на вот этот:




Код
  
<script type="text/javascript">  
  $('.u-star-li-$ID$:eq(0)').replaceWith('<li class="u-star-li-$ID$"><a href="#" onclick="ustarrating(\'$ID$\',0.5);return false;" class="u-one-star">1</a></li><li class="u-star-li-$ID$"><a href="#" onclick="ustarrating(\'$ID$\',1);return false;" class="u-two-stars">2</a></li>');  
  $('.u-star-li-$ID$:eq(2)').replaceWith('<li class="u-star-li-$ID$"><a href="#" onclick="ustarrating(\'$ID$\',1.5);return false;" class="u-three-stars">3</a></li><li class="u-star-li-$ID$"><a href="#" onclick="ustarrating(\'$ID$\',2);return false;" class="u-four-stars">4</a></li>');  
  $('.u-star-li-$ID$:eq(4)').replaceWith('<li class="u-star-li-$ID$"><a href="#" onclick="ustarrating(\'$ID$\',2.5);return false;" class="u-five-stars">5</a></li><li class="u-star-li-$ID$"><a href="#" onclick="ustarrating(\'$ID$\',3);return false;" class="u-six-star">6</a></li>');  
  $('.u-star-li-$ID$:eq(6)').replaceWith('<li class="u-star-li-$ID$"><a href="#" onclick="ustarrating(\'$ID$\',3.5);return false;" class="u-seven-stars">7</a></li><li class="u-star-li-$ID$"><a href="#" onclick="ustarrating(\'$ID$\',4);return false;" class="u-eight-stars">8</a></li>');  
  $('.u-star-li-$ID$:eq(8)').replaceWith('<li class="u-star-li-$ID$"><a href="#" onclick="ustarrating(\'$ID$\',4.5);return false;" class="u-nine-stars">9</a></li><li class="u-star-li-$ID$"><a href="#" onclick="ustarrating(\'$ID$\',5);return false;" class="u-ten-stars">10</a></li>');  
</script>


Далее в CSS вставьте следующие стили:

Код
.u-star-rating-20 {width:200px !important;}  
.u-star-rating-20 a.u-six-star {left:100px;}  
.u-star-rating-20 a.u-six-star:hover {width:120px;}  
.u-star-rating-20 a.u-seven-stars {left:120px;}  
.u-star-rating-20 a.u-seven-stars:hover {width:140px;}  
.u-star-rating-20 a.u-eight-stars {left:140px;}  
.u-star-rating-20 a.u-eight-stars:hover {width:160px;}  
.u-star-rating-20 a.u-nine-stars {left:160px;}  
.u-star-rating-20 a.u-nine-stars:hover {width:180px;}  
.u-star-rating-20 a.u-ten-stars {left:180px;}  
.u-star-rating-20 a.u-ten-stars:hover {width:200px;}
Категория: Разные | Просмотров: 978 | Добавил: Admin | Теги: Новый рейтинг, для ucoz, 10 звезд | Рейтинг: 0.0/0

Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
поиск
Статистика
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Пользователей нету
[ Полный Список ]
друзья

Скачать ИГРЫ
Скачать ИГРЫ
ФИЛЬМЫ ОНЛАЙН 720
ФИЛЬМЫ ОНЛАЙН 720
Фильмы УЖАСОВ!
Фильмы УЖАСОВ!

последние коментар
Статистика сайта
Рейтинг@Mail.ru Яндекс.Метрика
Sitemap
Сделать бесплатный сайт с uCoz