jQuery ile sıvı yuvarlatılmış köşeler

Question

JQuery ile sıvı genişliği/yüksekliği yuvarlatılmış köşeler oluşturmanın en iyi yolu nedir? Bu eklenti yüksekliği aynı tutmuyor. Köşeleri yuvarlamak istediğim 10px'lik yüksek bir div'um var, bu betiği kullandığımda, orada neyin üzerine yaklaşık 10 piksel ekler.

Answer 1

kullandığım: Jquery-roundcorners-canvas

o sınırları kolları ve harfler canlı sahip olmaktan tutmak için biraz sen ped zorunda aslında, her şeyi aynı boyut tutar Kırışıkta. Oldukça hızlı, yani 6'da olmadıkça. Diğer köşe paketlerinin aynı sözdizimi, ancak genel olarak daha güzel.

Düzenlendi

jQuery Roundcorners Canvas

Answer 2

$(this).corner(); 

bakınız: malsup.com/jquery/corner ve github repository for future ref

Answer 3

için jQuery UI tema kullanımını API "Corner Radius Helpers" ile Firefox'ta bunu gerçekleştirir şekilde yeni bağlantı eklemek için.

İşte onlar UI benim kopyasında birlikte gelen CSS gibi görünür:

/* 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; } 

Maalesef bu bu yazının olarak IE7 herhangi bir etkiye sahip görünmemektedir. jQuery kodunda

, bu sınıflardan birinin böyle bir moda bir şeye uygulanabilir olabilir: Eğer bir d degrade sınırına yaklaşık tam kontrol istiyorsanız

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

Answer 4

, sen benim iQuery Arkaplan Tuval eklentisini kullanabilirsiniz. Bir HTML5 Canvas öğesi ile çalışır ve herhangi bir varyasyonda sınırlar ve arka planlar çizmeyi sağlar. Ama programcı olarak olmanız gerekir. JavaScript

Bu, arka plan degrade ve yuvarlak köşeli tam özellikli bir örnek. Gördüğünüz gibi, çizim tamamen JavaScript ile yapılır, istediğiniz her parametreyi ayarlayabilirsiniz. Çizim, her yeniden boyutta yeniden boyutlandırılır (Yeniden Boyutlandırma Olayı nedeniyle), arka plan resmini bu belirli boyutta istediğiniz wat gösterecek şekilde uyarlayabilirsiniz. İşte

$(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); 
} 

eklenti olduğunu ve bu site bunun geniş bir yararlanır: jQuery Background Canvas Plugin