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

最新推荐文章于 2021-06-26 16:36:18 发布

Leon1509

最新推荐文章于 2021-06-26 16:36:18 发布

阅读量163

点赞数

分类专栏： jQuery 文章标签： jQuery CSS Google XHTML HTML ViewUI

jQuery 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

效果：

参考了：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>

具体内容参见附件！

比较简单，不要见笑啊！