Самообновляющийся рейтинг материалов - Форум интересных решений

[ Новые сообщения · Участники · Поиск по форуму · RSS ]

Страница 1 из 1
1

Архив - только для чтения

Самообновляющийся рейтинг материалов (sml[arrow]без перезагрузки страницы, jQuery)

Самообновляющийся рейтинг материалов

Sierra

Отредактировал Sierra - Суббота, 28 Февраля 2009, 16:41

Дата: 25 Февраля 2009, 18:46 | Сообщение # 1

● ● ● ● ●

106 сообщений

« 16 »

0 наград

Статус: Offline

Рейтинг обновляется без перезагрузки страницы, т.е. показывается сразу после выбора оценки. Настройки css (в данном примере можно обойтись и без них), картинки рейтинга и т.д. выкладывать не буду - всё это можно найти или сделать самостоятельно, либо взять от другого рейтинга. Для работы скрипта нужен jQuery.

Пример приведен для каталога сайтов.

Вид материалов:

Code

<div id="rating$ID$"><?if($RATE_FORM$)?><div id="ratechoose$ID$">
<a href="javascript://" onclick="uz.util.Connect.asyncRequest('GET','/dir/0-0-1-$ID$-3',{success:function(){ratingshow();}});"><img src="ссылка на картинку" border="0" alt="1" /></a>
<a href="javascript://" onclick="uz.util.Connect.asyncRequest('GET','/dir/0-0-2-$ID$-3',{success:function(){ratingshow();}});"><img src="ссылка на картинку" border="0" alt="2" /></a>
<a href="javascript://" onclick="uz.util.Connect.asyncRequest('GET','/dir/0-0-3-$ID$-3',{success:function(){ratingshow();}});"><img src="ссылка на картинку" border="0" alt="3" /></a>
<a href="javascript://" onclick="uz.util.Connect.asyncRequest('GET','/dir/0-0-4-$ID$-3',{success:function(){ratingshow();}});"><img src="ссылка на картинку" border="0" alt="4" /></a>
<a href="javascript://" onclick="uz.util.Connect.asyncRequest('GET','/dir/0-0-5-$ID$-3',{success:function(){ratingshow();}});"><img src="ссылка на картинку" border="0" alt="5" /></a>
</div>
<script type="text/javascript">
$("#ratechoose$ID$ a").click(function () {$("#ratechoose$ID$").html('<img src="ссылка на картинку-лоадер" alt="" />');});
function ratingshow() {$("#ratechoose$ID$").load("# #rating$ID$");}
</script>
<?else?>
<img src="путь до папки с картинками рейтинга/$RATING_NUM$.gif" border="0" alt="$RATING$/$RATED$" />
<?endif?></div><?endif?>

Страница материала и комментариев к нему:

Code

<div id="rating"><?if($RATE_FORM$)?><div id="ratechoose">
<a href="javascript://" onclick="uz.util.Connect.asyncRequest('GET','/dir/0-0-1-$ID$-3',{success:function(){ratingshow();}});"><img src="ссылка на картинку" border="0" alt="1" /></a>
<a href="javascript://" onclick="uz.util.Connect.asyncRequest('GET','/dir/0-0-2-$ID$-3',{success:function(){ratingshow();}});"><img src="ссылка на картинку" border="0" alt="2" /></a>
<a href="javascript://" onclick="uz.util.Connect.asyncRequest('GET','/dir/0-0-3-$ID$-3',{success:function(){ratingshow();}});"><img src="ссылка на картинку" border="0" alt="3" /></a>
<a href="javascript://" onclick="uz.util.Connect.asyncRequest('GET','/dir/0-0-4-$ID$-3',{success:function(){ratingshow();}});"><img src="ссылка на картинку" border="0" alt="4" /></a>
<a href="javascript://" onclick="uz.util.Connect.asyncRequest('GET','/dir/0-0-5-$ID$-3',{success:function(){ratingshow();}});"><img src="ссылка на картинку" border="0" alt="5" /></a>
</div>
<script type="text/javascript">
$("#ratechoose a").click(function () {$("#ratechoose").html('<img src="ссылка на картинку-лоадер" alt="" />');});
function ratingshow() {$("#ratechoose").load("# #rating");}
</script>
<?else?>
<img src="путь до папки с картинками рейтинга/$RATING_NUM$.gif" border="0" alt="$RATING$/$RATED$" />
<?endif?></div><?endif?>

Sierra

Отредактировал Sierra - Пятница, 06 Марта 2009, 14:58

Дата: 06 Марта 2009, 14:54 | Сообщение # 3

● ● ● ● ●

106 сообщений

« 16 »

0 наград

Статус: Offline

К #rating и #ratechoose приписать $ID$ - получится #rating$ID$ и #ratechoose$ID$.

Добавлено (06 Март 2009, 14:54)
---------------------------------------------
Новая версия скрипта! Редактировать тему уже не могу, поэтому выложу так. Добавлен вывод ошибки "Вы уже голосовали!", если пользователь уже голосовал за материал. Кода стало гораздо меньше и сам скрипт фактически переписан. Опять же визуальную часть я опускаю - это не важно, можете делать как хотите сами, но не забудьте добавить onclick="rating(x);"

Для каталога сайтов

Вид материалов и/или страница материала (везде код будет одинаковый):

Code

<div id="rating$ID$"><?if($RATE_FORM$)?>
<img src="..." style="border:0;cursor:pointer;" alt="1" onclick="rating(1);" />
<img src="..." style="border:0;cursor:pointer;" alt="2" onclick="rating(2);" />
<img src="..." style="border:0;cursor:pointer;" alt="3" onclick="rating(3);" />
<img src="..." style="border:0;cursor:pointer;" alt="4" onclick="rating(4);" />
<img src="..." style="border:0;cursor:pointer;" alt="5" onclick="rating(5);" />
<br />Текущий рейтинг: $RATING$/$RATED$
<script type="text/javascript">
function rating(n) {
$("#rating$ID$").html('<img src="..." align="center" alt="Загрузка..." />'); // картинка-загрузчик, строка не обязательна
$.get("/dir/0-0-"+n+"-$ID$-3",function(data) {if(data.match("уже")){$("#rating$ID$").html("Вы уже голосовали за этот материал!");}else{$("#rating$ID$").load("$ENTRY_URL$ #rating$ID$");}});
}
</script>
<?else?>
<img src=".../$RATING_NUM$.gif" alt="Рейтинг фильма: $RATING$/$RATED$" />
<?endif?></div>

Для других модулей вместо "/dir/0-0-"+n+"-$ID$-3" подставляем:

блог: "/blog/0-0-"+n+"-$ID$-14-1"

доска объявлений: "/board/0-1-"+n+"-1-3"

новости: "/news/0-0-"+n+"-$ID$-15-1"

каталог статей: "/publ/0-1-"+n+"-$ID$-3"

каталог файлов: "/load/0-1-"+n+"-$ID$-3"

фотоальбом: "/photo/$CID$-1-$ID$-13-"+n (кавычку в конце НЕ надо!)

Как работает скрипт?
После клика на картинке через onclick запускается функция rating, которая отправляет на сервер запрос через $.get. Полученный ответ проверяется на наличие слова уже (т.е. вы уже голосовали), и если наличие подтверждается, то выводится ошибка "Вы уже голосовали за этот материал!". Если же нет - обновляется div с id rating$ID$, и выводится обновленный рейтинг материала.

Самообновляющийся рейтинг материалов (sml[arrow]без перезагрузки страницы, jQuery)

Страница 1 из 1
1

U.Helper