Plug-in jQuery aux coins arrondis super facile à utiliser Corner Quick

Maison

interface Web

js tutoriel

Plug-in jQuery aux coins arrondis super facile à utiliser Corner Quick_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:38 PM

jquery

jQuery Corner est un plug-in jQuery, développé à l'origine par Dave Methvin, mais avec l'aide du camarade Malsup, des améliorations importantes ont été apportées. Le projet est maintenant sur github. Bien sûr, pour plus de commodité, cet article fournira le plug-in en pièce jointe, mais si vous souhaitez obtenir la dernière version, veuillez vous rendre sur le github du projet.
La raison pour laquelle les coins arrondis et d'autres styles apparaissent comme par magie est que le plug-in ajoute de petites bandes à l'élément cible. Ces petites bandes sont la couleur d'arrière-plan, de sorte que l'œil humain ne voit que les coins arrondis, mais ils sont en réalité petits. recouvre l'angle droit d'origine.

Il semble que je ne sois vraiment pas un magicien. J'ai exposé mon parcours dès mes débuts. Ne vous inquiétez pas, permettez-moi d'ajouter quelques exigences pour cette magie :

1. Le plug-in est spécialement écrit pour les éléments de bloc, donc div, p, etc. sont applicables alors que les éléments en ligne ne sont pas aussi chanceux. Bien sûr, cela ne signifie pas qu'inline ne peut pas être utilisé du tout, mais. il est plus coûteux d'ajouter des coins à Dieu. Cependant, les gens normaux ne contesteraient pas les coins arrondis de span, alors changez simplement span en div.
2. Concernant la fonction border-radius nouvellement ajoutée par le plug-in, IE<=8 ne la prend pas en charge, mais tous les navigateurs sauf IE la prennent en charge. Bon sang, méprisons profondément la situation actuelle des inondations IE6 dans notre pays.

OK, les points de base ont été introduits. Apprenez à tout le monde à l'utiliser, c'est le point clé, mais c'est très simple. La première étape consiste à créer une page Web HTML de base, une mise en page DIV et CSS.

<html>
<head>
<style type="text/css">
div{
width:350px;
height:200px;
background-color: #6af;
}
</style>
</head>
<body>
<div></div>
</body>

Copier après la connexion

L'effet est le suivant :

La deuxième étape consiste à présenter jQuery et le plug-in jQuery Corner.

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.corner.js"></script>

<style type="text/css">
div{
width:350px;
height:200px;
background-color: #6af;
}
</style>
</head>
<body>
<div>

</div>
</body>
</html>

Copier après la connexion

À ce stade, l'effet est toujours le même que sur la photo du moment, et les angles droits n'ont pas changé.
La troisième étape consiste à écrire du code js pour permettre au plug-in de fonctionner sur le bloc DIV.

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.corner.js"></script>
<script type="text/javascript">
$(function(){
$("div").corner();

});
</script>
<style type="text/css">
div{
width:350px;
height:200px;
background-color: #6af;
}
</style>
</head>
<body>
<div>

</div>
</body>
</html>

Copier après la connexion

À ce stade, les coins arrondis apparaissent.

À ce stade, le travail est terminé. Commencez à vous développer et à vous élever.

************************************Agrandir************ ******** *************************

1. Il existe une variété de coins parmi lesquels choisir

Si vous aimez les formes concaves, alors la première rangée et la troisième colonne de l'image ci-dessus sont de bons choix. Commençons par connaître le mot notch, qui signifie groove. Changez simplement un code par :

<script type="text/javascript">
$(function(){
$("div").corner("notch");

});
</script>

Copier après la connexion

Vous pouvez obtenir cet effet :

Il y a un problème évident ici, actuellement il n'y a qu'un seul coin sous Chrome. Cela ne fonctionne pas non plus correctement sous IE. Tic-tac, près d'une demi-heure s'est écoulée. J'ai enfin découvert :
Vous devez ajouter un Div parent au Div avec des coins Sinon, dans l'exemple que j'ai fait, le parent est le corps, et le plug-in lui-même doit ajouter un autre Div, ce qui gâchera le tout. J'ai donc modifié le code original :

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.corner.js"></script>
<script type="text/javascript">
$(function(){
$("#mydiv").corner('bevel');
});
</script>
<style type="text/css">
#mydiv{
width:350px;
height:200px;
background-color: #6af;
}
</style>
</head>
<body>
<div>
<div id="mydiv"></div>
</div>
</body>
</html>

