Круглые углы средствами JavaScript и jQuery


Здравствуйте дорогие друзья. Продолжаю тему начатую в уроке: "Круглые углы, border-radius и CSS3" и как обещал, рассмотрю возможность победить упорство браузеров Internet Explorer и Opera в нежелании правильно отображать скругленные углы на веб странице.

Кроме того с помощью этого метода вы сможете вообще не заморачиваться с написанием кроссбраузерного кода, запоминая различные префиксы для свойства CSS3 - border-radius и ухищрения в виде VML-скриптов - для Internet Explorer и Opera.

А предоставляет нам такую возможность расширяемая библиотека jQuery и ее плагин jquery.corner.
Не буду вас утомлять долгими прелюдиями и перейду сразу к делу. Для демонстрации воспользуюсь тем же примером, что и в уроке: "Круглые углы, border-radius и CSS3" - блочным тегом DIV, которому присвою класс: class="border Corner", и задам ему свойства CSS: ширину, высоту и цвет фона.

.borderCorner { width:500px; height:100px; background-color:#55a1e0; margin: 0 auto; }

Результат:


И конечно не забываем подключить плагин jquery.corner.js к нашей странице в теге HEAD:
<head> <script src="js/jquery.corner.js" type="text/javascript"></script> </head>

$(document).ready(border); function border(){ $(".borderCorner").corner("round"); }

Все! Плагин подключен и работает! При загрузке страницы углы у DIV-а с классом class="borderCorner" становятся закругленными.

Результат:


Конечно же плагин corner не ограничивается только одной командой. Можно задавать радиус кривизны углов в пикселах, например:

$(".borderCorner").corner("30px");

Результат:


Но и это еще не все Так же как и в свойстве CSS3 - border-radius можно изменять форму не всем углам, а выборочно, используя следующие ключевые слова:

  • tl - верхний-левый угол;
  • tr - верхний-правый угол;
  • br - нижний-правый угол;
  • bl - нижний-левый угол.

Однако и это еще не конец. Кроме стандартной команды round – закруглить углы, плагин Corner предоставляет большое количество разных команд на любой вкус:

Round

$(this).corner();

Bevel

$(this).corner("bevel");

Notch

$(this).corner("notch");

Bite

$(this).corner("bite");

Cool

$(this).corner("cool");

Sharp

$(this).corner("sharp");

Slide

$(this).corner("slide");

Jut

$(this).corner("jut");

Curl

$(this).corner("curl");

Tear

$(this).corner("tear");

Fray

$(this).corner("fray");

Wicked

$(this).corner("wicked");

Sculpt

$(this).corner("sculpt");

Long

$(this).corner("long");

Dog Ear

$(this).corner("dog");

Dog2

$(this).corner("dog2");

Dog3

$(this).corner("dog3");

Dogfold*

$(this).corner("dogfold");

Bevelfold*

$(this).corner("bevelfold");

Steep

$(this).corner("steep");

InvSteep

$(this).corner("invsteep");



Top Bevel

$(this).corner("bevel top");

Top-Left Bite

$(this).corner("bite tl");

Round Bottom

$(this).corner("bottom");

Left Notch

$(this).corner("notch left");

Top-Right Dog Ear

$(this).corner("dog tr");

Top-Left, Bottom-Right Cool

$(this).corner("cool tl br");

Right Bevelfold

$(this).corner("bevelfold right");



Round 30px

$(this).corner("30px");

Cool 20px

$(this).corner("cool 20px");

Sharp 20px

$(this).corner("sharp 20px");

Bite 30px

$(this).corner("bite 30px");

Wicked 20px

$(this).corner("wicked 20px");

Dog 20px

$(this).corner("dog 20px");

Dog2 30px

$(this).corner("dog2 30px");

Dog3 30px

$(this).corner("dog3 30px");



И еще немного демонстрации этого замечательного плагина с примерами кода:

Round

$(this).corner("round 14px").parent().css('padding', '15px').corner("round 14px")

Bevel

$(this).corner("bevel 8px").parent().css('padding', '5px').corner("bevel 10px")

Bite

$(this).corner("bite 10px").parent().css('padding', '8px').corner("bite 10px")

Bite

$(this).corner("bite 20px").parent().css('padding', '15px').corner("bite 20px")

Fray

$(this).corner("fray 10px").parent().css('padding', '10px').corner("fray 10px")

Tear

$(this).corner("tear 20px").parent().css('padding', '15px').corner("tear 20px")

Notch

$(this).corner("notch 4px").parent().css('padding', '4px').corner("notch 4px")

Notch

$(this).corner("notch 10px").parent().css('padding', '12px').corner("notch 10px")

Sharp

$(this).corner("sharp 10px").parent().css('padding', '8px').corner("sharp 10px")

Cool

$(this).corner("cool 20px").parent().css('padding', '10px').corner("cool 10px")

Bite/Round

$(this).corner("round 20px").parent().css('padding', '8px').corner("bite 10px")

Round/Bite

$(this).corner("bite 15px").parent().css('padding', '8px').corner("round 10px")

Fray/Tear

$(this).corner("tear 20px").parent().css('padding', '8px').corner("fray 10px")

Jut/Sculpt

$(this).corner("sculpt 20px").parent().css('padding', '8px').corner("jut 10px")

Bevel/Notch

$(this).corner("notch 20px").parent().css('padding', '8px').corner("bevel 15px")

Notch/Bite

$(this).corner("bite 15px").parent().css('padding', '10px').corner("notch 10px")

Bite/Notch

$(this).corner("notch 15px").parent().css('padding', '15px').corner("bite 20px")

Curl/Long

$(this).corner("long 15px").parent().css('padding', '15px').corner("curl 15px")

Как вам такой неслабый наборчик? Наверняка вам, что нибудь пригодится из этого разнообразия. Полный набор свойств плагина jquery.corner, а так же и сам плагин, вы найдете на странице: http://jquery.malsup.com/corner/. Поэкспериментируйте – все в ваших руках!

Автор: Сергей Зарубин

Дата: 2011-07-09

Колличество просмотров: 5114

Нравится

Комментарии к заметке:

Комментарий добавил(а): ВитАлийВладИмирович
Дата: 2017-09-03

Добавьте html-код, www.tolyattinec.ru .



Добавить новый комментарий


Введите число с картинки:

captcha