浏览 4839 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
---|---|
作者 | 正文 |
发表时间:2011-02-21
最后修改:2011-02-23
$(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类只有相应的背景图片和图片的高宽需要根据具体情况进行修改,其他的都需要和默认的定义相同。默认样式如下: .default-round-shadow { } .default-round-shadow table { } /* round shadow panel's top*/ .round-shadow-top-left { width: 12px; height: 12px; background: transparent url("images/default/top_left.png") no-repeat; } .round-shadow-top-edge { height: 12px; background: transparent url("images/default/top_edge.png") repeat-x; } .round-shadow-top-right { width: 12px; height: 12px; background: transparent url("images/default/top_right.png") no-repeat; } /* round shadow panel's body*/ .round-shadow-left-edge { width: 12px; background: transparent url("images/default/left_edge.png") repeat-y; } .round-shadow-center-board { background: transparent url("images/default/center_board.png") repeat; } .round-shadow-right-edge { width: 12px; background: transparent url("images/default/right_edge.png") repeat-y; } /* round shadow panel's bottom*/ .round-shadow-bottom-left { width: 12px; height: 12px; background: transparent url("images/default/bottom_left.png") no-repeat; } .round-shadow-bottom-edge { height: 12px; background: transparent url("images/default/bottom_edge.png") repeat-x; } .round-shadow-bottom-right { width: 12px; height: 12px; background: transparent url("images/default/bottom_right.png") no-repeat; } 2、当theme为"simple",并且使用自定义的css类时同样需注意如下要求: 假如使用的prefix为simple,则需定义simple-body,simple-top和simple-bottom三个类,并且在这三个类中均要指定背景图片的url且背景色最好设置为transparent。默认样式如下: .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; } 项目已放到Google Code上,可以下载:http://code.google.com/p/jquery-round-shadow/ jQuery插件Round Shadow实现圆角和阴影(原理一) jQuery插件Round Shadow实现圆角和阴影(原理二) 声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |
发表时间:2011-02-22
请问楼主这个插件的浏览器兼容性如何?比如支持ie6吗
|
|
返回顶楼 | |
发表时间:2011-02-23
kaneg 写道 请问楼主这个插件的浏览器兼容性如何?比如支持ie6吗
至于该插件的兼容性问题,我在前两篇帖子中已有说明,不过现在我并未在IE6中做过测试,估计使用'simple'和'default'在IE6上的表现应该还是可以的。如果可以的话,你可以帮我测试一下,如有什么问题,也希望你能提出来,谢谢! 下面是原理讲解的帖子: jQuery插件Round Shadow实现圆角和阴影(原理一) jQuery插件Round Shadow实现圆角和阴影(原理二) |
|
返回顶楼 | |
发表时间:2011-03-15
东西不错,可惜不支持ie6.
|
|
返回顶楼 | |