Давайте посмотрим, как работать с плагинами на примере. Пусть мы хотим, чтобы при загрузке страницы углы у div-а ниже закруглялись (как сейчас):
Для этого, кроме самой библиотеки, нам понадобится плагин jquery.corner.js, который мы расположим рядом с файлом самой библиотеки (jquery-1.2.6.js), и подключим его на html-странице:
<html>
<head>
<title>jQuery плагины</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript" src="jquery.corner.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="les9_ex1"></div>
</body>
</html>
Закруглять углы будем именно у div-а с id="les9_ex1". Определим для него размер и цвет на странице style.css:
#les9_ex1{
width:400px;
height:200px;
background:#666699;
}
А на странице script.js укажем, что при загрузке страницы углы у div-а надо закруглить:
$(document).ready(init);
function init(){
$("#les9_ex1").corner("round");
}
Вот так: просто и изящно. Всю работу сделал плагин, мы же только указали что именно сделать с углами - закруглить (round).
Здесь возможны и другие варианты:
Например:
$("#les9_ex16").corner("dog tl br");
Также можно задавать радиус кривизны углов в пикселах, например:
$("#les9_ex17").corner("30px");
Вот такой длинный пример получился, но надеюсь, что на его примере, стало понятно, как много интересного открывается для нас с различными плагинами. Собственно, все последующие уроки и будут посвящены работе с некоторыми из них.
Предыдущий урок Вернуться в раздел Следующий урок
Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.
Как создать свой сайт → Уроки jQuery → Урок 9. Плагины - рисуем углы
jQuery - Урок 9. Плагины - рисуем углы
Одной из замечательных особенностей jQuery является расширяемость этой библиотеки. Любой желающий веб-разработчик может дополнить эту библиотеку своим плагином - модулем, который умеет делать что-то интересное и полезное. На сегодняшний день существует огромное количество как официальных, так и неофициальных плагинов для jQuery. Одни из них становятся популярными и часто используются, другие интересны разве что самим разработчикам. Посмотреть их в работе и подобрать что-нибудь для своих нужд можно по адресу: http://plugins.jquery.com/.Давайте посмотрим, как работать с плагинами на примере. Пусть мы хотим, чтобы при загрузке страницы углы у div-а ниже закруглялись (как сейчас):
Для этого, кроме самой библиотеки, нам понадобится плагин jquery.corner.js, который мы расположим рядом с файлом самой библиотеки (jquery-1.2.6.js), и подключим его на html-странице:
- corner("bevel")
- corner("notch")
- corner("dog")
- corner("dog2")
- corner("bite")
- corner("cool")
- corner("sharp")
- corner("slide")
- corner("jut")
- corner("curl")
- corner("tear")
- corner("fray")
- corner("wicked")
- corner("sculpt")
Например:
$("#les9_ex16").corner("dog tl br");
Также можно задавать радиус кривизны углов в пикселах, например:
$("#les9_ex17").corner("30px");
Вот такой длинный пример получился, но надеюсь, что на его примере, стало понятно, как много интересного открывается для нас с различными плагинами. Собственно, все последующие уроки и будут посвящены работе с некоторыми из них.
Предыдущий урок Вернуться в раздел Следующий урок
Если этот сайт оказался вам полезен, пожалуйста, посмотрите другие наши статьи и разделы.
|
Код кнопки: |
Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.
|
|