» »

Красивый рейтинг материалов для uCoz

Красивый рейтинг материалов для uCoz

Цифровой рейтинг для материалов сайта uCoz, что будет находится на любом модуле вид самом материале, где по клику идет только плюс. Выстроен в ярких цветах, что имеет синею палитру и где выводится цифры, там при вуалирует зеленая гамма. Отлично редактируется, что можно по форме его настроить под разный шаблон. Так как изначально на нем в стилистике шли ссылки, что пришлось убрать и поставить на чистые стили.

И саму изначально не работал. видать после обновление системы, но все же поменял ID и все отлично стало показывать. Здесь если вы один раз проголосовали, а как уже сказано было, что функциональность у него только положительная. Что по второму разу вам появится окно, с надписью, что вы уже этот материал ранее оценивали.

Безусловно он намного стильные чем идет оригинальный, что по установке, просто убираем его и на это место производим установочный процесс нового скрипта. Также под основу идет стили в CSS, где полностью меняется дизайн, так добавлен был эффект при наведение. Что ниже будет снимок, где вообще стили не подключены, но все таки смотрится оригинально.

Так реально выглядит:

Скрипт мне нравится для сайта

Это на чистом коде, где CSS отсутствует:

Код на лайк

Ставим по месту, по умолчанию настроен под каталог файлов:

Код
<a style="text-decoration: none;" href="javascript://" id="ucozua" onclick="$.get('/load/0-1-5-$ID$-3',function(data) {if($(data).text().indexOf('уже оценивали')>-1) _uWnd.alert('Вы уже оценивали этот материал!','Ошибка!',{w:270,h:60,t:8000}); else {_uWnd.alert('Спасибо, ваша оценка принята!','Проголосовали!',{w:270,h:60,t:8000})};});">  
<table><tbody><tr>  
<td><div align="absmiddle" class="adaptation_option" id="like_img">Like <i class="fa fa-thumbs-up"></i></div></td>  
<td><div class="ranking_bore_witnes" align="absmiddle">+$RATED$</div></td>  
</tr></tbody></table>  
</a>

CSS

Код
.adaptation_option {width: 49px;height: 22px;border-radius: 15px;background: #2E80B9;border: 1px solid #d3d6d3;color: #fbf7f7;font-family: 'PT Sans';text-shadow: 0 1px 0 #544c4c;padding: 0px 0px 0px 10px;font-size: 14px;box-shadow: 0px 0px 0px 1px rgba(45, 44, 44, 0.41);}  
.adaptation_option:hover {background: #266ea0;}  
.ranking_bore_witnes {width: 25px;height: 18px;text-align:center;padding-top: 4px;color:#fff;border-radius: 15px;background: #17923e;border: 1px solid #f1f3f1;float: right;margin: 1px 3px 3px 2px;padding: 0px 0px 4px 0px;box-shadow: 0px 0px 1px 1px rgba(39, 37, 37, 0.55);}
.ranking_bore_witnes:hover {background: #267b42;}

Сам каталог и его работа рейтинга зависит от /load/0-1-5-$ID$-3 - что под модуль файлов и на нем он будет оценивать, под другие свой ID, где в рейтинг материалов прописано на все модуле в статье, что переходим и и находим под свой, и производим замену.
12.12.2017 Просмотров: 533 Комментарий: (1)

Поделиться в социальных сетях

Материал разместил

Комментарий: 1
Kosten
Kosten 13.12.2017 17:391
0
Также можете посмотреть еще одну версию. где при клике автоматически устанавливается рейтинг, как на PHP, что только после обновление страницы он меняется форме.
avatar