Сегодня мы погрузимся в мир новых и передовых технологий, которые используют в создании web сайтов, а именно в «jQuery»
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(){ &
nbsp;
$("a#link").
easyTooltip({
useEleme
nt: "item" &n
bsp;
});
});
</script>
</head>
<body>
3) Теперь пропишем саму ссылку, в нужном нам месте и дадим ей индитификатор "link":
<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) Задаём стиль нашей вплывающей подсказке:
#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
