Как создать свой сайтУроки jQuery → Урок 9. Плагины - рисуем углы

jQuery - Урок 9. Плагины - рисуем углы

Одной из замечательных особенностей jQuery является расширяемость этой библиотеки. Любой желающий веб-разработчик может дополнить эту библиотеку своим плагином - модулем, который умеет делать что-то интересное и полезное. На сегодняшний день существует огромное количество как официальных, так и неофициальных плагинов для jQuery. Одни из них становятся популярными и часто используются, другие интересны разве что самим разработчикам. Посмотреть их в работе и подобрать что-нибудь для своих нужд можно по адресу: http://plugins.jquery.com/.

Давайте посмотрим, как работать с плагинами на примере. Пусть мы хотим, чтобы при загрузке страницы углы у 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). Здесь возможны и другие варианты:
  • 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")



Вот сколько вариантов для вашего творчества. Кроме этого, вы можете придавать форму не всем углам, а выборочно, используя ключевые слова: bl (нижний левый угол), tl (верхний левый угол), br (нижний правый угол), tr(верхний правый угол).

Например:

$("#les9_ex16").corner("dog tl br");



Также можно задавать радиус кривизны углов в пикселах, например:

$("#les9_ex17").corner("30px");



Вот такой длинный пример получился, но надеюсь, что на его примере, стало понятно, как много интересного открывается для нас с различными плагинами. Собственно, все последующие уроки и будут посвящены работе с некоторыми из них.



Предыдущий урок Вернуться в раздел Следующий урок 
Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.