Авторизация

Файлы Скрипты и модификации

Особый вид ссылок

Описание:
вид, ссылок, Особый
Скрипт заменяет обычный вид ссылок на красивый и информативный. На данную идею меня натолкнул всеми любимый ВК.

Всего сделано 2 вида: придуманный и в стиле ВК.

Ну начнём!

Вариант автора скрипта:
1. В css ставим это:
Код
.wrapL {-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;background: rgba(0,0,0,0.7);padding:5px;margin:5 5 5 0px;height:80px;width:250px;color:#ccc;}  
.wrapL a {color:#fff;font-weight:bold;text-decoration:none;}  
.wrapL img {-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;float:left;margin-right:5px;}

2. На страницы, где будут "красоваться" ссылки перед закрывающим тегом :
Код
<script type="text/javascript">  
  var forL = $('.forLink a');  
  $.each(forL, function() {  
  $(this).wrap('<div class="wrapL">');  
  $(this).before('<img src="http://mini.s-shot.ru/80x80/80/png/?' + $(this).attr('href') + '">')
  $(this).after('<br>' + $(this).attr('href') + '<br>' + $(this).attr('title'));  
  });  
  </script>

3. Ссылки преобразуются только внутри элементов с классом .forLink. Оберните например $MESSAGE$ в div:
Код
<div class="forLink">$MESSAGE$</div>


Установка вида в стиле ВКонтакте

1. В css ставим это:
Код
.wrapL {padding:5 5 5 0px;margin:5 5 5 0px;height:90px;color:#777;}  
.wrapL a {color:#2B587A;text-decoration:none;}  
.wrapL a:last-of-type {font-weight:bold;}  
.wrapL img {margin-right:5px;}  
.wrapL img:last-of-type {border-left:2px solid #C3D1E0;float:left;padding-left:5px;margin-right:5px;}

2. На страницы, где будут "красоваться" ссылки перед закрывающим тегом :
Код
<script type="text/javascript">  
  var forL = $('.forLink a');  
  $.each(forL, function() {  
  $(this).wrap('<div class="wrapL">');  
  $(this).before('<img src="http://s1.ipicture.ru/uploads/20120318/zDncHCqp.png">Ссылка ' + '<a href="' + $(this).attr('href') + '">' + $(this).attr('href') + '</a><br><img src="http://mini.s-shot.ru/80x80/80/png/?' + $(this).attr('href') + '">')  
  $(this).after('<br>' + '<span style="color:#000">' + $(this).attr('title') + '</span>');  
  });  
  </script>

3. Ссылки преобразуются только внутри элементов с классом .forLink. Оберните например $MESSAGE$ в div:
Код
<div class="forLink">$MESSAGE$</div>

Если у ссылки есть title, то он будет выводиться в табличке, как и всё остальное.
  • 3
  • 19.07.2013
  • 856
  • 2
Источник: usite.su
  • UNNAMED
  • Администратор
Похожие материалы
Материал «Особый вид ссылок» ещё никто не комментировал.
Добавлять комментарии могут только зарегистрированные пользователи.
Войдите на сайт или Зарегистрируйтесь
Чат
Для добавления необходима авторизация
Комментарии
Написал: vladimirsamorok
Спасибо) Понастольгировал biggrin
Написал: Snoopak
Исправил
Написал: vladimirsamorok
На главную перебрасывает
Написал: Snoopak
Да макеты красивые. С юкоз точно забросил, а занимается дизайном или нет, я не знаю.. но вот его профиль weblancer
Написал: vladimirsamorok
Крутые макеты он создавал, он забросил это дело?
Написал: vladimirsamorok
Кто-то пытается изменить вид комментариев? biggrin
Написал: geleson2222
Скрипт не работает, исправьте
Статистика
1
Всего
0
Пользователи
1
Гости
Никого нету
Сегодня нас посетили
Никто ещё не посетил
© 2012 – 2025 «For-uCoz». Made with by Snoopak Хостинг от uCoz
При копировании материалов просим указывать ссылку на источник. Все материалы на сайте размещены исключительно в ознакомительных целях. Все права на материалы принадлежат их создателям.
Внимание! На сайте ведутся технические работы.
Некоторые изображения и файлы могут быть недоступны