jQuery 圆角插件jquery.corner.js demo页面

1. 此插件最初由Dave Methvin书写。
2. 此插件demo页面由张鑫旭翻译并编辑,要查看原demo页面请点这里
3. 此插件后经过几次的改进,目前此项目放在github上。
4. 当前最新版本的插件js下载:jquery.corner.js
绝对定位
此插件的圆角是通过添加HTML元素实现的(通过1像素高度的div水平线拼合成),理解这个很重要。尤其是,添加了"strips(特性)"的div,被设置为圆角和实色背景的元素这类特性的元素的效果是通过覆盖真实的圆角实现的(实际点讲,就是内部在添加div块,为圆角含背景色,然后通过margin负值定位或relative定位覆盖外标签的圆角背景色)。此插件比较适合于block水平的元素,如果要将inline属性的元素(span,a等)也圆角化可能有麻烦。
最近我添加了CSS3中含有的圆角属性border-radius主要针对对其支持的浏览器(Firefox, Safari, and Chrome)。所以在这些浏览器下,最规范的圆角是通过border-radius实现的。对于IE浏览器,我们要等到IE9出来。
Auto-Ready!

一、可用的模式

默认的圆角样式表现round

Round

$(this).corner();

Bevel

$(this).corner("bevel");

Notch

$(this).corner("notch");

Bite

$(this).corner("bite");

Cool

$(this).corner("cool");

Sharp

$(this).corner("sharp");

Slide

$(this).corner("slide");

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");

二、选择你的那个角

使用top, bottom, left, right, tl, tr, bl, br 指定上下左右到底哪个角有样式

Top Bevel

$(this).corner("bevel top");

Top-Left Bite

$(this).corner("bite tl");

Round Bottom

$(this).corner("bottom");

Left Notch

$(this).corner("notch left");

Top-Right Dog Ear

$(this).corner("dog tr");

Top-Left, Bottom-Right Cool

$(this).corner("cool tl br");

三、特定的大小

可以使用px为单位的值来指定圆角的大小

Round 30px

$(this).corner("30px");

Round 5px

$(this).corner("5px");

Cool 20px

$(this).corner("cool 20px");

Sharp 20px

$(this).corner("sharp 20px");

Bite 30px

$(this).corner("bite 30px");

Wicked 20px

$(this).corner("wicked 20px");

Dog 20px

$(this).corner("dog 20px");

Dog2 30px

$(this).corner("dog2 30px");

Dog3 30px

$(this).corner("dog3 30px");

四、混合及匹配

使用corner链实现效果的合并

Round and Bevel

$(this).corner( "bottom").corner("top bevel");

Round and Notch

$(this).corner( "br top").corner("notch bl 20px");

Crazy

$(this).corner("jut tl 20px").corner("dog tr 20px").corner("bite bl 15px").corner("notch br");

五、装饰

使用嵌套的圆角元素实现效果(多亏了Kevin Scholl)

Round

$(this).corner("round 8px").parent().css('padding', '4px').corner("round 10px")

Round

$(this).corner("round 8px").parent().css('padding', '8px').corner("round 14px")

Round

$(this).corner("round 14px").parent().css('padding', '15px').corner("round 14px")

Bevel

$(this).corner("bevel 8px").parent().css('padding', '5px').corner("bevel 10px")

Bevel

$(this).corner("bevel 8px").parent().css('padding', '10px').corner("bevel 14px")

Bite

$(this).corner("bite 10px").parent().css('padding', '8px').corner("bite 10px")

Bite

$(this).corner("bite 20px").parent().css('padding', '15px').corner("bite 20px")

Fray

$(this).corner("fray 10px").parent().css('padding', '10px').corner("fray 10px")

Tear

$(this).corner("tear 20px").parent().css('padding', '15px').corner("tear 20px")

Notch

$(this).corner("notch 4px").parent().css('padding', '4px').corner("notch 4px")

Notch

$(this).corner("notch 10px").parent().css('padding', '12px').corner("notch 10px")

Sharp

