自写的一个jQuery圆角插件

最新推荐文章于 2024-12-23 10:51:52 发布

原创最新推荐文章于 2024-12-23 10:51:52 发布 · 538 阅读

CC 4.0 BY-SA版权

本文介绍了一款自制的jQuery圆角插件，虽然功能简单，只能创建1px固定弧度的圆角矩形边框，但适用于基础需求。通过示例展示了使用方法，并提供了实现的jQuery代码和CSS文件。该插件轻量化、易用，适用于文本框等元素的样式变换，已通过多种浏览器测试。然而，存在边框弧度不可调、可能字符遮挡的问题。

下面介绍自己写的一个jQuery圆角的插件，功能非常简单。目前只能实现1px的固定弧度的圆角矩形边框。

原理是利用1px的div，具体实现看代码。

使用方法：

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

这样会根据默认的设置产生一个圆角框，效果如图：

圆角处会有点锯齿:(

如果仅此而已，那肯定是不够的。我们会想加上自己的一个样式该怎么办？

使用方法：

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

效果如图：

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

  
   
    1 
   (
   function
   ($){

    2 
       $.fn.rounder
   =
   function
   (options){

    3 
           
   var
    setting
   =
   $.extend({backgroundColor:
   '
   #FFF
   '
   ,borderColor:
   '
   #AAA
   '
   ,color:
   '
   #000
   '
   },options
   ||
   {});

    4 
           
   this
   .each(
   function
   (){

    5 
               
   var
    source
   =
   $(
   this
   );

    6 
               
   var
    container
   =
   source.parents(
   "
   .mapping_rounder
   "
   );

    7 
               
   if
   (container.size()
   <=
   0
   ){

    8 
                   container
   =
   $(
   '
   <div class="mapping_rounder"></div>
   '
   );

    9 
                   source.before(container);

   10 
                   
   //
   添加1pxDIV
   

   11 
    
                   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>
   '
   );

   12 
                   container.find(
   '
   .rounder_content
   '
   ).append(source);

   13 
                   
   //
   保持原有的形态，如：高度、宽度等
   

   14 
    
                   container.width(source.width());

   15 
                   source.width(source.width()
   -
   12
   );

   16 
                   container.height(source.height());

   17 
                   source.height(source.height()
   -
   8
   );

   18 
                   source.css(
   '
   lineHeight
   '
   ,source.height()
   +
   '
   px
   '
   );

   19 
                   container.css(
   '
   marginTop
   '
   ,source.css(
   '
   marginTop
   '
   ));

   20 
                   source.css(
   '
   marginTop
   '
   ,
   0
   );

   21 
                   container.css(
   '
   marginBottom
   '
   ,source.css(
   '
   marginBottom
   '
   ));

   22 
                   source.css(
   '
   marginBottom
   '
   ,
   0
   );

   23 
                   container.css(
   '
   marginLeft
   '
   ,source.css(
   '
   marginLeft
   '
   ));

   24 
                   source.css(
   '
   marginLeft
   '
   ,
   0
   );

   25 
                   container.css(
   '
   marginRight
   '
   ,source.css(
   '
   marginRight
   '
   ));

   26 
                   source.css(
   '
   marginRight
   '
   ,
   0
   );

   27 
               }

   28 
               
   //
   给1pxDIV添加样式以产生圆角边框的效果
   

   29 
    
               container.find(
   '
   .rounder_px3
   '
   ).css(
   '
   backgroundColor
   '
   ,setting.borderColor);

   30 
               container.find(
   '
   .rounder_px2
   '
   ).css({borderColor:setting.borderColor,backgroundColor:setting.backgroundColor});

   31 
               container.find(
   '
   .rounder_px1
   '
   ).css({borderColor:setting.borderColor,backgroundColor:setting.backgroundColor});

   32 
               container.find(
   '
   .rounder_px0
   '
   ).css({borderColor:setting.borderColor,backgroundColor:setting.backgroundColor});

   33 
               container.find(
   '
   .rounder_content
   '
   ).css({borderColor:setting.borderColor,backgroundColor:setting.backgroundColor});

   34 
               
   //
   去除原有的样式
   

   35 
    
               source.css(
   '
   borderStyle
   '
   ,
   '
   none
   '
   );

   36 
               source.css(
   '
   backgroundColor
   '
   ,setting.backgroundColor);

   37 
               source.css(
   '
   color
   '
   ,setting.color);

   38 
           });

   39 
       }

   40 
   })(jQuery);

CSS文件代码：

  
   
   1 
   .rounder_content
   {
   padding
   :
   0 5px
   ;
   border-left
   :
   1px solid
   ;
   border-right
   :
   1px solid
   ;
   }
   

   2 
   .rounder_px0
   {
   margin
   :
   0
   ;
   height
   :
   2px
   ;
   border-left
   :
   2px solid
   ;
   border-right
   :
   2px solid
   ;
   overflow
   :
   hidden
   ;
   }
   

   3 
   .rounder_px1
   {
   margin
   :
   0 1px
   ;
   height
   :
   1px
   ;
   border-left
   :
   2px solid
   ;
   border-right
   :
   2px solid
   ;
   overflow
   :
   hidden
   ;
   }
   

   4 
   .rounder_px2
   {
   margin
   :
   0 2px
   ;
   height
   :
   1px
   ;
   border-left
   :
   3px solid
   ;
   border-right
   :
   3px solid
   ;
   overflow
   :
    hidden
   ;
   }
   

   5 
   .rounder_px3
   {
   margin
   :
   0 3px
   ;
   height
   :
   1px
   ;
   background
   :
   #AAA
   ;
   overflow
   :
   hidden
   ;
   }

本来这个CSS文件的样式都可以用jQuery加上去，但那样会多很多代码，且让我在此偷下懒- -|||。样式里面加上overflow:hidden;的目的是为了兼容IE6，因为在IE6里面DIV会有个默认的最小高度，好像是13px。

功能非常简单，但可以应用到我们常见的应用中，如下：

  
   
   1 　　 
   <
   link 
   href
   ="jquery.rounder.css"
    rel
   ="stylesheet"
    type
   ="text/css"
    
   />
   

   2 
       
   <
   script 
   src
   ="jquery.rounder.js"
    type
   ="text/javascript"
   ></
   script
   >
   

   3 
       
   <
   script 
   type
   ="text/javascript"
   >
   

   4 
       $(document).ready(
   function
   (){

   5 
           $(
   '
   .test
   '
   ).rounder({borderColor:'#AAA',color:'#000'}
   );

   6 
           $(
   '
   .test
   '
   ).focus(
   function
   (event){$(event.target).rounder({borderColor:
   '
   red
   '
   ,backgroundColor:
   '
   #EEE
   '
   ,color:
   '
   blue
   '
   });});

   7 
           $(
   '
   .test
   '
   ).blur(
   function
   (event){$(event.target).rounder({borderColor:
   '
   #AAA
   '
   ,color:
   '
   #000
   '
   });});

   8 
       });

   9 
       
   </
   script
   >