jQuery Corner：圆角矩形原来如此简单[zT]

译自：http://www.malsup.com/jquery/corner/

简介

jQuery Corner plugin是由Dave Methvin 和Malsup 合 作开发的jQuery插件，用于创建非直角的边框。

它利用给页面添加了很多的元素来实现其功能。尤其是，它给要改变边角的元素添加一条条的div，然后为其设置实心的背景颜色用于隐藏真实的边角和元 素。因此，当你回过头来查看被改变边角的元素时，要考虑到这些实心的div隐藏了你要改变的真实的矩形元素。这会让你理解这个插件固有的限制，也就是说这 个插件适于为块级元素（如div、p等）创建圆角或其他类型的边角，对于内联元素（如span、a），这样的改变或许将充满更多的挑战。

最近，作者为支持圆角矩形的浏览器（如Opera 10.5+、Firefox、Safiri和Chrome）添加了原生的支持。这样在这些浏览器中这个插件可以简单地使用CSS属性来创建圆角。但是在 IE中，只好期待IE9的支持。对于所有的浏览器，如果要创建非圆角的边角模式，都需要使用许多div条的方式来实现。

使用方法

以this为例:

• $(this).corner(option); 为this元素指定特殊的边角
  参数option为配置字符串，可选，格式为”模式 位置 大小 颜色”，每一部分也是可选的。
• $(this).uncorner(); 为this元素取消所有边角设置，恢复矩形边框

下载

可以点击这里下载 ，也可以访问其官方网站http://www.malsup.com/jquery/corner/ 。

示例

本页所有示例均可以从这里看到效果：http://www.malsup.com/jquery/corner/

可用边角样式

• Round：$(this).corner();
• Bevel：$(this).corner(“bevel”);
• Bite：$(this).corner(“bite”);
• Cool：$(this).corner(“cool”);
• Sharp：$(this).corner(“sharp”);
• Jut：$(this).corner(“jut”);
• Curl：$(this).corner(“curl”);
• Tear：$(this).corner(“tear”);
• Fray：$(this).corner(“fray”);
• Wicked：$(this).corner(“wicked”);
• Sculpt：$(this).corner(“sculpt”);
• Long：$(this).corner(“long”);
• Dog Ear：$(this).corner(“dog”);
• Dog2：$(this).corner(“dog2″);
• Dog3：$(this).corner(“dog3″);
• Dogfold（不支持渲染在quirksmode模式下的IE）：$(this).corner(“dogfold”);
• Bevelfold（不支持在非标准模式下渲染的IE8）：$(this).corner(“bevelfold”);

自定义边角位置

可以使用top（上边两个）、bottom（下边两个）、left（左侧两个）、right（右侧两个）、tl（左上角）、tr（右上角）、 bl（左下角）、br（右下角）来指定哪个（些）边角的改变样式，如：

• 上边是Bevel：$(this).corner(“bevel top”);
• 左上角是Bite：$(this).corner(“bite tl”);
• 底部是Round：$(this).corner(“bottom”);
• 左上角和右下角是Cool：$(this).corner(“cool tl br”);

指定边角大小

使用像素值来指定边角的大小，如：

• Round 30px：$(this).corner(“30px”);
• Cool 20px：$(this).corner(“cool 20px”);

混合使用

可以利用对同一个元素多次调用corner函数的方法来合并样式，如：

• Round 和 Bevel：$(this).corner( “bottom”).corner(“top bevel”);
• Round 和 Notch：$(this).corner( “br top”).corner(“notch bl 20px”);
• 更疯狂的：$(this).corner(“jut tl 20px”).corner(“dog tr 20px”).corner(“bite bl 15px”).corner(“notch br”);

装饰

可以使用嵌套的方式创建漂亮的非矩形边框，如：

• Round：$(this).corner(“round 8px”).parent().css(‘padding’, ‘4px’).corner(“round 10px”)
• Fray/Tear：$(this).corner(“tear 20px”).parent().css(‘padding’, ‘8px’).corner(“fray 10px”)

配置颜色

默认情况下，边角使用透明和父元素的背景颜色。当然也可以指定其他的颜色，方法是在corner函数参数的颜色位置使用以下字符串：

边角颜色：cc:#xxx
div条颜色：sc:#xxx
显示边框：keep

例如：

• 有颜色的边角：$(this).corner(“cc:#009″);
• 有颜色的div条：$(this).corner(“sc:#009″);
• cc:#009 keep bite：$(this).corner(“bite keep 15px cc:#009″);

使用Metadata

使用Metadata(元数据)，可以代替corner函数的参数来指定样式，如：

标记

< div   class = "myCorner"   data-corner = "left 20px" > Metadata Example </ div >

<div class="myCorner" data-corner="left 20px">Metadata Example</div>

脚本

$( '.myCorner' ).corner();

$('.myCorner').corner();

为了您的安全，请只打开来源可靠的网址

打开网站     取消

来自: http://hi.baidu.com/yeakyang/blog/item/a38fb5d1989de2349a50274d.html