Полезный материал (Мне нравится)

Продолжая развивать дизайнерское оформления готового решения под названием кнопки мне нравится, я создал аналогичную кнопку, в тёмном варианте с надписью полезный материал.

Шаг 1 - Установим HTML:
Заходим в Админ панель => Дизайн => Управления дизайном и выбираем нужным модуль вашего сайта (новости, блог, каталог и т.д.) и на странице материала и комментариев к нему заменяем стандартный код рейтинга:

Code

<?if($RATING$)?><div style="float:right"><?$RSTARS$('12','/.s/img/stars/3/12.png','1','float')?></div><?endif?>

на следующий код:
Для раздела новости (news)

Code

<?if($RATING$)?>
  <div id="rating_os">
  <a href="javascript://" id="golike" onclick="$.get('/news/0-0-1-$ID$-15-1',function(data) {if($(data).text().indexOf('уже оценивали')>-1) _uWnd.alert('Вы уже оценивали данный материал!','Ошибка',{w:270,h:60,t:8000}); else {_uWnd.alert('Вы успешно оценили!','Успех',{w:270,h:60,t:8000})};});">
  <div id="rating_l">Полезный материал</div>
  </a>
  <div id="rating_p">+$RATED$</div>
  </div>
<?endif?>

Для раздела каталог статей (publ)

Code

<?if($RATING$)?>
  <div id="rating_os">
  <a href="javascript://" id="golike" onclick="$.get('/publ/0-1-1-$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})};});">
  <div id="rating_l">Полезный материал</div>
  </a>
  <div id="rating_p">+$RATED$</div>
  </div>
<?endif?>

Для раздела каталог файлов (load)

Code

<?if($RATING$)?>
  <div id="rating_os">
  <a href="javascript://" id="golike" onclick="$.get('/load/0-1-1-$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})};});">
  <div id="rating_l">Полезный материал</div>
  </a>
  <div id="rating_p">+$RATED$</div>
  </div>
<?endif?>

Для раздела каталог сайтов (dir)

Code

<?if($RATING$)?>
  <div id="rating_os">
  <a style="text-decoration: none;" href="javascript://" id="golike" onclick="$.get('/dir/0-1-1-$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})};});">
  <div id="rating_l">Полезный материал</div>
  </a>
  <div id="rating_p">+$RATED$</div>
  </div>
<?endif?>

Для раздела блог (blog)

Code

<?if($RATING$)?>
  <div id="rating_os">
  <a href="javascript://" id="golike" onclick="$.get('/blog/0-0-1-$ID$-14-1',function(data) {if($(data).text().indexOf('уже оценивали')>-1) _uWnd.alert('Вы уже оценивали данный материал!','Ошибка',{w:270,h:60,t:8000}); else {_uWnd.alert('Вы успешно оценили!','Успех',{w:270,h:60,t:8000})};});">
  <div id="rating_l">Полезный материал</div>
  </a>
  <div id="rating_p">+$RATED$</div>
  </div>
<?endif?>

Для раздела доска объявлений (board)

Code

<?if($RATING$)?>
  <div id="rating_os">
  <a href="javascript://" id="golike" onclick="$.get('/board/0-1-1-$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})};});">
  <div id="rating_l">Полезный материал</div>
  </a>
  <div id="rating_p">+$RATED$</div>
  </div>
<?endif?>

Для раздела Фотоальбом (photo)

Code

<?if($RATING$)?>
  <div id="rating_os">
<a href="javascript://" id="golike" onclick="$.get('/photo/1-1-$ID$-13-1',function(data) {if($(data).text().indexOf('уже оценивали')>-1) _uWnd.alert('Вы уже оценивали данный материал!','Ошибка',{w:270,h:60,t:8000}); else {_uWnd.alert('Вы успешно оценили!','Успех',{w:270,h:60,t:8000})};});">
  <div id="rating_l">Полезный материал</div>
  </a>
  <div id="rating_p">+$RATED$</div>
  </div>
<?endif?>

Шаг 2 - Установим CSS:
Теперь нам осталось прописать css стили для тёмного варианта кнопки:

Code

/* Полезный материал
------------------------------------------*/
#rating_os {
  float:right;
  font: 11px Verdana,Arial,Helvetica, sans-serif;
  color:#F5BF05; text-shadow: 1px 1px 1px #252525;
}

#rating_os a:link,
#rating_os a:visited,
#rating_os a:hover {text-decoration:none; color:#eee;}

#rating_l,
#rating_p{
  float:left;
  background: #737373;
  padding: 3px 7px 3px 7px;
  margin: 0px 3px 0px 3px;
  border: 1px solid #252525;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

#rating_p {
  font-weight: bold;
  }

#rating_l:hover {
  background: #5d5d5d;
}
/* ---------------------------------------*/

Скачать файл

Автор материала:

Логин на сайте:

Группа:

Дата входа:

О материале:

Дата добавления: 15.09.2012 в 11:54

Материал просмотрен: 616 раз

Категория: Скрипты и модификации для uCoz

Оставлены: 0 комментария

Рейтинг материала По мнению пользователей

2.0

Комментарии

0 комментариев

Навигация

Статистика

Онлайн всего: 1

Гостей: 1

Пользователей: 0

Онлайн никого нет