Анимированная система рейтинга для оценки материалов на uCoz

Подключение новой системы оценки материалов я буду объяснять на примере модуля "Новости сайта"

1. Первое, что нам нужно будет сделать, это зайти в панель управления сайтом, в верхнем меню выбрать пункт "Настройки" и далее "Общие настройки".

В открывшемся окне общих настроек сайта ищем строку "Версия библиотеки jQuery:" и выставляем для нее значение jquery-1.6.1.js

Сохраняем изменения.

2. Переходим в Редактор страниц, далее в "Управление дизайном модуля", в списке шаблонов находим "Новости сайта - Страница материала и комментариев к нему"

Между тегами

Code

подключаем файл со стилями

Code

А после открывающего тега body подключаем файлы скриптов:

Code

Все эти файлы вы можете скачать ниже.

3. В нужное вам место страницы вставляете новую форму рейтинга:

Code

<span id="entRating$ID$">Рейтинг: $RATING$</span>/<span id="entRated$ID$">$RATED$</span>
<script type="text/javascript">var usrarids={};function ustarrating(id,mark){if (!usrarids[id]){usrarids[id]=1;$(".u-star-li-"+id).hide();_uPostForm('',{type:'POST',url:'/news/',data:{'a':'65','id':id,'mark':mark,'mod':'news','ajax':'2'}});}}</script>
<ul id="uStarRating2">
<li class="u-star-li-2"><a href="#" onclick="ustarrating('$ID$',1);return false;">Оценить этот материал на 1 балл</a></li>
<li class="u-star-li-2"><a href="#" onclick="ustarrating('$ID$',2);return false;">Оценить этот материал на 2 балла</a></li>
<li class="u-star-li-2"><a href="#" onclick="ustarrating('$ID$',3);return false;">Оценить этот материал на 3 балла</a></li>
<li class="u-star-li-2"><a href="#" onclick="ustarrating('$ID$',4);return false;">Оценить этот материал на 4 балла</a></li>
<li class="u-star-li-2"><a href="#" onclick="ustarrating('$ID$',5);return false;">Оценить этот материал на 5 баллов</a></li>
</ul>

4. Для тех, кто не хочет задействовать системную библиотеку jquery-1.6.1.js, подключите после открывающего тега body еще один скрипт

Code

5. О некоторых настройках:

Изменить длительность анимации при переходе от одного пункта рейтинга к другому можно в файле script.js в строке

Code

// Длительность анимации
var animationTime = 500;

Заменить используемые в примере цвета для рейтинга можно в файле script.js в строке

Code

// Используемые цвета
var colours = ["bd2c33", "e49420", "ecdb00", "3bad54", "1b7db9"];

Заменить всплывающий при наведении текст на свой можно в том же файле в строке

Code

alert("Вы дали оценку материалу в баллах: "

Увеличить, либо уменьшить размеры кругов-пунктов голосования можно в файле style.css

Code

#uStarRating2 li a { display:block; width:20px; height:20px; border:1px solid #888; background-color:#ccc; text-indent:-9999px;-moz-box-shadow:0 0 5px #888;border-radius: 40px; -moz-border-radius:40px;-webkit-box-shadow:0 0 5px #888; -webkit-border-radius:40px; -o-box-shadow:0 0 5px #888; -o-border-radius:40px;}

изменяя параметры width:20px; height:20px;

Источник решения
Адаптация для uCoz: PS-Studio.Info

Ссылка:

BB-код:

HTML-код:

Ещё по теме:

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

Нет оценки: 0

3 saw 2011-10-11, 23:13

А например вот так, взять и в файле стилей вот это

Code

переписать вот так

Code

#uStarRating2 li a { display:block; width:20px; height:20px; border:1px solid #888; background-color:#ccc; text-indent:-9999px;-moz-box-shadow:0 0 5px #888;border-radius: 5px; -moz-border-radius:5px;-webkit-box-shadow:0 0 5px #888; -webkit-border-radius:5px; -o-box-shadow:0 0 5px #888; -o-border-radius:5px;}

Другими словами,уменьшить значение border-radius

Нет оценки: 0

2 Александр 2011-10-10, 02:37

А как сделать из кругов скажем прямоугольники с круглыми углами?

Нет оценки: 0

1 dastyle 2011-10-05, 19:58

Не сохраняет цвет, после голосования в этом минус, а так вроде неплохо.

Метки

Опрос: Чего добавлять больше?

Результаты опроса

Главная » 2011 » Октябрь » 3 » Анимированная система рейтинга для оценки материалов на uCoz