• Страница 1 из 1
  • 1
Форум CREWEBIK.ru » design studio for uCoz » ФОРУМ ВЕБ МАСТЕРОВ » Анимация и флеш(Flash) » Еще один вид подсказок на jQuery
Еще один вид подсказок на jQuery
exclusiv...
/avatar/01/4333-414916.png
1');return false;" rel="nofollow" href="javascript://" name="6">
07.06.2011 в 15:05 Еще один вид подсказок на jQuery


Шаг 1.

Подключим фреймворк jQuery и плагин Easy Tooltip 1.0 к нашему документу, прописав следующий код между тегами <head>:
-

Code
<script type="text/javascript" src="jquery.js"></script>
2    <script type="text/javascript" src="tooltip.js"></script>


Шаг 2.

Далее пропишем следующий скрипт:
-
Code
<script type="text/javascript">
2   $(document).ready(function(){   
3    $("a#link").easyTooltip({
4     useElement: "item"         
5    });
6   });
7    </script>


-
Шаг 3.

В отдельный CSS-файл или между тегами <head> пропишем стили, отвечающие за внешний вид посказок. Вы можете отредактировать эти стили по своему желанию.
-

Code
#easyTooltip{
2  
3    margin:0 10px 1em 0;
4  
5    width:250px;
6  
7    padding:8px;
8  
9    background:#fcfcfc;
10  
11    border:1px solid #e1e1e1;
12  
13    line-height:130%;   
14  
15    }
16  
17    #easyTooltip h3{
18  
19    margin:0 0 .5em 0;
20  
21    font:13px Arial, Helvetica, sans-serif;
22  
23    text-transform:uppercase;
24  
25    }   
26  
27    #easyTooltip p{
28  
29    margin:0 0 .5em 0;
30  
31    }   
32  
33    #easyTooltip img{
34  
35    background:#fff;
36  
37    padding:1px;
38  
39    border:1px solid #e1e1e1;
40  
41    float:left;
42  
43    margin-right:10px;
44  
45    }   
46  
47    #item{display:none;}


-
В нужном нам месте на странице пропишем ссылку и дадим ей идентификатор link. Например:
-

Code
1    Наведите мышкой <a href="http://ruseller.com/" id="link">сюда</a>


-
Создадим блок с идентификатором item, в который впишем текст непосредственно самой подсказки (по желанию сюда можно вставить картинку, список, или что то еще). Т.е. у Вас должно получиться примерно так:
-
Code
<div id="item">
2  
3    <h3>Ruseller.com</h3>
4  
5    <img src="image.gif" />
6  
7    <p>Текст</p>
8  
9    </div>


-
Вот и все! Оригинальные и функциональные подсказки для ссылок готовы!
Форум CREWEBIK.ru » design studio for uCoz » ФОРУМ ВЕБ МАСТЕРОВ » Анимация и флеш(Flash) » Еще один вид подсказок на jQuery
  • Страница 1 из 1
  • 1
Поиск: