我的第一个jQuery插件 -

leon1509 · 发表于 2013-2-7 23:06:20

效果：

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

具体内容参见附件！

比较简单，不要见笑啊！

		自动登录	找回密码
密码			立即注册