Maison > Article > interface Web > Plug-in jQuery aux coins arrondis super facile à utiliser Corner Quick_jquery

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

WBOYoriginal: 2016-05-16 16:38:201274parcourir

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, IEb7ca050d406ff1d242685f83d1912d0d

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>

À 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>

À 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>

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>

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

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

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

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>

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：

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

Article précédent：Jquery réalise la méthode de changement de focus d'entrée par Entrée qui est compatible avec les principaux navigateurs_jqueryArticle suivant：Jquery réalise la méthode de changement de focus d'entrée par Entrée qui est compatible avec les principaux navigateurs_jquery

Articles Liés

Voir plus