Круглые углы средствами 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: ширину, высоту и цвет фона.
Результат:
И конечно не забываем подключить плагин jquery.corner.js к нашей странице в теге HEAD:
Все! Плагин подключен и работает! При загрузке страницы углы у DIV-а с классом class="borderCorner" становятся закругленными.
Результат:Конечно же плагин corner не ограничивается только одной командой. Можно задавать радиус кривизны углов в пикселах, например:
Результат:
Но и это еще не все Так же как и в свойстве 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
Колличество просмотров: 6075
|
|
Нравится |
Комментарии к заметке:
Комментарий добавил(а): ВитАлийВладИмирович
Дата: 2017-09-03
Добавьте html-код, www.tolyattinec.ru .
Добавить новый комментарий
