Wie kann ich mit dem jQuery Round Corner-Plugin runde Ecken erstellen?

Question

Ich brauche eine runde Ecke auf meiner Website. Ich bin ziemlich unerfahren mit jQuery und JavaScript im Allgemeinen; Was ist der richtige Weg, um dieses Plugin zu laden und aufzurufen?

Answer 1

Sie müssen die jquery.corner.js verwenden und in Ihrem Skript, fügen Sie einfach

$(document).ready(function(){ 
    $("#box1").corner(); 
}); 

Und in Ihrem Mark-up, sind Sie haben soll:

<div id="box1"></div> 

Sie kann die jQuery Rounded Corners Tutorial für mehr überprüfen.

Answer 2

prüfen diese Demo-Seite: jQuery Corner Demo

Answer 3

1. Fügen Sie diesen Code in den Kopf Abschnitt (vorausgesetzt, Ihr jquery lokal):

<script src="Scripts/jquery-1.3.1.js" type="text/javascript"></script> 
<script src="Scripts/jquery.corner.js" type="text/javascript"></script> 

<script type="text/javascript"> 
     $(function(){ 
      $('div.round').each(function() { 
       var q = $(this).corner("rounded 7px"); 
       eval(q); 
      }); 
     }); 
</script> 

2. die Klasse hinzufügen = "round" zu einem div-Wrapper

<div class="round"></div> 

• Fügen Sie einfach die Klasse = "Runde" zu jedem gewünschten div auf Ihrer Seite hinzu.
• Ändern Sie den 7px-Wert, um die "Rundheit" der Ecke anzupassen. Eine höhere Nummer ist runder.

Answer 4

Ich würde sagen go with css3. Für Firefox ist es:

.roundedCorners { -moz-border-radius: 5px; } 

für Safari/Chorme es ist:

.roundedCorners { -webkit-border-radius: 5px; } 

Und ich würde dort anhalten. Da dies eine reine Präsentation/Erscheinung ist, würde ich mich nicht mit den JavaScript-Lösungen herumschlagen. Wenn Ihre Benutzer keinen Browser verwenden, der css3 unterstützt, erhalten sie keine abgerundeten Ecken.

Answer 5

Dieser Artikel/Tutorial ist sehr gründlich: http://woork.blogspot.com/2009/08/css3-rounded-corners-for-every-browser.html