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

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

阅读更多

效果:

 



 

 

 

参考了: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 corners 圆角插件

    jQuery Corners插件的出现,极大地简化了这一过程,使得在JavaScript的辅助下,我们可以轻松地为元素添加圆角效果。本文将详细介绍jQuery Corners插件的使用方法、功能特性以及实际应用。 一、jQuery Corners插件...

    css+div圆角窗口

    如果设置两个值,第一个代表上下半径,第二个代表左右半径。 2. **兼容性**: CSS3的`border-radius`在现代浏览器中得到了广泛支持,包括Chrome、Firefox、Safari、Opera和Internet Explorer9及以上版本。对于IE8...

    圆角框jquery

    除了上述方法,还可以通过改变背景图片或者创建多个内嵌 div 来实现圆角效果,但这些方法在维护性和效率上可能不如使用 `border-radius` 或 jQuery 插件。随着技术的发展,如今大部分浏览器都已经支持 `border-...

    圆角矩形对话框

    圆角矩形对话框的设计理念在于创造一个视觉上更为柔和且不那么生硬的界面元素,这有助于提升用户的浏览体验,并使界面看起来更加现代和精致。 首先,我们要理解“对话框”的概念。对话框是在用户与应用程序之间进行...

    jquery自定义滚动条插件

    // 初始化第一个滚动条 $('.scrollbar1').customScrollbar(); // 初始化第二个滚动条 $('.scrollbar2').customScrollbar({ thumbHoverColor: '#ff0000' // 设置滑块悬停时的颜色 }); ``` ### 四、插件使用方法 1...

    jQuery-单击文字或图片内容放大显示且含圆角投影效果

    6. **动画插件**:jQuery有许多插件可以增强动画效果,例如`jQuery.animate()`或第三方插件如`jQuery.EasIng`。这些插件可以提供更复杂的动画控制,如自定义缓动函数、延迟、持续时间等。 7. **页面结构与布局**:...

    自写的一个jQuery圆角插件

    本文的圆角插件则是通过在元素周围添加多个1px的div,并给这些div设置相应的样式来模拟实现圆角效果的。 知识点七:jQuery.extend()的使用 jQuery.extend()是jQuery库中的一个函数,用于将两个或多个对象的内容...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    一款jQuery插件slide幻灯片切换图片宽高自适应 74.一款jQuery漂亮淡出淡入焦点大图切换源码 75.一款jquery缩略图商品切换放大展示功能插件 76.一款使用jQuery左右控制横向图片滚动的代码 77.一款基于jquery...

    简单的jQuery响应式弹出菜单插件

    `jQueryPopMenu`是一个针对jQuery设计的轻量级响应式弹出菜单插件。它提供了灵活的自定义选项,帮助开发者轻松创建具有基础响应特性的菜单,使得在不同设备上展示时都能保持良好的用户体验。这款插件特别适合那些...

    国外一些源码,关于HTML,中的DIV圆角封装.

    此外,实现DIV圆角还有其他方法,如使用图片背景、CSS3的剪切(clip)属性,或者是早期的JavaScript库和jQuery插件。然而,随着CSS3的普及,这些方法已经逐渐被淘汰,因为它们在代码复杂性和性能上都不如纯CSS解决...

    漂亮的jquery选项卡

    // 初始状态下隐藏所有内容区,只显示第一个 $('.tab-content').hide().eq(0).show(); // 绑定点击事件 $('.tab-title').click(function(e) { e.preventDefault(); var index = $(this).index(); $('.tab-...

    jQuery左右分页滑动.zip

    例如,我们可以设置所有的分页项初始时都向左偏移,只显示第一个分页,然后为火狐添加圆角样式,为其他浏览器添加正方形小点样式。 ```css .page { position: absolute; width: 100%; height: 100%; ...

    转盘抽奖插件

    例如,可以创建一个div元素作为转盘容器,其中嵌套多个表示奖品的div,每个div对应转盘上的一块区域。 CSS(层叠样式表)则用于美化和布局HTML元素。在转盘抽奖插件中,CSS3的关键技术被广泛运用,如圆角边框、渐变...

    css3 进度条

    在现代网页设计中,CSS3(层叠样式表第三版)已经成为了不可或缺的一部分,它带来了许多新特性,极大地丰富了网页的表现力。其中,CSS3进度条就是一种常见且实用的元素,它能够以视觉化的方式展示数据加载、任务完成...

    jQuery1.8+CSS3+DOM+HTML4.CHM格式帮助文档

    jQuery 1.8 是一个重要的版本更新,它是 jQuery 库的里程碑之一。这个版本引入了许多性能优化和API改进,增强了其在现代Web开发中的功能和效率。jQuery 1.8 强调了API的稳定性和向后兼容性,确保开发者在升级时能...

    ie8-select滚动条

    通常,你可以在EasyUI的`div`容器中嵌套一个使用第三方库的`&lt;select&gt;`元素,然后通过EasyUI的事件和方法来同步和控制选择项的状态。 总之,解决"ie8-select滚动条"问题需要结合对CSS、JavaScript(尤其是jQuery和...

    CSS3 完美实现圆角效果

    如果设置了两个值,第一个值将应用到顶部左右角落,第二个值则应用到底部左右角落。例如: ```css div { border-radius: 10px; } ``` 这将为div的所有四个角落设置10像素的圆角。 2. **特定角落的圆角**: ...

    网页右侧悬浮深蓝色qq在线客服代码.zip

    3. **jQuery插件**:虽然描述中没有明确提到特定的jQuery插件,但为了实现某些特效,如平滑滚动、渐显渐隐或者定位,开发者可能会使用一些流行的jQuery插件,如` waypoints.js `(用于在元素进入视口时触发事件)或`...

    jQuery实现的向下图文信息滚动效果

    然后将最后的li元素定时插入到第一个li元素的上方,从而实现内容的连续向下滚动。 知识点4:jQuery插件jquery.corner.js的使用 jquery.corner.js是一个专门用于处理元素圆角的jQuery插件。在本实例中,虽然主要使用...

Global site tag (gtag.js) - Google Analytics