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

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

WBOY

Release： 2016-05-16 16:38:20

Original

1292 people have browsed it

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, IE<=8 does not support it, but all browsers except IE support it. Damn it, let’s deeply despise the current situation of IE6 flooding in our country.

OK, the basic points have been introduced. Teach everyone how to use it, this is the key point, but it is very simple. The first step is to build a basic HTML web page, DIV layout, and CSS.

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

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

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>

Copy after login

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.