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

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

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

Всего сделано 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, то он будет выводиться в табличке, как и всё остальное.
Источник: usite.su
Загрузка данных...
Материал «Особый вид ссылок» ещё никто не комментировал.
Добавлять комментарии могут только зарегистрированные пользователи.
Войдите на сайт или Зарегистрируйтесь
Наш опрос
Как вы нас нашли?
640 ответов
Архив
Статистика
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Никого нету
Сегодня нас посетили
Никто ещё не посетил
© 2012-2020 «For-uCoz». Дизайн и верстка Snoopak Хостинг от uCoz
Внимание! На сайте ведутся технические работы.
Некоторые изображения и файлы могут быть недоступны