Płynne zaokrąglone narożniki z jQuery

Jaki jest najlepszy sposób tworzenia zaokrąglonych naroży zaokrąglonych naroży za pomocą jQuery?Płynne zaokrąglone narożniki z jQuery

Ta wtyczka nie utrzymuje tej samej wysokości. Mam 10 x wysoki div, który chcę zaokrąglić w rogach, kiedy używam tego skryptu, dodaje około 10px na to, co tam.

Źródło

2008-08-30 Ethan Gunderson

używam: Jquery-roundcorners-canvas

obsługuje granic i utrzymuje rzeczy ten sam rozmiar, w rzeczywistości trzeba pad w kawałku, żeby nie mając litery żyć w fałdzie. Jest dość szybki, chyba że jesteś na przykład 6. Ta sama ładna składnia innych paczek narożnych, ale po prostu ładniejsza w ogóle.

Edited by dodać nowy link do jQuery Roundcorners Canvas

Źródło

2008-08-30 02:35:18 DevelopingChris

link wydaje się być uszkodzony. Czy to jest właściwy adres URL: http://ragamo.medioclick.com/jquery/corners/? – Manu

teraz wydaje się, że oba łącza są zepsute. powinno to być defacto: http://plugins.jquery.com/project/jquery-roundcorners-canvas – T3db0t

$(this).corner();

Patrz: malsup.com/jquery/corner i github repository for future ref

Źródło

2008-08-30 00:23:34

prostu próbowałem tego. Działa już od 5 minut! Powodem, dla którego podoba mi się ten, jest brak zależności od innych bibliotek/wtyczek. –

Najnowsza wersja znajduje się tutaj: http://www.malsup.com/jquery/corner/ –

Dobry opis korzystania z jQuery.Corner można znaleźć pod adresem http://statehandler.com/javascript/jquery-corner – Andreas

Sposób API jQuery UI Skórki realizuje to Firefox jest z "Corner Radius Helpers".

Oto jak wyglądają w CSS, które zostały spakowane w mojej kopii interfejsu:

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

Niestety, te wydają się nie mieć żadnego wpływu na IE7, jak tego postu.

W kodzie jQuery, jedna z tych klas mogą być stosowane w czymś mody tak:

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

Źródło

2009-03-24 07:08:41 Keyslinger

Jeśli chcesz pełną kontrolę o granicy gradientem d, można używać iQuery wtyczki Canvas tle. Działa z elementem Canvas HTML5 i umożliwia rysowanie obramowań i tła w dowolnej odmianie. Ale powinieneś być w stanie zaprogramować JavaScript

Jest to w pełni funkcjonalna próbka z gradientem tła i zaokrąglonymi narożnikami. jak widać, rysunek jest całkowicie zrobiony w JavaScript, możesz ustawić każdy żądany parametr. Rysunek jest ponawiany przy każdej zmianie rozmiaru (ze względu na zdarzenie zmiany rozmiaru), można dostosować rysunek tła, aby pokazać wat, który chcesz w tym określonym rozmiarze.

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

Oto plugin, a ta strona sprawia ogromną wykorzystanie: jQuery Background Canvas Plugin

Źródło

2009-09-06 07:15:50

Płynne zaokrąglone narożniki z jQuery

Odpowiedz

Powiązane problemy