Copier après la connexion

Jetez un œil à la photo :

Mais il y a deux phrases auxquelles tout le monde doit prêter attention (texte original) :* Les lignes de pliage ne sont pas prises en charge dans Internet Explorer pour les pages rendues en mode quirks.* Les lignes de pliage ne sont prises en charge que dans les coins supérieurs d'Internet Explorer, sauf si elles sont en cours d'exécution. en mode standard IE8, essayez donc d’utiliser le style Corner honnêtement. 2. Vous avez le choix entre plusieurs positions. Vous pouvez utiliser haut/bas/gauche/droite/tl/tr/bl/br pour définir la position spécifique où le coin apparaît. Regardez la photo :

Par exemple, pour notch, si vous souhaitez ajouter un effet notch en bas de mydiv, réécrivez le code comme suit :

$("#mydiv").corner('bevel bottom');

Copier après la connexion

Ainsi, seul l'angle d'encoche est généré en bas.

3. Taille d'angle personnalisable Cette fonction est très bonne, vous pouvez modifier l'angle en remplissant une valeur de pixel. Essayez-le :

$("#mydiv").corner('bevel bottom 50px');

Copier après la connexion

Les images étonnantes sont les suivantes :

C'est incroyable, haha, il y a plus.

4. Mélanger et assortir Pour l'exemple de tout à l'heure, changez les deux coins supérieurs en coins arrondis, tandis que les coins inférieurs restent inchangés. Regardez le code :

$("#mydiv").corner('top 30px').corner('bevel bottom 50px');

Copier après la connexion

Oui, utilisez simplement deux coins. Bien entendu, vous pouvez entièrement utiliser les quatre coins pour personnaliser chaque coin.

5. Décoration de bordure C'est le point culminant. Merci à un gars nommé Kevin Scholl d'avoir suggéré cela, mais c'est en effet une excellente proposition. Jetez un œil au code :

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.corner.js"></script>
<script type="text/javascript">
$(function(){
$("#mydiv p").corner('round 8px').parent().css('padding','8px').corner('round 14px');
});
</script>
<style type="text/css">
#mydiv{
width:360px;
background-color: #600;
}
#mydiv p{
width:350px;
height:200px;
background-color: #6af;
}
</style>
</head>
<body>
<div>
<div id="mydiv"><P></p></div>
</div>
</body>
</html>

Copier après la connexion

Ce sera ça :

Cette image est l'effet sous Chrome. C'est différent sous IE Il est très tard dans la nuit et nous n'avons pas le temps de déboguer et de découvrir la cause du problème.

J'ai beaucoup écrit, mais en fait il y a encore certaines fonctions et styles que je n'ai pas mentionnés, et le reste n'est pas couramment utilisé. Lorsque vous les utilisez, vous pouvez lire l'anglais et apprendre par vous-même.

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

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

AI Clothes Remover

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

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

Générez AI Hentai gratuitement.

Afficher plus

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 尊渡假赌尊渡假赌尊渡假赌

Combien de temps faut-il pour battre Split Fiction?

1 Il y a quelques mois By DDD

R.E.P.O. Enregistrer l'emplacement du fichier: où est-il et comment le protéger?

1 Il y a quelques mois By DDD

R.E.P.O. Meilleurs paramètres graphiques

2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Solution d'énigmes de coquille

1 Il y a quelques semaines By DDD

Afficher plus

Outils chauds

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

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

Afficher plus

Sujets chauds

Où se trouve l'entrée de connexion pour la messagerie Gmail ?

7392

Tutoriel Java

1630

Tutoriel CakePHP

1357

Tutoriel Laravel

1268

Tutoriel PHP

1216

Afficher plus

