Красивый хинт с использованием Jquery
Красивый хинт с использованием Jquery
Итак. С самого начала рассмотрим плюсы и минусы этого дополнения...

Плюсы:
1. В отличие от прошлого хинта, этот начинает прорисовываться до полной загрузки страницы. Как помните, прошлый начинал работать после полной загрузки страницы...
2. Красиво всплывает.
3.Настраиваемый вид

Минусы:
Использует Jquery -> это влияет на скорость загрузки сайта на медленном инете.

Установка:
Открываем header.php (в мфс это файл blocks/head.php) и перед тегом
</head>

Добавим код:

<!-- tooltip sfb -->
    <script type="text/javascript" src="/tooltip.js"></script>
<script>
$(document).ready(function(){$("a").easyTooltip()});$(document).ready(function(){$("img").easyTooltip()});
</script>
<style>#easyTooltip{
    padding:10px;
    border:1px solid #999999;
    background:#f1f1f1;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    color: #666666;
    filter:alpha(opacity=90);
    -moz-opacity: 0.9;
    -khtml-opacity: 0.9;
    opacity: 0.9;
    }
    </style>
    
    <!-- !tooltip -->

Если у Вас Jquery подключён был, то тогда заработает. Если не работает, то перед вставленным кодом добавьте строку:
<script type="text/javascript" src="/jquery.js"></script>

Ну и сами файлы в архиве.

Рассмотрим разбор стиля:
filter:alpha(opacity=90);
    -moz-opacity: 0.9;
    -khtml-opacity: 0.9;
    opacity: 0.9;

Задана прозрачность хинта. color: #666666; - цвет текста на хинте.

border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;

Здесь задан радиус, по которому скругляются углы. С этими значениями можно поиграть и подобрать нужное - либо вообще удалить.

- background:#f1f1f1; - это фон хинта в HEX формате - можно смело подбирать нужный вам.
- padding:10px; - задан отступ текста от краёв всплывающего хинта.
- border:1px solid #999999; - задан тип границы. В данном случае - это граница толщиной 1px, цвета #999999, которая является непрерывной линией. Подробнее о границах можно почитать в гугле, они бывают как solid, так и dashed, dotted и др. На эту тему есть много статей.

Вот в принципе и всё...





Рубрика: Бесплатное » Дополнения   |   Автор: Alex   |   Просмотры: 6343
Комментариев: 22
Публикаций: 0
ICQ: --
- 19 +
  Автор: souelle   |   Группа: V.I.P.   |   Дата: 22 апреля 2011  
благодарю, Алекс! Статья понадобилась)
Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.