Maison interface Web js tutoriel 自写的一个jQuery圆角插件_jquery

自写的一个jQuery圆角插件_jquery

May 16, 2016 pm 06:17 PM
jquery

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

复制代码 代码如下:

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

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

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

复制代码 代码如下:

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

效果如图:

接下来我就来讲讲实现过程了,先附上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()container=$('
');
source.before(container);
//添加1pxDIV
container.append('
');
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。
功能非常简单,但可以应用到我们常见的应用中,如下:
复制代码 代码如下:



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

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

优点:

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

边框弧度和线条的粗细不能调节(如果需要请参考jquery.corner插件)
高度和字符大小配合的不是很好,有时字符会被遮住一半
测试通过IE6、FF、Opera、Safari、Chrome
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Explication détaillée des méthodes de référence jQuery : guide de démarrage rapide Explication détaillée des méthodes de référence jQuery : guide de démarrage rapide Feb 27, 2024 pm 06:45 PM

Explication détaillée des méthodes de référence jQuery : guide de démarrage rapide

Comment utiliser la méthode de requête PUT dans jQuery ? Comment utiliser la méthode de requête PUT dans jQuery ? Feb 28, 2024 pm 03:12 PM

Comment utiliser la méthode de requête PUT dans jQuery ?

Comment supprimer l'attribut height d'un élément avec jQuery ? Comment supprimer l'attribut height d'un élément avec jQuery ? Feb 28, 2024 am 08:39 AM

Comment supprimer l'attribut height d'un élément avec jQuery ?

Conseils jQuery : modifiez rapidement le texte de toutes les balises a de la page Conseils jQuery : modifiez rapidement le texte de toutes les balises a de la page Feb 28, 2024 pm 09:06 PM

Conseils jQuery : modifiez rapidement le texte de toutes les balises a de la page

Utilisez jQuery pour modifier le contenu textuel de toutes les balises Utilisez jQuery pour modifier le contenu textuel de toutes les balises Feb 28, 2024 pm 05:42 PM

Utilisez jQuery pour modifier le contenu textuel de toutes les balises

Analyse approfondie : les avantages et les inconvénients de jQuery Analyse approfondie : les avantages et les inconvénients de jQuery Feb 27, 2024 pm 05:18 PM

Analyse approfondie : les avantages et les inconvénients de jQuery

Comprendre le rôle et les scénarios d'application de eq dans jQuery Comprendre le rôle et les scénarios d'application de eq dans jQuery Feb 28, 2024 pm 01:15 PM

Comprendre le rôle et les scénarios d'application de eq dans jQuery

Comment savoir si un élément jQuery possède un attribut spécifique ? Comment savoir si un élément jQuery possède un attribut spécifique ? Feb 29, 2024 am 09:03 AM

Comment savoir si un élément jQuery possède un attribut spécifique ?

See all articles