超级好用的jQuery圆角插件 Corner速成


Posted in Javascript onAugust 31, 2014

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圆角插件 Corner速成

第二步,引入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>

此时,圆角就出现了。

超级好用的jQuery圆角插件 Corner速成
至此,小功告成。开始拓展拔高啦。

********************************拓展************************************

一、有多种Corner可选超级好用的jQuery圆角插件 Corner速成

如果你喜欢凹状,那么上图第一排,第三列就是好选择。先认识个单词notch,就是凹槽的意思。只需把一处代码改成:

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

});
</script>

 就可以得到这个效果:

超级好用的jQuery圆角插件 Corner速成
这里出现了明显的问题,当前在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>

 看图吧:

超级好用的jQuery圆角插件 Corner速成 

但有两句话需要大家注意(原文):* 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出现的具体位置。看图:超级好用的jQuery圆角插件 Corner速成

比如对于notch而言,想为mydiv的底部增加notch效果,则改写代码如下:

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

于是,就只有底部产生notch角了。

超级好用的jQuery圆角插件 Corner速成

三、可自定义角度大小 这功能很好,填写个像素值,就能改变角度。试试吧:

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

惊奇的图像如下:

超级好用的jQuery圆角插件 Corner速成
神奇吧,呵呵,还有呢。

四、混搭 就刚才这个例子,把上边两个角变为圆角,而下方仍然不变。看代码:

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

没错,就是用两句corner。当然你可以完全使用四个corner把各个角都自定义。超级好用的jQuery圆角插件 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>

就会这样:

超级好用的jQuery圆角插件 Corner速成 

这图是chrome下的效果,IE下还不一样,夜色很晚了,没时间调试深入发现问题的原因。

写的不少了,其实还有些功能样式没说,剩下的也并不常用,用到的时候大家看英文自学吧。

Javascript 相关文章推荐
菜鸟javascript基础整理1
Dec 06 Javascript
javascript对下拉列表框(select)的操作实例讲解
Nov 29 Javascript
JavaScript Math.floor方法(对数值向下取整)
Jan 09 Javascript
Jquery中find与each方法用法实例
Feb 04 Javascript
详解AngularJS实现表单验证
Dec 10 Javascript
举例讲解如何判断JavaScript中对象的类型
Apr 22 Javascript
EditPlus 正则表达式 实战(3)
Dec 15 Javascript
jQuery展示表格点击变色、全选、删除
Jan 05 Javascript
axios基本入门用法教程
Mar 25 Javascript
JS实现常见的查找、排序、去重算法示例
May 21 Javascript
微信小程序实现富文本图片宽度自适应的方法
Jan 20 Javascript
VUE动态生成word的实现
Jul 26 Javascript
Html5的placeholder属性(IE兼容)实现代码
Aug 30 #Javascript
通过js为元素添加多项样式,浏览器全兼容写法
Aug 30 #Javascript
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
Aug 30 #Javascript
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
Aug 30 #Javascript
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
Aug 30 #Javascript
仿百度联盟对联广告实现代码
Aug 30 #Javascript
jQuery针对各类元素操作基础教程
Aug 29 #Javascript
You might like
融入意大利的咖啡文化
2021/03/03 咖啡文化
Syphon 虹吸式咖啡壶冲煮–拨动法
2021/03/03 冲泡冲煮
PHP 中的一些经验积累
2006/10/09 PHP
PHP中获取文件扩展名的N种方法小结
2012/02/27 PHP
php注销代码(session注销)
2012/05/31 PHP
Windows2003下php5.4安装配置教程(IIS)
2016/06/30 PHP
PHP convert_cyr_string()函数讲解
2019/02/13 PHP
PHP从零开始打造自己的MVC框架之路由类实现方法分析
2019/06/03 PHP
yii框架使用分页的方法分析
2019/07/25 PHP
PHP下载文件函数与用法示例
2019/09/27 PHP
php判断数组是否为空的实例方法
2020/05/10 PHP
JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
2008/11/03 Javascript
JavaScript 滚轮事件使用说明
2010/03/07 Javascript
JavaScript 学习笔记一些小技巧
2010/03/28 Javascript
html中的input标签的checked属性jquery判断代码
2012/09/19 Javascript
js window.onload 加载多个函数和追加函数详解
2014/01/08 Javascript
javascript实现判断鼠标的状态
2015/07/10 Javascript
JavaScript实现对下拉列表值进行排序的方法
2015/07/15 Javascript
详解Node.js中的事件机制
2016/09/22 Javascript
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
2017/08/16 Javascript
JavaScript实现京东购物放大镜和选项卡效果的方法分析
2018/07/05 Javascript
Vue Object 的变化侦测实现代码
2020/04/15 Javascript
Ant Design的Table组件去除
2020/10/24 Javascript
python处理json数据中的中文
2014/03/06 Python
浅谈Python数据类型之间的转换
2016/06/08 Python
Python简单实现两个任意字符串乘积的方法示例
2018/04/12 Python
对python3中pathlib库的Path类的使用详解
2018/10/14 Python
python RabbitMQ 使用详细介绍(小结)
2018/11/08 Python
python找出列表中大于某个阈值的数据段示例
2019/11/24 Python
python 遗传算法求函数极值的实现代码
2020/02/11 Python
Python如何在bool函数中取值
2020/09/21 Python
大学生入党积极分子党校学习思想汇报
2014/10/25 职场文书
2014年纠风工作总结
2014/12/08 职场文书
2015年机关纠风工作总结
2015/05/15 职场文书
基于Redis zSet实现滑动窗口对短信进行防刷限流的问题
2022/02/12 Redis
postgresql之greenplum字符串去重拼接方式
2023/05/08 PostgreSQL