jQuery округлые углы

Большинство и слышать не хочет о применении сриптов при верстке, мотивируя это тем, что любая верстка должна хорошо смотреться сама по себе,и это правильно, злоупотреблять js не нужно. Но есть исключения.

Используем плагин к JQuery — curvyCorners. Закругляет углы он отлично, и работает независимо от фонового бэкграунда, и собственного фонового изображения.

Подключаем все в head:



Lля того чтобы скруглить все четыре угла нужного нам блока, нужно определиться какой блок мы будем закруглять (в примере это блок с id=main) и написать следующее:

$(document).ready(function(){
$("#main").corner();
});

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

$(document).ready(function(){
$("#main")
.corner({
tl:{radius: 20},
tr:{radius:20},
bl:{radius: 0},
br:{radius:0},
antiAlias:false,
autoPad: true
});
});

tr, tl, bl, br - это соответствующие имена каждого из углов (top right, top left, bottom left, bottom right).

Свойство antiAlias - установленное в false отключает сглаживание углов, делает их очертания более резкими, но в то же время значительно уменьшает время, загрузки страницы.

Свойство autoPad - также может принимать значения true и false, уставновленное в значение true, позволяет сохранить назначеныый через css паддинг, скругляемому блоку.

  • jQuery SELECT (jquery-asmselect)
  • jQuery отслеживаем ввод символа в input (Enter, tab)
  • WordPress подключение JQuery
  • jQuery png Fix
  • Печать картинки на странице через js
  • jQuery ajax в IE7
  • jQuery live hover
  • Prototype и jQuery используем одновременно
  • jQuery cookie проще некуда
  • jQuery watermark input field
  • jQuery древовидное меню
  • jQuery ajax рейтинг
  • 1 комментарий на “jQuery округлые углы”

    1. vitrizet:

      Ну как сказать. Все вполне верстабельно… Хотя как вариант втыкать его, смотреть через firebug что он нагенерил, а потом это копипастить — может ускорить работу

    Оставить комментарий