自写的一个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 相关文章推荐
根据分辨率不同,调用不同的css文件
Aug 25 Javascript
javascript判断非数字的简单例子
Jul 18 Javascript
纯javascript制作日历控件
Jul 17 Javascript
jQuery实现文件上传进度条特效
Aug 12 Javascript
基于JavaScript实现弹出框效果
Feb 19 Javascript
javascript解决小数的加减乘除精度丢失的方案
May 31 Javascript
BootStrap下拉菜单和滚动监听插件实现代码
Sep 26 Javascript
微信 java 实现js-sdk 图片上传下载完整流程
Oct 21 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
Mar 21 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
Jul 07 Javascript
Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
Mar 23 Javascript
vue特效之翻牌动画
Apr 20 Vue.js
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
德生PL330的评价与改造
2021/03/02 无线电
利用递归把多维数组转为一维数组的函数
2006/10/09 PHP
Codeigniter出现错误提示Error with CACHE directory的解决方案
2014/06/12 PHP
ThinkPHP的SAE开发相关注意事项详解
2016/10/09 PHP
js通过googleAIP翻译PHP系统的语言配置的实现代码
2011/10/17 Javascript
简单的两种Extjs formpanel加载数据的方式
2013/11/09 Javascript
一个网页标题title的闪动提示效果实现思路
2014/03/22 Javascript
JavaScript中的方法重载实例
2015/03/16 Javascript
javascript检测两个数组是否相似
2015/05/19 Javascript
JavaScript中的Math.LN2属性用法详解
2015/06/12 Javascript
跟我学习javascript的for循环和for...in循环
2015/11/18 Javascript
AngularJS实践之使用ng-repeat中$index的注意点
2016/12/22 Javascript
Vue分页组件实例代码
2017/04/17 Javascript
详解vue-router基本使用
2017/04/18 Javascript
JS ES6中setTimeout函数的执行上下文示例
2017/04/27 Javascript
angularJs的ng-class切换class
2017/06/23 Javascript
React Native第三方平台分享的实例(Android,IOS双平台)
2017/08/04 Javascript
js 毫秒转天时分秒的实例
2017/11/17 Javascript
vue中引入第三方字体文件的方法示例
2018/12/17 Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
2019/09/09 Javascript
Python实现Linux中的du命令
2017/06/12 Python
python如何压缩新文件到已有ZIP文件
2018/03/14 Python
对python中执行DOS命令的3种方法总结
2018/05/12 Python
python对象与json相互转换的方法
2019/05/07 Python
django删除表重建的实现方法
2019/08/28 Python
python 进程间数据共享multiProcess.Manger实现解析
2019/09/23 Python
TensorFlow固化模型的实现操作
2020/05/26 Python
Python如何输出百分比
2020/07/31 Python
Python 远程开关机的方法
2020/11/18 Python
迪卡侬荷兰官网:Decathlon荷兰
2017/10/29 全球购物
J2EE模式面试题
2016/10/11 面试题
社团招新策划书
2014/02/04 职场文书
2014年大学生工作总结
2014/11/20 职场文书
2015年安全生产工作总结范文
2015/04/02 职场文书
《山中访友》教学反思
2016/02/24 职场文书
python文件与路径操作神器 pathlib
2022/04/01 Python