超级好用的jQuery圆角插件 Corner速成
jQuery Corner是一款jQuery的插件，最初由Dave Methvin开发，但后在Malsup同志的协助下，进行了一些重要的改进。现在项目放在github上，当然为了方便，本文会以附件的形式提供该插件，但要想得到最新版，请到项目的github上拿。
之所以会像变魔术一样地展现圆角及其他样式，是由于该插件为目标元素增加了一些小条块，这些小条块为背景色，所以人眼看上去出现了圆角而已，其实就是小东西遮盖了本来的直角。
看来我真不是干魔术师的料，一上来就先把老底给揭了出来。不急，我再补充一下，这个魔术的一些要求：
1、插件专为block元素编写，所以div、p等均适用；而inline的元素则没有那么幸运了，当然也不是说inline根本不能用，只是面对为span增加corner要多费点神。不过，正常人不会和span的圆角较劲吧，把span改成div得了。
2、对于插件新增的border-radius功能，IE<=8全体不支持，除了IE外全体浏览器都支持。娘的，再对自己国度IE6泛滥的现状深切鄙视一下。
OK，介绍完了基本要点。教大家如何使用，这是重点，但很简单。 第一步，构建基本HTML网页和DIV格局，并CSS。
<html>
<head>
<style type="text/css">
div{
width:350px;
height:200px;
background-color: #6af;
}
</style>
</head>
<body>
<div></div>
</body>
</html>效果如下：
第二步，引入jQuery，和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>
此时，还是刚才图的效果，直角没变。
第三步，写js代码，让插件对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>
此时，圆角就出现了。
至此，小功告成。开始拓展拔高啦。
********************************拓展************************************
一、有多种Corner可选
如果你喜欢凹状，那么上图第一排，第三列就是好选择。先认识个单词notch，就是凹槽的意思。只需把一处代码改成：
<script type="text/javascript">
$(function(){
$("div").corner("notch");
});
</script>
就可以得到这个效果：
这里出现了明显的问题，当前在chrome下只有一个角。在IE下也不正常。滴答滴答，时间经过了近半个小时。我终于发现：
应该给有角的Div加一个父Div，否则我自己做的例子中父级为body，而插件自己还要再增加一个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(){
$("#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>
看图吧：
但有两句话需要大家注意（原文）：* 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. 所以，尽量老老实实地用Corner样式吧。 二、有多种位置可选 可以使用top/bottom/left/right/tl/tr/bl/br设置corner出现的具体位置。看图：
比如对于notch而言，想为mydiv的底部增加notch效果，则改写代码如下：
$("#mydiv").corner('bevel bottom');
于是，就只有底部产生notch角了。
三、可自定义角度大小 这功能很好，填写个像素值，就能改变角度。试试吧：
$("#mydiv").corner('bevel bottom 50px');
惊奇的图像如下：
神奇吧，呵呵，还有呢。
四、混搭 就刚才这个例子，把上边两个角变为圆角，而下方仍然不变。看代码：
$("#mydiv").corner('top 30px').corner('bevel bottom 50px');
没错，就是用两句corner。当然你可以完全使用四个corner把各个角都自定义。
五、边框装饰 这是亮点，感谢一个名叫Kevin Scholl的家伙提出的这个建议，不过这的确是一个非常棒的提议。看代码吧：
<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>
就会这样：
这图是chrome下的效果，IE下还不一样，夜色很晚了，没时间调试深入发现问题的原因。
写的不少了，其实还有些功能样式没说，剩下的也并不常用，用到的时候大家看英文自学吧。
相关文章
使用jquery获取url以及jquery获取url参数的实现方法
下面小编就为大家带来一篇使用jquery获取url以及jquery获取url参数的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
鼠标事件是指用户在移动鼠标光标或者点击任意鼠标键时触发的事件,jQuery中封装了基本上所有的鼠标事件包括点击,双击,移动等鼠标事件,下面我们就来看下这些事件的语法和用法2015-08-08
在项目中遇到一个问题，本来以为是使用dropdownlist的效果的，仔细一看，其实是在点击文本框以后，在其正下方弹出一个层，里边有多个选项进行选择。很像jQuery.datepicker 的效果。2009-10-10
Ztree是一个使用jQuery实现的JSP页面的各种功能树，本文介绍一个异步获取数据到下拉树的实现方式,感兴趣的朋友可以了解下，或许对你学习ztree有所帮助2013-02-02
这篇文章主要介绍了12个实用的jQuery代码片段，本文给出了在新窗口打开链接、设置等高的列、jQuery预加载图像、禁用鼠标右键、设定计时器等实用代码片段,需要的朋友可以参考下2016-03-03
ASP.Net的GridView本身不带滚动条，可通过Panel实现。但是Windows自带的横向滚动条只支持显示在下方，为了使用方便，需要在上下方都显示横向滚动条。2011-02-02
这篇文章主要介绍了jQuery使用$.ajax进行即时验证的方法,以完整实例形式较为详细的分析了jQuery前台控制ajax交互与后台asp.net响应处理的详细实现技巧,需要的朋友可以参考下2015-12-12
这篇文章的内容是表单验证插件Validation应用的实例讲解，需要的朋友可以参考下2015-10-10
本篇文章主要介绍了jQuery使用EasyUi实现三级联动效果，实例使用EasyUi实现三级联动技巧，非常具有实用价值，需要的朋友可以参考下。2017-03-03
这篇文章主要介绍了基于Jquery实现焦点图淡出淡入效果，需要的朋友可以参考下2015-11-11
最新评论