jQuery Corner – рисуем уголки

Автор: Gennady

20 Фев

Для библиотеки jQuery есть замечательный плагин jQuery Corner, с помощью которого очень легко можно рисовать уголки. И не только закругленные с разным радиусом. Можно рисовать фигурные уголки, можно комбинировать, применяя разные стили к разным углам элементов.

Для того чтобы воспользоваться этим плагином понадобится библиотека jQuery и собственно сам плагин jquery.corner.js.

Оба файла необходимо подключить к странице. Сделаем это в разделе HEAD:

<script type="text/javascript" src="js/jquery-1.2.1.js"></script>
<script type="text/javascript" src="js/jquery.corner.js"></script>

Приводить HTML-код и стилевое оформление элемента (например DIV), для которого мы будем рисовать уголки не имеет смысла – это слишком просто и кроме того, это можно посмотреть в файлах примеров.

Приведу лишь самый простой пример вызова плагина, который нарисует обычные закругленные уголки.

<script type="text/javascript">
$(document).ready(function(){
  $("#example").corner("round");
});
</script>

Вот так просто. А в уже примере Вы сможете увидеть разные оформления уголков и примеры для вызова каждого оформления.

Но это еще далеко не все – можно использовать ключевые слова top, bottom, tl, tr, bl, br для того, чтобы выбрать какой-то (или какие-то) из уголков и присвоить ему соответствующее оформление. Проще всего это объяснить на примере.

И это тоже еще не все. Можно определять размеры уголков, используя значения в px.

Ну и последнее: с помощью «цепочек» вызовов можно применять различные стилевые оформления к разным углам одного и того же элемента.

Вы можете скачать исходные коды примеров, и при наличии библиотеки jQuery воспроизвести это пример на своем сайте.

В рубриках: jQuery

(43 votes, average: 4.79 out of 5)

Loading ...

Отзывов (41) на «jQuery Corner – рисуем уголки»

