一个自己编写的jQuery圆角插件

原理是使用1px div，具体实现取决于代码。用法：复制代码如下： $('。测试’)。router()；这将根据默认设置生成一个圆角框，效果如图：。

圆角处会有一些锯齿：(如果就这些，肯定不够。如果我们想增加一种自己的风格，我们应该怎么做？用法：复制代码如下： $('。测试’)。圆形({bordercolor: '红色'，backgroundcolor3360' # eee '，color: '蓝色' })；效果如图：

接下来我就来讲讲实现过程了，先附上框架代码如下：复制代码代码如下：(函数($){ $ .fn。routter=函数（选项){ var设置=$ .扩展({backgroundColor:'#FFF '，borderColor:'#AAA '，color:'#000'}，选项| | { });这个。每个(function(){ var source=$(this)；定义变量容器=source.parents(' .mapping _ router’)；if(容器。size()=0){ container=$(' div class=' mapping _ router '/div ')；source.before(容器);//添加1pxDIV容器。追加(' div class=' router _ px3 '/div class=' router _ px2 '/div class=' router _ px1 '/div class=' router _ px0 '/div class=' router _ content '/div class=' router _ px0 '/div class=' router _ px1 '/div class=' router _ px2 '/div class=' router _ px3 '/div))；container.find(' .router _ content’).追加（来源);//保持原有的形态，如：高度、宽度等集装箱。宽度(来源。width())；来源。宽度(来源。宽度()-12)；集装箱。高度(来源。高度())；来源。高度(来源。高度()-8)；source.css('lineHeight '，source。height()“px”)；container.css('marginTop '，源。CSS('上边距')；source.css('marginTop '，0)；container.css('marginBottom '，来源。CSS(' MarginBottom ')；source.css('marginBottom '，0)；container.css('marginLeft '，源。CSS('左边距')；source.css('marginLeft '，0)；container.css('marginRight '，来源。CSS('右边距')；source.css('marginRight '，0)；} //给1pxDIV添加样式以产生圆角边框的效果container.find(' .router _ px3’).css('backgroundColor '，设置。bordercolor)；container.find(' .router _ px2’).CSS({ border color : }设置。bordercolor，背景颜色：设置。背景色})；container.find(' .router _ px1’).CSS({ border color : }设置。bordercolor，背景颜色：设置。背景色})；container.find(' .router _ px0’).CSS({ border color : }设置。bordercolor，背景颜色：设置。背景色})；container.find(' .router _ content’).CSS({ border color : }设置。bordercolor，背景颜色：设置。背景色})；//去除原有的样式source.css('borderStyle '，' none ')；source.css('backgroundColor '，设置。背景色)；source.css('color '，设置。颜色)；});} })(jQuery)；半铸钢钢性铸铁(铸造半钢)文件代码：复制代码代码如下：routter _ content { padd :0 5pxborder-left :1 px实心；右边框：1px实心；} .router _ px0 { margin :0 height :2 pxborder-left :2 px实心；右边框：2px实心；飞越：隐藏；} .routter _ px1 { margin 3 33600 1px h8 :1 pxborder-left :2 px实心；右边框：2px实心；飞越：隐藏；} .routter _ px2 { margin :0 2px h8 :1 pxborder-left :3 px实心；右边框：3px实心；飞越：隐藏；} .routter _ px3 { margin :0 3px h8 :1 px背景# AAA飞越：隐藏；} 本来这个半铸钢钢性铸铁(铸造半钢)文件的样式都可以用框架加上去，但那样会多很多代码，且让我在此偷下懒- -|||。样式里面加上飞越：隐藏；的目的是为了兼容IE6，因为在IE6里面差异会有个默认的最小高度，好像是13px。功能非常简单，但可以应用到我们常见的应用中，如下：复制代码代码如下：脚本类型='text/javascript' $(文档)。ready(function(){ $(')).测试')。圆场({borderColor:'#AAA '，color : ' # 000 ' })；$('.测试')。focus(函数(事件)){ $(事件。目标).圆形({borderColor: '红色，backgroundColor:'#EEE '，Color: '蓝色' });});$('.测试')。模糊（函数（事件){$(event.target)).圆场({borderColor:'#AAA '，color : ' # 000 ' })；});});/script即文本框加上圆角，获取焦点时呈现一种样式，失去焦点时再呈现另一种样式。当然，我们可以通过和框架本身强大的功能结合来满足不同的需求。优点：体积小，两个文件经过压缩后只有2.23kb简单易用不足：边框弧度和线条的粗细不能调节（如果需要请参考jquery.corner插件)高度和字符大小配合的不是很好，有时字符会被遮住一半测试通过IE6、FF、Opera、Safari、Chrome