自写的一个jQuery圆角插件


Posted in Javascript onOctober 26, 2010

原理是利用1px的div,具体实现看代码。
使用方法:

$('.test').rounder();

这样会根据默认的设置产生一个圆角框,效果如图:自写的一个jQuery圆角插件

圆角处会有点锯齿:(
如果仅此而已,那肯定是不够的。我们会想加上自己的一个样式该怎么办?使用方法:

$('.test').rounder({borderColor:'red',backgroundColor:'#EEE',color:'blue'});

效果如图:自写的一个jQuery圆角插件

接下来我就来讲讲实现过程了,先附上jQuery代码如下:

(function($){ 
$.fn.rounder=function(options){ 
var setting=$.extend({backgroundColor:'#FFF',borderColor:'#AAA',color:'#000'},options||{}); 
this.each(function(){ 
var source=$(this); 
var container=source.parents(".mapping_rounder"); 
if(container.size()<=0){ 
container=$('<div class="mapping_rounder"></div>'); 
source.before(container); 
//添加1pxDIV 
container.append('<div class="rounder_px3"></div><div class="rounder_px2"></div><div class="rounder_px1"></div><div class="rounder_px0"></div><div class="rounder_content"></div><div class="rounder_px0"></div><div class="rounder_px1"></div><div class="rounder_px2"></div><div class="rounder_px3"></div>'); 
container.find('.rounder_content').append(source); 
//保持原有的形态,如:高度、宽度等 
container.width(source.width()); 
source.width(source.width()-12); 
container.height(source.height()); 
source.height(source.height()-8); 
source.css('lineHeight',source.height()+'px'); 
container.css('marginTop',source.css('marginTop')); 
source.css('marginTop',0); 
container.css('marginBottom',source.css('marginBottom')); 
source.css('marginBottom',0); 
container.css('marginLeft',source.css('marginLeft')); 
source.css('marginLeft',0); 
container.css('marginRight',source.css('marginRight')); 
source.css('marginRight',0); 
} 
//给1pxDIV添加样式以产生圆角边框的效果 
container.find('.rounder_px3').css('backgroundColor',setting.borderColor); 
container.find('.rounder_px2').css({borderColor:setting.borderColor,backgroundColor:setting.backgroundColor}); 
container.find('.rounder_px1').css({borderColor:setting.borderColor,backgroundColor:setting.backgroundColor}); 
container.find('.rounder_px0').css({borderColor:setting.borderColor,backgroundColor:setting.backgroundColor}); 
container.find('.rounder_content').css({borderColor:setting.borderColor,backgroundColor:setting.backgroundColor}); 
//去除原有的样式 
source.css('borderStyle','none'); 
source.css('backgroundColor',setting.backgroundColor); 
source.css('color',setting.color); 
}); 
} 
})(jQuery);

CSS文件代码:
.rounder_content{padding:0 5px;border-left:1px solid;border-right:1px solid;} 
.rounder_px0{margin:0;height:2px;border-left:2px solid;border-right:2px solid;overflow:hidden;} 
.rounder_px1{margin:0 1px;height:1px;border-left:2px solid;border-right:2px solid;overflow:hidden;} 
.rounder_px2{margin:0 2px;height:1px;border-left:3px solid;border-right:3px solid;overflow: hidden;} 
.rounder_px3{margin:0 3px;height:1px;background:#AAA;overflow:hidden;}

本来这个CSS文件的样式都可以用jQuery加上去,但那样会多很多代码,且让我在此偷下懒- -|||。样式里面加上overflow:hidden;的目的是为了兼容IE6,因为在IE6里面DIV会有个默认的最小高度,好像是13px。
功能非常简单,但可以应用到我们常见的应用中,如下:
<script type="text/javascript"> 
$(document).ready(function(){ 
$('.test').rounder({borderColor:'#AAA',color:'#000'}); 
$('.test').focus(function(event){$(event.target).rounder({borderColor:'red',backgroundColor:'#EEE',color:'blue'});}); 
$('.test').blur(function(event){$(event.target).rounder({borderColor:'#AAA',color:'#000'});}); 
}); 
</script>

即文本框加上圆角,获取焦点时呈现一种样式,失去焦点时再呈现另一种样式。

当然,我们可以通过和jQuery本身强大的功能结合来满足不同的需求。

优点:

体积小,两个文件经过压缩后只有2.23kb
简单易用
不足:

边框弧度和线条的粗细不能调节(如果需要请参考jquery.corner插件)
高度和字符大小配合的不是很好,有时字符会被遮住一半
测试通过IE6、FF、Opera、Safari、Chrome

Javascript 相关文章推荐
jQuery选择头像并实时显示的代码
Jun 27 Javascript
js获取元素到文档区域document的(横向、纵向)坐标的两种方法
May 17 Javascript
JS实现仿QQ效果的三级竖向菜单
Sep 25 Javascript
JavaScript的React框架中的JSX语法学习入门教程
Mar 05 Javascript
JavaScript原生对象常用方法总结(推荐)
May 13 Javascript
有关文件上传 非ajax提交 得到后台数据问题
Oct 12 Javascript
过期软件破解办法实例详解
Jan 04 Javascript
Angularjs分页查询的实现
Feb 24 Javascript
Node.JS中事件轮询(Event Loop)的解析
Feb 25 Javascript
vue中遇到的坑之变化检测问题(数组相关)
Oct 13 Javascript
深入理解JavaScript的值传递和引用传递
Oct 24 Javascript
利用Bootstrap Multiselect实现下拉框多选功能
Apr 08 Javascript
jQuery获取地址栏参数插件(模仿C#)
Oct 26 #Javascript
自制轻量级仿jQuery.boxy对话框插件代码
Oct 26 #Javascript
jquery ui resizable bug解决方法
Oct 26 #Javascript
HTML Dom与Css控制方法
Oct 25 #Javascript
Dom在ajax技术中的作用说明
Oct 25 #Javascript
Dom与浏览器兼容性说明
Oct 25 #Javascript
Dom 是什么的详细说明
Oct 25 #Javascript
You might like
ECMall支持SSL连接邮件服务器的配置方法详解
2014/05/19 PHP
详解PHP执行定时任务的实现思路
2015/12/21 PHP
javascript打印大全(打印页面设置/打印预览代码)
2013/03/29 Javascript
javascript dom追加内容实现示例
2013/09/21 Javascript
Javascript执行效率全面总结
2013/11/04 Javascript
jQuery根据用户电脑是mac还是pc加载对应样式的方法
2015/06/26 Javascript
ES6的新特性概览
2016/03/10 Javascript
BootStrap轻松实现微信页面开发代码分享
2016/10/21 Javascript
JS如何设置iOS中微信浏览器的title
2016/11/22 Javascript
javascript中的面向对象
2017/03/30 Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
2018/02/03 Javascript
Vue项目添加动态浏览器头部title的方法
2018/07/11 Javascript
react写一个select组件的实现代码
2019/04/03 Javascript
详解VUE前端按钮权限控制
2019/04/26 Javascript
ES6 class类链式继承,实例化及react super(props)原理详解
2020/02/15 Javascript
适用于 Vue 的播放器组件Vue-Video-Player操作
2020/11/16 Javascript
Python本地与全局命名空间用法实例
2015/06/16 Python
Linux上安装Python的PIL和Pillow库处理图片的实例教程
2016/06/23 Python
pandas groupby 分组取每组的前几行记录方法
2018/04/20 Python
在Pycharm中项目解释器与环境变量的设置方法
2018/10/29 Python
python 接口实现 供第三方调用的例子
2019/08/13 Python
Python实现序列化及csv文件读取
2020/01/19 Python
python 基于opencv 绘制图像轮廓
2020/12/11 Python
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
2013/01/06 HTML / CSS
css 如何让背景图片拉伸填充避免重复显示
2013/07/11 HTML / CSS
浅析canvas元素的html尺寸和css尺寸对元素视觉的影响
2019/07/22 HTML / CSS
华丽的手绘陶瓷:MacKenzie-Childs
2017/02/04 全球购物
波比布朗英国官网:Bobbi Brown英国
2017/11/13 全球购物
夏尔巴人登珠峰品牌:Sherpa Adventure Gear
2018/02/08 全球购物
西班牙在线宠物食品和配件商店:bitiba
2019/10/11 全球购物
学校门卫岗位职责
2014/03/16 职场文书
青年志愿者服务活动总结
2015/05/06 职场文书
2019年怎样才能撰写出优秀的自荐信
2019/03/25 职场文书
导游词之广州陈家祠
2019/10/21 职场文书
python 自动刷新网页的两种方法
2021/04/20 Python
python井字棋游戏实现人机对战
2022/04/28 Python