`
leon1509
  • 浏览: 544762 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

jQueryCSSGoogleXHTMLHTML 
阅读更多

效果：

 



 

 

 

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

 

 

 

具体内容参见附件！

 

 

比较简单，不要见笑啊！

  • 大小: 22.9 KB
0
顶
1
踩
分享到：
| jQuery使用Ajax填充select
评论
发表评论

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

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics