Закругленные углы на jquery

В этом посте кратко о закруглении уголков у элементов на web-странице. Пришлось однажды встретиться с этой задачей и теперь ее решение, которое я использовал.

Способов сделать закругленные углы у элемента web страницы существует достаточно много. Тут и слои размером в 1 пиксель, и использование фоновых картинок, и использование css-спрайтов. Я расскажу о закруглении с помощью jQuery. Почему именно этот способ — мне он показался самым быстрым. Правда, как я потом обнаружил, этот способ не самый лучший для ие. Но об ие, как водится, отдельный разговор.
Итак, вернемся к нашим углам. Чтобы их закруглить используем плагин с незамысловатым названием jQuery Corner (зеркало на Github).
Подключение плагина к странице стандартно — сначала подключаем сам jQuery, потом Corner:

  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  2. <script type="text/javascript" src="http://github.com/malsup/corner/raw/master/jquery.corner.js?v2.11"></script>

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

  1. $('.corner').corner();

Вуаля, углы скруглились, но это не все. Плагин имеет множество настроек. Можно задать радиус скругления, а также указать какие углы стоит закруглить:

  1. $('.corner').corner('tl br 10px');

Этот код скруглит верхний левый и нижний правый углы с радиусом скругления 10 пикселов. Просто, не правда ли? Но и это не все. Плагин имеет 19 вариантов обработки углов — тут и вырезы и скосы и много чего интересного — примеры приведены на оффсайте.
Ко всему прочему в скрипте можно задать цвет границ, а можно их вообще не показывать, оставив только скосы и скругления!
Чтобы убрать закругления у элемента можно воспользоваться таким кодом:

  1. $('.corner').uncorner();

И уголки станут как и прежде, прямыми.
Вот сколько всего много умеет этот плагин — jQuery Corner.
Но всё портит Internet Explorer. C версиях ниже 8й скругление работает неправильно — если не выключить отрисовку границ у «скругляемых» элементов, границы будут поверх и скроют закругления. Остается надеяться, что разработчики плагина найдут решение этой досадной проблемы и плагин действительно станет бесценным для закругления углов без помощи css.

Запись опубликована в рубрике JS & jQuery с метками , , , . Добавьте в закладки постоянную ссылку.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre lang="" line="" escaped="" cssfile="">