Войти на сайт
Регистрация
Обратная связьНаш магазинБлог администрации
Российская школа CSS - Справочник CSS, уроки CSS, jQuery
Оптимизатор CSS Конструктор CSS
Российская школа CSS » JavaScript » Урок jQuery № 1 - "Всплывающая подсказка"
Не нравится(-) 105 Нравится(+)
23-07-2009, 14:01 - dyzajner (JavaScript, jQuery)
Урок jQuery № 1 - "Всплывающая подсказка"


Здравствуйте уважаемые пользователи и гости Российской школы css.

Сегодня мы погрузимся в мир новых и передовых технологий, которые используют в создании web сайтов, а именно в «jQuery»

Выдержка из Wikipedi
jQuery –это библиотека javascript, которая фокусирует свое внимание на взаимодействии javascript и HTML. Библиотека jQuery помогает получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Также библиотека jQuery предоставляет удобный API по работе с Ajax.


Давайте рассмотрим простейший пример использования jQuery.

1) По традии, которая существует долгое время, мы создаём файлы index.html и style.css.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=cp-1251">
<title>Российская школа CSS. Урок jQuery № 1 - "Всплывающая подсказка"</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="tooltip.js"></script>


2) Далее пропишем следующий скрипт:

<script type="text/javascript">
    $(document).ready(function(){    
        $("a#link").easyTooltip({
            useElement: "item"                  
        });
    });
</script>
</head>
<body>


3) Теперь пропишем саму ссылку, в нужном нам месте и дадим ей индитификатор "link":
Российская школа CSS. Урок jQuery № 1 <a href="http://www.css-school.ru" id="link">"Всплывающая подсказка"</a>


4) Реализуем всплывающую подсказку с идентификатором "item":

<div id="item">
<h3>Российская школа CSS</h3>
<img src="http://www.css-school.ru/uploads/fotos/foto_2751.jpg" />
<p>Автор урока - Dyzajner</p>
</div>
</body>
</html>

5) Задаём стиль нашей вплывающей подсказке:

/*
=============================================================
© 2008 - 2009 Российская школа CSS (Russian CSS School)
http://www.css-school.ru
Российская школа CSS. Урок jQuery № 1 - "Всплывающая подсказка"
style.css - Набор стилей для урока
=============================================================
*/

#easyTooltip{

margin:0 10px 1em 0;

width:250px;

padding:8px;

background:#fcfcfc;

border:1px solid #e1e1e1;

line-height:130%;

}

#easyTooltip h3{

margin:0 0 .5em 0;

font:13px Arial, Helvetica, sans-serif;

text-transform:uppercase;

}

#easyTooltip p{

margin:0 0 .5em 0;

}

#easyTooltip img{

background:#fff;

padding:1px;

border:1px solid #e1e1e1;

float:left;

margin-right:10px;

}

#item{display:none;}


Вот и всё. Надеюсь урок оказался полезным и понятным для Вас. Спасибо за внимание!


Уважаемый посетитель Российской школы CSS! Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. Спасибо за внимание!



---------------------------------------
---------------------------------------

Похожие публикации

Публикацию посмотрели 23844 раз(а) и написали 16 комментариев.
Подписаться на канал RSS Добавить сайт в закладки

«    Октябрь 2017    »
ПнВтСрЧтПтСбВс
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
© 2008-2017 Copyright, Российская школа CSS. CSS-School.RU. Все права защищены.
Designed by GZ Design, OniX © 2010 - 2017
Valid XHTML 1.0 Transitional Правильный CSS!