jQuery:CSS阴影对话框
jQuery插件: jquery.widget.shadowbox.js
/**
* 一个简单的设置DIV阴影的插件
*
* 功能:
* 1. 根据阴影宽度自动调整外层容器宽度,以及透明度
* 2. 可定义ShadowBox的宽度和高度
* 3. 可用CSS样式表定义可视化样式
*
* @author joe.he <developerworks@163.com>
* @copyright irgs.cn
*/
(function(jQuery) {
jQuery.fn.shadowbox = function(settings) {
var self = this;
// 默认设置
var defaults = {
shodowWidth: 20,
css: {
outer: 'widget-shadowbox-outer',
shadow: 'widget-shadowbox-shadow',
}
};
if (settings)
jQuery.extend(defaults, settings);
// 设置阴影层的CSS样式
var shadow = jQuery("<div>")
.addClass(defaults.css.shadow) // 关联一个CSS样式规则,可以自定义阴影样式
.width(self.width())
.height(self.height())
.css({
marginTop:defaults.shodowWidth+"px",
marginLeft:defaults.shodowWidth+"px",
zIndex:-100,
position: "absolute"
});
var outer = jQuery("<div>")
.addClass(defaults.css.outer)
.width(self.outerWidth()+defaults.shodowWidth)
.height(self.outerHeight()+defaults.shodowWidth)
.css({
position: "absolute",
zIndex:999
});
this.prepend(shadow).wrap(outer.get());
// 返回jQuery对象用户链式调用
return this;
};
})(jQuery);
HTML页面: jquery.widget.shadowbox.html
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<mce:script type="text/javascript" src="jquery.js" mce_src="jquery.js"></mce:script>
<mce:script type="text/javascript" src="jquery.widgets.shadowbo
相关文档:
Alert{
backgroundColor: #2791DB;
headerColors:#2791DB,#2791DB;
borderThicknessLeft:0;
borderThicknessRight:0;
borderThicknessTop:0;
font-size:14;
buttonStyleName: myCustomButtonStyleName;
}
.myCus ......
首先要说的是元素的border,元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。CSS border 属性允许你规定元素边框的样式、宽度和颜色。
CSS 边框
在 HTML 中,我们使用表格来创建文本周围的边框,但是通过使用 CSS 边框属性,我们可以创建出效果出色的边框,并且可以应用于任何元素。
元素外边距内就是元素 ......
ninjacontent组件在我的网站上显示不正常,想修改它的CSS使其正常,可是怎么也找不到它的CSS的位置,现在终于找到了,特把它记录下来,以备有遇到跟我一样问题的人查看。
CSS位置:网站根目录\media\com_ninjacontent\css\目录下。 ......
When you meet trouble with css style in IE7, try this. You can set different css for IE7 and the other browsers.
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="/home_c_ie7.css" mce_href="home_c_ie7.css" />
<![endif]-->
......