Was ist der beste Weg, um standardbasierte, browserübergreifende kompatible abgerundete Ecken in Drupal zu erstellen?

Ich arbeite derzeit an einem Drupal 6 Thema, für das der Designer explizit anfordert, viele abgerundete Ecken zu verwenden.Was ist der beste Weg, um standardbasierte, browserübergreifende kompatible abgerundete Ecken in Drupal zu erstellen?

Ich könnte natürlich die abgerundeten Ecken - traditionell - mit Bildern erstellen. Aber ich weiß, dass es auch bessere und leichtere Möglichkeiten geben muss, abgerundete Ecken zu erzeugen.

würde optimal Ich mag meine CSS als standardkonforme CSS3 schreiben, mit Selektoren wie:

h2 {border-radius: 8px;}

Verwendung von Browser-spezifisch ist CSS ist auch sehr in Ordnung, wie

Bei Bedarf kann ich auch einige benutzerdefinierte JavaScript von Hand einfügen. Ich möchte nur vermeiden, dass ich noch weitere 100 abgerundete Eckbilder zu meinem Markup hinzufüge.

Irgendwelche Vorschläge für den besten Ansatz?

Quelle

2010-02-22 jsalonen

Hey, ich kämpfe mit genau dem gleichen Problem. Das Verwenden von Bildern ist das, was ich bisher gemacht habe, aber es ist eine Menge Arbeit und ich würde mich auch freuen, eine einfachere Lösung zu finden ... – mingos

Probieren Sie das abgerundete Ecken-Plugin aus! Es hat Magie für mich funktioniert. – jsalonen

eine Klasse definieren wie "roundy-Ecke" und die Ecke jQuery-Plugin verwenden, etwa so:

$('.roundy-corner').corner();

Sie die jQuery roundy Ecke Plugin benötigen:

http://www.malsup.com/jquery/corner/

Ich mag an Verwenden Sie JavaScript hier, da es kein zusätzliches Markup im Quelldokument erfordert; Das Skript fügt bei Bedarf Platzhalterelemente ein. Auch in der fernen Zukunft, wenn wir alle fliegende Autos haben und IE Border-Radius unterstützt, können Sie es durch reines CSS ersetzen.

Quelle

2010-02-22 12:49:59 olooney

Ich sollte hinzufügen, dass das Plugin Browser-spezifische Border-Radius CSS verwendet, wenn unterstützt. – olooney

Zweite diese Ein paar Beispiele aus dem obigen Link normal --- $ (. Roundy-Ecke) .corner ("round 8px"). Parent(). Css ('padding', '4px') .corner ("round 10px") --- ---

Thin

FAT $ (. roundy-cornerFat) .corner ("round 8px"). parent(). CSS ('padding', '8px') .corner ("rund 14px") ---

Fat

(bah, keine Zeilenumbrüche) – Matt

Vielen Dank! Genau das, was ich gesucht habe !! – jsalonen

Einige Drupal-spezifische Anmerkungen Plugin die vorgeschlagenen abgerundeten Ecken verwenden:

Herunterladen jquery.corner.js und legen Sie sie in Ihre Skripte-Ordner des Drupal-Installation. Stellen Sie sicher, dass die Dateiberechtigungen korrekt festgelegt sind.
Laden Sie das Skript in Ihrem (Zen) Thema durch die folgende Zeile in template.php Zugabe: template.php drupal_add_js('scripts/jquery.corner.js');
Assign abgerundeten Ecken auf jeden Teil der Seite durch Styling Hinzufügen von Befehlen wieder. Beachten Sie, dass Sie sie mit der Methode drupal_add_js verknüpfen müssen. Zum Beispiel:

drupal_add_js(
    "$(document).ready(function() { 
     $('#primary a').corner('top round 4px'); 
     $('.block-inner h2.title').corner('top round 4px'); 
    });", 
    'inline' 
);

Das ist es !!! Schöne abgerundete Ecken ohne Bilder!

Quelle

2010-02-22 13:40:55 jsalonen

Was ist der beste Weg, um standardbasierte, browserübergreifende kompatible abgerundete Ecken in Drupal zu erstellen?

Antwort

Verwandte Themen