Home > Article > Web Front-end > Super easy-to-use jQuery rounded corner plug-in Corner Quick_jquery

Super easy-to-use jQuery rounded corner plug-in Corner Quick_jquery

WBOYOriginal: 2016-05-16 16:38:201274browse

jQuery Corner is a jQuery plug-in, originally developed by Dave Methvin, but with the assistance of Comrade Malsup, some important improvements were made. The project is now on github. Of course, for convenience, this article will provide the plug-in as an attachment, but if you want to get the latest version, please go to the project's github.
The reason why rounded corners and other styles appear like magic is because the plug-in adds some small strips to the target element. These small strips are the background color, so the human eye only sees rounded corners, but they are actually small. Something covers up the original right angle.

It seems that I am really not a magician. I exposed my background as soon as I got started. Don’t worry, let me add some requirements for this magic:

1. The plug-in is specially written for block elements, so div, p, etc. are applicable; while inline elements are not so lucky. Of course, it does not mean that inline cannot be used at all, but it is more expensive to add corners to span. god. However, normal people would not argue with the rounded corners of span, so just change span to div.
2. Regarding the border-radius function newly added by the plug-in, IE5cb55f3b05cc0267b4c736bbe6d70e21

The effect is as follows:

The second step is to introduce jQuery and the jQuery Corner plug-in.

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

At this point, the effect is still the same as the picture just now, and the right angles have not changed.
The third step is to write js code to let the plug-in work on the DIV block.

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

At this point, the rounded corners appear.

At this point, the work is done. Start to expand and rise.

************************************Expand****************** ************************

1. There are a variety of Corners to choose from

If you like concave shapes, then the first row and third column in the picture above are good choices. First, let’s get to know the word notch, which means groove. Just change one code to:

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

});
</script>

You can get this effect:

There is an obvious problem here, currently there is only one corner under chrome. It doesn't work properly under IE either. Tick tock, nearly half an hour passed. I finally found out:
You should add a parent Div to the Div with corners. Otherwise, in the example I made, the parent is body, and the plug-in itself has to add another Div, which will mess up the whole thing. So I modified the original 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").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>

Take a look at the picture:

But there are two sentences that everyone needs to pay attention to (original text):* Fold lines are not supported in Internet Explorer for pages rendered in quirksmode.* Fold lines are only supported on top corners in Internet Explorer, unless running in IE8 standards-mode . So, try to use the Corner style honestly. 2. There are multiple positions to choose from. You can use top/bottom/left/right/tl/tr/bl/br to set the specific position where the corner appears. Look at the picture:

For example, for notch, if you want to add a notch effect to the bottom of mydiv, rewrite the code as follows:

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

So, only the notch angle is generated at the bottom.

3. Customizable angle size This function is very good, you can change the angle by filling in a pixel value. Try it:

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

Amazing images are as follows:

It's amazing, haha, there's more.

4. Mix and match For this example, change the upper two corners into rounded corners, while the lower corners remain unchanged. Look at the code:

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

Yes, just use two corners. Of course, you can completely use the four corners to customize each corner.

5. Border decoration This is the highlight. Thanks to a guy named Kevin Scholl for suggesting this, but it is indeed a great proposal. Take a look at the 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>

This will be it:

This picture is the effect under chrome. It is different under IE. It is very late at night and there is no time to debug and find out the cause of the problem.

I have written a lot, but in fact there are still some functions and styles that I have not mentioned, and the rest are not commonly used. When you use them, you can read English and teach yourself.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Jquery realizes the method of switching input focus by Enter that is compatible with major browsers_jqueryNext article：Jquery realizes the method of switching input focus by Enter that is compatible with major browsers_jquery

See more

Super easy-to-use jQuery rounded corner plug-in Corner Quick_jquery

Related articles