examples - jquery pdf

Esquinas redondeadas fluidas con jQuery

Question

¿Cuál es la mejor manera de crear esquinas redondeadas de ancho / alto fluido con jQuery?

Ese complemento no mantiene la altura igual. Tengo un div alto de 10px en el que quiero redondear las esquinas, cuando uso ese guión, agrega alrededor de 10px a lo que hay allí.

Answer 1

La forma en que la API de The jQuery UI Theming logra esto en Firefox es con " Corner Radius Helpers ".

Así es como se ven en el CSS que se incluyó en mi copia de la IU:

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

Desafortunadamente, estos no parecen tener ningún efecto en IE7 a partir de esta publicación.

En el código de jQuery, una de estas clases podría aplicarse de la siguiente manera:

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

Answer 2

Si desea un control total sobre el borde y el degradado, puede usar mi complemento iQuery Background Canvas. Funciona con un elemento HTML5 Canvas y permite dibujar bordes y fondos en cualquier variación. Pero deberías ser capaz de programar JavaScript

Esta es una muestra completa con un degradado de fondo y esquinas redondeadas. como puede ver, el dibujo está completamente hecho en JavaScript, puede configurar cada parámetro que desee. El dibujo se vuelve a hacer en cada cambio de tamaño (Debido al evento de cambio de tamaño), puede adaptar el dibujo de fondo para mostrar el wat que desea en este tamaño específico.

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

Aquí está el plugin, y este sitio hace un gran uso de él: jQuery Background Canvas Plugin

Answer 3

$(this).corner();

Ver: malsup.com/jquery/corner y repositorio de github para futuras referencias

Answer 4

Yo uso: Jquery-roundcorners-canvas

maneja las fronteras y mantiene las cosas del mismo tamaño, de hecho, tiene que rellenar un poco para evitar que las letras vivan en el pliegue. Es bastante rápido, a menos que estés en ie 6. La misma sintaxis bonita de los otros paquetes de esquina, pero simplemente más bonita en general.

Editado para agregar un nuevo enlace para jQuery Roundcorners Canvas