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
相关文档:
CSS 和 JavaScript 标签 style 属性对照表:
盒子标签和属性对照
CSS语法(不区分大小写) JavaScript语法(区分大小写)
border border
border-bottom borderBottom
border-bottom-color borderBottomColor
border-bottom-style borderBottomStyle
border-bottom-width borderBottomWidth
border-color bor ......
Data visualization is mostly achieved with flash applications or
with help of some programming languages. Are those solutions the only
way to present, let's say simple data chart? How about giving it a try
with nothing but good ol' css?
Take a look at the Demo
| Download Css Chart
Approach
......
.ie
{
border:1px solid #000000;
width:100px;
height:300px;
font-size:12px;
}
.ie div
{ text-over:
overflow:hidden;
text-overflow:ellipsis ......
W3School:http://www.w3school.com.cn/css/index.asp
英文版网址:http://www.w3schools.com/css/default.asp
作为初学者,这是一定要收藏的网站。这就相当于一本CSS入门教程,在此可以学习每个标签,属性的用法和实例,可以自动动手实践代码。除了CSS的知识,这个网站还包括了大量其他网页开发语言教程和其他知识。
CSS ......
最近的面试中总是问我一些浏览器兼容性问题,所以下面做一个总结:
为什么会出现这种现象呢?主要就是像Firefox这样浏览器良好支持W3C标准,是目前对CSS支持最好的浏览器,而ie是出现的比较早,在w3c支持方面做的一直不是很好。有很多东西出现FF和IE显示不一样的根本原因在于它们的默认显示不一样,而这个默认样式该如何显 ......