Related knowledge

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 de la méthode de référence jQuery : Guide de démarrage rapide jQuery est une bibliothèque JavaScript populaire largement utilisée dans le développement de sites Web. Elle simplifie la programmation JavaScript et fournit aux développeurs des fonctions et fonctionnalités riches. Cet article présentera en détail la méthode de référence de jQuery et fournira des exemples de code spécifiques pour aider les lecteurs à démarrer rapidement. Présentation de jQuery Tout d'abord, nous devons introduire la bibliothèque jQuery dans le fichier HTML. Il peut être introduit via un lien CDN ou téléchargé

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 ? Dans jQuery, la méthode d'envoi d'une requête PUT est similaire à l'envoi d'autres types de requêtes, mais vous devez faire attention à certains détails et paramètres. Les requêtes PUT sont généralement utilisées pour mettre à jour des ressources, comme la mise à jour de données dans une base de données ou la mise à jour de fichiers sur le serveur. Ce qui suit est un exemple de code spécifique utilisant la méthode de requête PUT dans jQuery. Tout d'abord, assurez-vous d'inclure le fichier de la bibliothèque jQuery, puis vous pourrez envoyer une requête PUT via : $.ajax({u

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 ? Dans le développement front-end, nous rencontrons souvent le besoin de manipuler les attributs de hauteur des éléments. Parfois, nous pouvons avoir besoin de modifier dynamiquement la hauteur d'un élément, et parfois nous devons supprimer l'attribut height d'un élément. Cet article explique comment utiliser jQuery pour supprimer l'attribut height d'un élément et fournit des exemples de code spécifiques. Avant d'utiliser jQuery pour exploiter l'attribut height, nous devons d'abord comprendre l'attribut height en CSS. L'attribut height est utilisé pour définir la hauteur d'un élément

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

Titre : jQuery Astuces : Modifier rapidement le texte de toutes les balises a de la page En développement web, nous avons souvent besoin de modifier et d'exploiter des éléments de la page. Lorsque vous utilisez jQuery, vous devez parfois modifier le contenu textuel de toutes les balises de la page en même temps, ce qui peut économiser du temps et de l'énergie. Ce qui suit explique comment utiliser jQuery pour modifier rapidement le texte de toutes les balises a de la page et donne des exemples de code spécifiques. Tout d'abord, nous devons introduire le fichier de la bibliothèque jQuery et nous assurer que le code suivant est introduit dans la page : &lt

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

jQuery est une bibliothèque JavaScript rapide, petite et riche en fonctionnalités, largement utilisée dans le développement front-end. Depuis sa sortie en 2006, jQuery est devenu l'un des outils de choix pour de nombreux développeurs, mais dans les applications pratiques, il présente également certains avantages et inconvénients. Cet article analysera en profondeur les avantages et les inconvénients de jQuery et l'illustrera avec des exemples de code spécifiques. Avantages : 1. Syntaxe concise La conception syntaxique de jQuery est concise et claire, ce qui peut grandement améliorer la lisibilité et l'efficacité d'écriture du code. Par exemple,

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

Titre : utilisez jQuery pour modifier le contenu textuel de toutes les balises. jQuery est une bibliothèque JavaScript populaire largement utilisée pour gérer les opérations DOM. En développement web, nous rencontrons souvent le besoin de modifier le contenu textuel de la balise de lien (une balise) sur la page. Cet article expliquera comment utiliser jQuery pour atteindre cet objectif et fournira des exemples de code spécifiques. Tout d’abord, nous devons introduire la bibliothèque jQuery dans la page. Ajoutez le code suivant dans le fichier HTML :

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 ? Lorsque vous utilisez jQuery pour exploiter des éléments DOM, vous rencontrez souvent des situations dans lesquelles vous devez déterminer si un élément possède un attribut spécifique. Dans ce cas, nous pouvons facilement implémenter cette fonction à l'aide des méthodes fournies par jQuery. Ce qui suit présentera deux méthodes couramment utilisées pour déterminer si un élément jQuery possède des attributs spécifiques et joindra des exemples de code spécifiques. Méthode 1 : utilisez la méthode attr() et l'opérateur typeof // pour déterminer si l'élément a un attribut spécifique

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

jQuery est une bibliothèque JavaScript populaire largement utilisée pour gérer la manipulation DOM et la gestion des événements dans les pages Web. Dans jQuery, la méthode eq() est utilisée pour sélectionner des éléments à une position d'index spécifiée. Les scénarios d'utilisation et d'application spécifiques sont les suivants. Dans jQuery, la méthode eq() sélectionne l'élément à une position d'index spécifiée. Les positions d'index commencent à compter à partir de 0, c'est-à-dire que l'index du premier élément est 0, l'index du deuxième élément est 1, et ainsi de suite. La syntaxe de la méthode eq() est la suivante : $("s

See all articles