Вася 01.04.2008 в 11:09 1
У вас есть баги в IE 6?
Gennady 01.04.2008 в 13:39 2
???
Вы в IE6 откройте эту статью. Примеры приведены. Посмотрите сами есть ли баги. Я не наблюдаю.
Tsar 10.04.2008 в 7:22 3
Отлично,спасибо большое.Начинаю изучать jQuery
Arhat 30.05.2008 в 14:42 4
Подскажи пожалуйста, закруглять углы можно только у div-ов? Если присвоить id например image то плагин не работает Как закруглить углы у картинки? Может есть способ или плагин?
Gennady 30.05.2008 в 20:46 5
Закруглять углы можно у блочных элементов. Картинки к ним не относятся. Это замещаемые элементы. А закруглить углы у картинок можно довольно просто – посмотрите здесь http://www.netzgesta.de/glossy/
Evgeny 20.06.2008 в 15:05 6
Подскажите пожалуйста, почему при использовании на странице плагина facebox.js вместе с jquery.corner.js, закругленные углы начинают разьезжаться в IE 6 ?
Gennady 21.06.2008 в 17:58 7
И не только его. Уголки лучше использовать для тех элементов страницы, где не подразумевается какое-то динамическое изменение размеров блока с уголками. jquery.corner.js действительно конфликтует с некоторыми другими плагинами. Будем надеятся, что со временем это будет поправлено.
Anton 29.10.2008 в 14:04 8
Обнаружил что при использовании браузеров на основе WebKit – получаем уголки вместо прозрачного – с черным цветом. Фиксится как-нибудь?
Eddi Fisher 25.11.2008 в 11:19 9
эм… почему при использовании плагина перестают отображаться рамки у блоков когда border=1
dot 09.01.2009 в 18:38 10
мучаюсь с бордером 4-ый час. Плагин хороший – но не позволяет рисовать толковые уголки с бордером в 1 пиксель – в 4 пикселя легко, а в 1 нет:(
кстати вот хорошая ссылочка http://malsup.com/jquery/corner/
Yoon 28.01.2009 в 22:59 11
А можно его не к Div’ам, а например в навигации на nav, что-то у меня не выходит привязать. Если кто знает как это сделать отпишете пожалуйста на мыло – jeberza@gmail.com
Роман 19.02.2009 в 6:07 12
Генадий скажите как заставить этот плагин применять один и тетже стиль к нескольким сразу дивам или всеже необходимо перечислять все дивы в следующей конструкции

$(document).ready(function(){
// ——- Уголки ——-
$(«#div01″).corner(«round»);
$(«#div02″).corner(«round»);
// ——- Уголки ——-
});

просто в таком варианте у меня получается огромная портянка и уголки если указывать без перечисления всех используемых дивов применяется только к первому а все остальные игнорируются, как выйти из такого положения чтоб не перечислять т.к. возникает ситуация что некоторые дивы к которым я хочу применить плагин поя вляются днамически и в этом случаи плагин к ним уже не применяется…
Gennady 19.02.2009 в 10:07 13
Почитайте внимательно статьи про селекторы jQuery – это очень мощный механизм отбора нужных элементов. Вот Вам пример:
alert($(‘div[id], span, input[type=text]‘).length);
такой код найдет все элементы div у которых имеется атрибут id, все элементы span и все элементы input у которых атрибут type имеет значение text.
Что касается элементов, которые вставляются в DOM в процессе – Вам пригодятся статьи:
Обработка событий для элементов DOM, загружаемых через ajax и Плагин Live Query. Ну и с изменениями в 1.3.1 тоже неплохо познакомиться…
Александр 19.02.2009 в 10:20 14
В IE6 появляются глюки и при использовании бордера в 1 пиксел.
Александр 19.02.2009 в 11:12 15
Поспешил, на самом деле в IE6 все нормально работает. Когда делаете рамку не используйте в inner блоке свойство vertical-align иначе появляются глюки. А га счет бордера в 1 пиксел все еще есть проблема, причем в верхних углах.
Роман 19.02.2009 в 15:34 16
Если я вас правильно понял то в моем случаи исходя из вашего примера код должен быть примерно следующего вида

$(document).ready(function(){
// ——- Уголки ——-
$(«div[id=menu_top]«).corner(«round»);
// ——- Уголки ——-
});

в этом случаи все работает, но единственно настораживает то что в вашем примере в коде имется alert или это не принципиально?

плюс интересует где на странице распологать этот код перед закрывающим тегом или после открывающего тега , где его правильнее былобы расположить.
–
Заранее благодарен.
Gennady 19.02.2009 в 16:51 17
alert – это просто в примере…
Код можно расположить где угодно, но обычно его помещают в раздел HEAD.
Ну, а насчет Вашего случая –
$(”div[id=menu_top]”).corner(”round”);
- этот код по идее должен выбрать только один-единственный div, у которого id=menu_top. Т.е. можно проще написать:
$(”#menu_top”).corner(”round”);
Роман 19.02.2009 в 19:59 18
Генадий спрашивая про расположение я имел ввиду о расположении самого блока кода
$(”div[id=menu_top]”).corner(”round”);
вначале страницы или в конце
Gennady 19.02.2009 в 22:03 19
Я понял. Поэтому так и ответил. Обычно блоки JS-кода располагают в разделе HEAD страницы. Хотя можно расположить и в BODY.
Роман 19.02.2009 в 22:25 20
Благодарю за помошь, благодаря этому плагину почти доделал сайт без графики и с закруглениями результат работы и ваших подсказок тут –
http://test.rklab.ru

блок кода как вы и порекомендовали разместил в HEAD
Dima 21.02.2009 в 17:23 21
Поджите, как задать фон, который появляется рядом с углами. Если общий фон сайта белый – то всё хорошо, а если темнее – видны белые артефакты на месте закругления
Marcus 10.03.2009 в 13:05 22
Геннадий, спасибо за ресурс. Осваиваю jquery и при работе с corner столкнулся с проблемой.
$(‘#main’).corner(‘15px’);
$(‘#navigation’).corner(‘15px’);
Див main расположен под дивом navigation, по выполнению выше приведенного скрипта все углы должны скругляться у обоих элементов, если я правильно все понял… Дело в том, что у элемента main скругляются только bottom углы, а у navigation все… Получается не то, что хотелось бы, нужно чтобы верхние углы дивов, наложенные тютелька- в-тютельку скруглялись, чего не происходит:( Под скругленными углами navigation отчетливо видно прямые top углы блока main. Мб посоветуете какое-нибудь решение проблемы?
Gennady 10.03.2009 в 21:42 23
Можно написать и так:
$(‘#main, #navigation’).corner(‘15px’);
Точно сказать в чем причина не берусь, но имхо, скорее всего в CSS – может быть «верхний» блок имеет смещение относительно своей позиции, заданное через свойство top, так, что он немного налезает на следующий блок…
Попробуйте наваять простенькую страничку и с тем куском разметки, что Вам нужен и найти в чем проблема.
Роман 20.03.2009 в 23:13 24
Gennady.
Благодарю за помощь, я всеже разобрался благодаря вам и в результате на вашем примере переработал сайт газеты http://www.kamkrai.com и еще на базе этого плагина открыл свой небольшой проэкт http://www.rklab.ru благодарю за содействие.

Код по вашей наводке использовал следующий:

$(document).ready(function(){
// — Уголки | START —
$(«a[class=js_menu], a[class=js_menu_header], a[class=js_menu_header_logo], div[id=js_content], div[id=js_module], div[id=js_module_top], a[class=js_menu_top]«).corner(«round»);
// — Уголки | STOP —
});

разместил его между тегами
Marcus 04.04.2009 в 23:44 25
спасиб Генадий,. разобрался
Алексей 06.04.2009 в 21:07 26
Геннадий столкнулся с тойже проблемой о которой спрашивал Dima в 22 сообщении. И так, как же вылечить проблему того, если background страницы имеет фон отличный от палитры, то есть допустим картинка, при этом у закругленного с помощью скрипта DIV имеет черные видимые срезанные углы. Объясни как это вылечить?
Станислав 07.04.2009 в 9:35 27
Если свернуть браузер (IE7), а затем развернуть, то скругления растягиваются по высоте. В чем причина?
Андриан 06.06.2009 в 2:52 28
В опере 9.62 глючит. если у дива стоит padding, чем больше padding тем больше глюк, если padding в значение 0, то глюк проходит!!!!
Lyudmila 09.06.2009 в 11:10 29
Геннадий столкнулась с той же проблемой, о которой спрашивал Dima в 22 сообщении. Надо на затемненной с цветом затемнения странице вывести модальное закругленное окно. При закруглении виден цвет затемнения в неотображаемых уголках. Пожалуйста, подскажите- как избавиться от этого?
Gennady 09.06.2009 в 19:46 30
Знаете, может стоит взять свежую версию плагина. На моем сайте эта статья давнишняя. Посмотрите сайт разработчика – там и свежая версия есть и примеров огромное количество.
http://malsup.com/jquery/corner/
Денис 16.06.2009 в 15:04 31
Здравствуйте, Геннадий!
Два часа ломал голову почему у меня уголки рисуются только в IE6. Я просто пытлся загруглить уголки у DIV с белым фоном!

Вы не знаете можно ли это как-то исправить? Если я меняю цвет фона – уголки появляются, а также имеются белые обрезки. (((
Денис 16.06.2009 в 15:17 32
Разобрался!
Сначала попытался вот так обойти проблему:
$(this).corner(«cc:#009″);

А потом понял, что у меня DIV лежит в теле и поэтому такой глюк!
Если DIV помещать в другой DIV, то такого не наблюдается!
Дмитрий :-) 17.07.2009 в 13:10 33
а подскажите, пожалуйста, почему при закруглении углов теряется бордер
Gennady 18.07.2009 в 16:07 34
Я писал в комменте 31, если версия не последняя у Вас, проблему могут быть. Посмотрите свежую версию, там вроде бы все в порядке должно быть.
Сокол 24.08.2009 в 21:50 35
А, можно ли сделать так, чтобы была рамка закругленная,а сам блок был другого цвета?
Gennady 25.08.2009 в 21:20 36
Легко…
```
$("div.example").wrap("<div class='outer'<>/div>");
$("div.example").corner("round 12px")
                  .parent()
                  .corner("round 18px");
```
Идея в следующем – исходный div (с классом example) с помощью метода wrap оборачивается в другой div (с классом outer). Дальше на div.example рисуются уголки, затем поднимаемся к родителю, т.е. к div.outer и рисуем ему уголки.
Ну, ес-но div’ы разных цветов и получится рамка. В стилях лучше дать div’ам одинаковые размеры, а для внешнего div’а еще и padding такой, какая нужна ширина рамки…
Trivium 29.10.2009 в 16:50 37
Чтобы картинке сделать края можно картинку кинуть на фон дива и диву сделать закругление
julia 06.12.2009 в 14:30 38
набирающий популярность IE8 правильно не отобразил ни один из блоков/углов
Max Rudash 11.01.2010 в 0:59 39
Для всех, у кого при отличающемся от дефолта фоне за скруглённым диваном появляются артефакты (белые или чёрные точки) в Опера и ИЕ. У меня то же самое было. Путём экспериментов найдено такое решение: оборачиваем скруглённый диван ещё одним, в котором задаём БГ как на странице. Примерно так:

Мой профиль
Михаил 11.01.2010 в 16:23 40
еще одна бага в ие если у дива не задана высота height то едут нижние уголки блоков это как то исправимо???
Gennady 20.01.2010 в 11:10 41
Обсуждение статьи можно продолжить на форуме jQuery.