$(this).corner("sharp 10px").parent().css('padding', '8px').corner("sharp 10px")

Cool

$(this).corner("cool 20px").parent().css('padding', '10px').corner("cool 10px")

Bite/Round

$(this).corner("round 20px").parent().css('padding', '8px').corner("bite 10px")

Round/Bite

$(this).corner("bite 15px").parent().css('padding', '8px').corner("round 10px")

Fray/Tear

$(this).corner("tear 20px").parent().css('padding', '8px').corner("fray 10px")

Jut/Sculpt

$(this).corner("sculpt 20px").parent().css('padding', '8px').corner("jut 10px")

Bevel/Notch

$(this).corner("notch 20px").parent().css('padding', '8px').corner("bevel 15px")

Notch/Bite

$(this).corner("bite 15px").parent().css('padding', '10px').corner("notch 10px")

Bite/Notch

$(this).corner("notch 15px").parent().css('padding', '15px').corner("bite 20px")

Curl/Long

$(this).corner("long 15px").parent().css('padding', '15px').corner("curl 15px")

六、选取您自己的颜色(或是保留您的边框)

默认情况下,角背景是透明的,内容背景使用的是父元素留下的背景色。如果这些不是您想要的,您可以执行您希望的颜色。
        corner color: cc:#xxx
        strip color:  sc:#xxx
        keep borders: keep
        

normal corners

$(this).corner();

colored corners

$(this).corner("cc:#34538b");

colored strips

$(this).corner("sc:#34538b");

"keep" border

$(this).corner("keep");

cc:#34538b notch

$(this).corner("cc:#34538b notch");

cc:#34538b keep notch

$(this).corner("keep notch cc:#34538b");

cc:#34538b keep bite

$(this).corner("bite keep 15px cc:#34538b");

cc:#34538b cool keep

$(this).corner("cc:#34538b cool keep 20px");

七、有趣的填充

有趣的边缘填充效果

左半边

$(this).corner("sharp tr br 20px");

右半边

$(this).corner("sharp tl bl 20px");

八、固定的还是流动的?都没问题!

下面的div标签们的高度或宽度要么固定,要么流动的(自适应),自由搭配。

高度: 自适应
宽度: 自适应

网站新首页已于2010-01-06 零点十分上线了。全是自己设计开发的,欢迎测试,欢迎提建议。

高度: 固定
宽度: 自适应

网站新首页已于2010-01-06 零点十分上线了。全是自己设计开发的,欢迎测试,欢迎提建议。注册后还有用户应用系统,开发的几个简单的功能,欢迎注册,欢迎使用。

高度: 自适应
宽度: 固定

网站新首页已于2010-01-06 零点十分上线了。全是自己设计开发的,欢迎测试,欢迎提建议。注册后还有用户应用系统,开发的几个简单的功能,欢迎注册,欢迎使用。 注册地址:/php/regist.php

高度: 固定
宽度: 固定

网站新首页已于2010-01-06 零点十分上线了。全是自己设计开发的,欢迎测试,欢迎提建议。注册后还有用户应用系统,开发的几个简单的功能,欢迎注册,欢迎使用。

九、普通的样式

下面的div用以测试只有样式显示的内容自适应的元素的表现。

圆角
这是一个有 30px padding样式的普通div

圆角
这是一个有 0px padding样式的普通div

圆角
这个普通的div 有一个 30px padding 和 30px margin的样式

去除圆角

下面显示的是动态的改变元素为圆角或不是圆角

// 使用的脚本
...
$('#dynamic').corner();
...
$('#dynamic').uncorner();

无圆角演示
此div的id是#dynamic

十、使用元数据标记代替参数选项

下面示例演示了如果将corner参数用自定义的元数据标记代替。corner

// 标记
<div class="myCorner" data-corner="left 20px">元数据实例</div>

// 脚本 - corner函数没有任何参数
$('.myCorner').corner();

元数据实例
Copyright © by 张鑫旭-鑫空间-鑫生活 | 该篇相关文章