Das Corner plugin wurde ursprünglich geschrieben von Dave Methvin.
Das Auge isst mit
Hier zeigen wir, wie eine Webseite einfach aufgewertet werden kann. Auf der Demoseite des Authors, gibt es noch mehr Beispiele. Die Hilfeseite der Parameter (english)
Auto-Ready!
Round
$(this).corner();
Bevel
$(this).corner("bevel");
Notch
$(this).corner("notch");
Bite
$(this).corner("bite");
Slide
$(this).corner("slide");
Jut
$(this).corner("jut");
Curl
$(this).corner("curl");
Fray
$(this).corner("fray");
Dog Ear
$(this).corner("dog tr 40px");
Dog2
$(this).corner("dog2");
Dog3
$(this).corner("dog3");
Bite
$(this).corner("bite 20px").parent().css('padding', '15px').corner("bite 20px")
Round
$(this).corner("round 8px").parent().css('padding', '8px').corner("round 14px")
Bevel
$(this).corner("bevel 8px").parent().css('padding', '5px').corner("bevel 10px")
Aufruf
if($(".rounded, .roundedb, .dogtr, #readyTest, #header").length) {
$.insert(WB_URL+'/modules/jquery/plugins/jquery-corner.js').ready(function() {
$(".rounded").corner('round 15px'); /* test for rounding */
$(".roundedb").corner('bottom 15px'); /* test for rounding */
$(".dogtr").corner('dog tr 35px');
$("#ready_test").corner();
$('div.inner').wrap('<div class="outer"></div>');
$('samp').wrap("<code></code>");
$('corner-demo').wrap("<div></div>");
$('div.demo, div.inner').each(function() {
var t = $('samp', this).text();
eval(t);
});
// fixed/fluid tests+-
$("div.box, div.plain").corner();
$("#abs").corner("cc:#08e");
});
}
HTML
<div class="inner">
<h1>Bite</h1>
<samp>$(this).corner("bite 20px").parent().css('padding', '15px').corner("bite 20px")</samp></div>
<div class="inner">
<h1>Round</h1>
<samp>$(this).corner("round 8px").parent().css('padding', '8px').corner("round 14px")</samp></div>
<div class="inner">
<h1>Bevel</h1>
<p><samp>$(this).corner("bevel 8px").parent().css('padding', '5px').corner("bevel 10px")</samp></p>
</div>
