jQuery插件Round Shadow实现圆角和阴影(使用)
使用该插件的基本语法如下:
$(selector).roundShadow(options);或jQuery(selector).roundShadow(options);
options的可选项针对不同的装饰方式分如下三种情况:
共同部分:
theme{String} : 装饰方法,可选项有"default","simple","css"。其中"default"使用table标签对元素进行装饰,"simple"使用框模型对元素进行装饰,"css"使用css3对元素进行装饰。
不同部分:
theme = "default":
radius{String,Number}: 圆角半径,即所裁剪的圆角阴影图片的左上角的宽度(裁剪部分应为四分之一圆,且高宽应一样),单位为"px",不接受其他单位的大小值,也可以使用数字。默认值为"12px"。
tag{String}: 指定对所装饰节点的文本节点所添加的HTML标签,默认值为"<div></div>"。
theme = "simple":
prefix{String}: 对所装饰节点应用的圆角和阴影的css类前缀,假如类前缀为"simple-round-shadow"(插件默认使用的类),则至少需定义如下类:"simple-round-shadow-body","simple-round-shadow-top","simple-round-shadow-bottom",且类中必须要指定background-image的值。默认值为"simple-round-shadow"。
tag{String}: 指定对所装饰节点的文本节点所添加的HTML标签,默认值为"<div></div>"。
theme = "css":
shadowXOffset{String,Number}: 阴影在X轴上的偏移量,以"px"为单位。默认为"1px"。
shadowYOffset{String,Number}: 阴影在Y轴上的偏移量,以"px"为单位。默认为"1px"。shadowDepth{String,Number}: 阴影的浓度,以"px"为单位。默认为"4px"。
shadowColor{String}: 阴影颜色。默认为"#000000"。
roundRadius{String,Number}: 圆角半径,以"px"为单位。默认为"10px"。
border{String}: 元素边框样式,与css中的border设置相同。默认为"1px solid #000"。
CSS类定义说明:
1、当theme为"default",并且要使用自定义的css类时需注意,必须定义以下类:
"round-shadow-top-left","round-shadow-top-edge","round-shadow-top-right";
"round-shadow-left-edge","round-shadow-center-board","round-shadow-right-edge";
"round-shadow-bottom-left","round-shadow-bottom-edge","round-shadow-bottom-right";
与默认使用的css类只有相应的背景图片和图片的高宽需要根据具体情况进行修改,其他的都需要和默认的定义相同。默认样式如下:
.simple-round-shadow {background-color: transparent;}.simple-round-shadow-top {/* background-image is necessary*/background: transparent url("images/simple/top.png") no-repeat;}.simple-round-shadow-body {/* background-image is necessary*/background: transparent url("images/simple/body.png") repeat-y;}.simple-round-shadow-bottom {/* background-image is necessary*/background: transparent url("images/simple/bottom.png") no-repeat;}