Coins arrondis fluides avec jQuery

Question

Quelle est la meilleure façon de créer des coins arrondis fluides en largeur/hauteur avec jQuery ?

---

Ce plugin ne garde pas la même hauteur.J'ai un div de 10 pixels de haut sur lequel je veux arrondir les coins, lorsque j'utilise ce script, il ajoute environ 10 pixels à ce qui se trouve là-bas.

Answer 1

J'utilise: Jquery-coins-ronds-toile

il gère les bordures et garde les choses de la même taille, en fait, vous devez remplir un peu pour éviter que les lettres ne vivent dans le pli.C'est assez rapide, sauf si vous utilisez ie 6.Même jolie syntaxe que les autres packs de coin, mais juste plus jolie en général.

Modifié pour ajouter un nouveau lien pour Toile des coins ronds jQuery

Answer 2

$(this).corner();

Voir: malsup.com/jquery/corner et dépôt github pour future référence

Answer 3

La façon dont l'API jQuery UI Theming accomplit cela dans Firefox est avec "Aides au rayon de coin".

Voici à quoi ils ressemblent dans le CSS fourni dans ma copie de l'interface utilisateur :

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

Malheureusement, ceux-ci ne semblent avoir aucun effet dans IE7 à partir de cet article.

Dans le code jQuery, l'une de ces classes peut être appliquée de la manière suivante :

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

Answer 4

Si vous souhaitez un contrôle total sur la bordure et le dégradé, vous pouvez utiliser mon plugin iQuery Background Canvas.Il fonctionne avec un élément HTML5 Canvas et permet de dessiner des bordures et des arrière-plans dans n'importe quelle variation.Mais vous devriez être capable de programmer JavaScript

Il s'agit d'un échantillon complet avec un dégradé d'arrière-plan et des coins arrondis.comme vous pouvez le voir, le dessin est entièrement réalisé en JavaScript, vous pouvez définir tous les paramètres que vous souhaitez.Le dessin est refait à chaque redimensionnement (En raison de l'événement de redimensionnement), vous pouvez adapter le dessin d'arrière-plan pour montrer ce que vous voulez sur cette taille spécifique.

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

Voici le plugin, et ce site en fait un large usage :Plugin de toile de fond jQuery