我的第一个jQuery插件 -- 圆角DIV

leon1509

浏览: 536716 次
性别:
来自: 北京

最近访客更多访客>>

yuanliangding

shine_fu

njdccy

tofhao

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jQuery

jQuery CSS Google XHTML HTML

效果：

参考了：http://www.iteye.com/topic/610962

round.css:

body { font-family: 宋体; }
.b1 {
	height: 1px;
	font-size: 1px;
	overflow: hidden;
	display: block;
	background: #B2D0EA;
	margin: 0 3px;
	clear:both;
}
.b2 {
	height: 1px;
	font-size: 1px;
	overflow: hidden;
	display: block;
	background: #EDF7FF;
	border-right: 2px solid #B2D0EA;
	border-left: 2px solid #B2D0EA;
	margin: 0 1px;
	clear:both;
}
.b3 {
	height: 1px;
	font-size: 1px;
	overflow: hidden;
	display: block;
	background: #EDF7FF;
	border-right: 1px solid #B2D0EA;
	border-left: 1px solid #B2D0EA;
	margin: 0 1px;
	clear:both;
}
.bc {
	font-size: 12px;
	overflow: hidden;
	display: block;
	background: #EDF7FF;
	border-right: 1px solid #B2D0EA;
	border-left: 1px solid #B2D0EA;
	margin: 0 0px;
	clear:both;
}
.bt {
	background: #EDF7FF;
	margin:0 2px;
	padding:3px;
}
.bb {
	background: #FFFFFF;
	margin:0 2px;
	padding:5px;
}

/**另一种颜色*/
.bb1{background: #B8E7B3;}/*边框线最外层背景颜色*/
.bb2{background: #E7F9E3;border: #B8E7B3;}/*边框线的背景和边框线颜色*/
.bb3{background: #E7F9E3;}/*标题背景颜色*/

round.js:

(function($) {
    $.fn.round = function(opts) {
		//默认参数设置
        var defaultSettings = {
			title: "标题"
        };

		var settings = $.extend({}, defaultSettings, opts);
		var _title = settings.title ? settings.title : defaultSettings.title;
		var _content = settings.content ? settings.content : "";

		this.append("<b class='b1'></b><b class='b2'></b><b class='b3'></b>");
		this.append("<div class='bc'><div class='bt'>" + _title + "</div><div class='bb'>" + _content + "</div></div>");
		this.append("<b class='b3'></b><b class='b2'></b><b class='b1'></b>");
	};
})(jQuery);

html:

<!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" />
		<title> 圆角样式 </title>
		<meta name="generator" content="editplus" />
		<meta name="author" content="" />
		<meta name="keywords" content="" />
		<meta name="description" content="" />
		<link rel="stylesheet" type="text/css" href="round.css" />
        <script src="http://www.google.com/jsapi"></script>
        <script>
            google.load("jquery", "1.3.2");
        </script>
		<script src="round.js"></script>
		<script>
			$(document).ready(function(){
				$("#t").round({content: "这里是内容"});
				$("#t1").round({title: "我是标题", content: "这里是内容"});
			});
		</script>
	</head>
	<body>
		<div id="t"></div><hr/><div id="t1"></div>
<!--		
		<div>
			<b class="b1"></b><b class="b2"></b><b class="b3"></b>
			<div class="bc">
				<div class="bt">标题</div>
				<div class="bb">圆角三边 这里是内容</div>
			</div>
			<b class="b3"></b><b class="b2"></b><b class="b1"></b>
		</div>
		<hr/>
		<div style="width:350px;">
			<b class="b1 bb1"></b><b class="b2 bb2"></b><b class="b3 bb2"></b>
			<div class="bc bb2">
				<div class="bt bb3">另一种颜色</div>
				<div class="bb"><p>另一种颜色 这里是内容</p></div>
			</div>
			<b class="b3 bb2"></b><b class="b2 bb2"></b><b class="b1 bb1"></b>
		</div>
-->
	</body>
</html>

具体内容参见附件！

比较简单，不要见笑啊！

round.rar (1.5 KB)
下载次数: 73

查看图片附件

0
顶

1
踩

分享到：

ThinkPad T61安装win7下的指纹识别软件，解 ... | jQuery使用Ajax填充select

2010-03-12 18:06
浏览 2201
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

我的第一个jQuery插件 -- 圆角DIV

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

我的第一个jQuery插件 -- 圆角DIV

评论

发表评论

相关推荐

Bootstrap下拉菜单美化插件

典型的Jquery Ajax请求示例

几个Jquery UI框架（非JQuery UI）

转：jquery在div中显示日期、时间的插件！

转：jquery日期插件！

纯手工验证表单输入值

(转)基于jQuery的GridView-Flexigrid(2)-扩展和修复

jQuery使用Ajax填充select

（转）jQuery ajax填充select的插件

jQuery提交参数返回数据并显示在div中

使用google jsapi快速载入jquery库（动态增加input并取值）

JQuery生成带文字的input框

JQuery获取FCKEditor的值

jquery获取radio的几种方法

jquery遮罩

最近访客更多访客>>