Флюидные закругленные углы с jQuery

Каков наилучший способ создания округлых углов ширины и высоты жидкости с помощью jQuery?

Этот плагин не поддерживает высоту. У меня есть 10px высокий div, который я хочу обогнуть по углам, когда я использую этот script, он добавляет около 10px на что там.

Ответы

Ответ 1

Я использую: Jquery-roundcorners-canvas

он обрабатывает границы и сохраняет вещи одинакового размера, на самом деле вам нужно немного поиграть, чтобы у вас не осталось писем. Его довольно быстро, если вы не на 6. Такой же симпатичный синтаксис других угловых упаковок, но в целом более красивый.

Отредактировано для добавления новой ссылки для jQuery Roundcorners Canvas

Ответ 3

Способ, которым API-интерфейс jQuery UI Theming выполняет это в Firefox, - это "" Помощники радиуса радиуса".

Вот как они выглядят в CSS, который был включен в мою копию пользовательского интерфейса:

/* Corner radius */
.ui-corner-tl { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; }
.ui-corner-tr { -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; }
.ui-corner-bl { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; }
.ui-corner-br { -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; }
.ui-corner-top { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; }
.ui-corner-bottom { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; }
.ui-corner-right {  -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; }
.ui-corner-left { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; }
.ui-corner-all { -moz-border-radius: 4px; -webkit-border-radius: 4px; }

К сожалению, они не имеют никакого эффекта в IE7 на этом посту.

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

$('#SomeElementID').addClass("ui-corner-all");

Ответ 4

Если вы хотите полностью контролировать границы градиента d, вы можете использовать мой плагин iQuery Background Canvas. Он работает с элементом HTML5 Canvas и позволяет рисовать границы и фоны в любых вариантах. Но вы должны иметь возможность программировать JavaScript

Это полнофункциональный образец с градиентом фона и закругленными углами. как вы можете видеть, рисунок полностью выполнен в JavaScript, вы можете установить каждый необходимый вам параметр. Рисунок перерисовывается при каждом изменении размера (из-за события изменения размера) вы можете настроить фоновый рисунок, чтобы показать, что вы хотите на этот конкретный размер.

$(document).ready(function(){
    $(".Test").backgroundCanvas();
});

function DrawBackground() {
    $(".Test").backgroundCanvasPaint(TestBackgroundPaintFkt);
}
// Draw the background on load and resize
$(window).load(function () { DrawBackground(); });
$(window).resize(function() { DrawBackground(); });

function TestBackgroundPaintFkt(context, width, height, elementInfo){
    var options = {x:0, height: height, width: width, radius:14, border: 0 };
    // Draw the red border rectangle
    context.fillStyle = "#FF0000";
    $.canvasPaint.roundedRect(context,options);
    // Draw the gradient filled inner rectangle
    var backgroundGradient = context.createLinearGradient(0, 0, 0, height - 10);
    backgroundGradient.addColorStop(0 ,'#AAAAFF');
    backgroundGradient.addColorStop(1, '#AAFFAA');
    options.border = 5;
    context.fillStyle = backgroundGradient;
    $.canvasPaint.roundedRect(context,options);
}

Вот плагин, и этот сайт широко использует его: jQuery Background Canvas Plugin