超级好用的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实现网页进度显示插件
相信大家都见过类似的网站功能,这种形式的进度显示可以很方便的让用户去理解和操作, 以下是插件的测试截图 ,提供了两个皮肤 使用js编写 可以灵活的生成进度条 方便进对一些工作进度进行图形显示 1.简单的调用 //所有步骤的数据 var stepListJson=[{StepNum:1,StepText:"第一步"}, {StepNum:2,StepText:"第二步"}, {StepNum:3,StepText:"第三步"}, {StepNum:
-
jquery 插件实现多行文本框[textarea]自动高度
实现功能: 1/当textarea换行时自动增加一行高度 2/当textarea删除一行时 自动减少一行的高度 依赖:jquery.xxx.js 工作中需要使用类似功能但是觉得使用插件需要导入其他文件很不方便所以就写了一个 textarea jquery插件 复制代码 代码如下: <div class="form-group"> <label class="col-sm-3 control-label no-padding-right" f
-
基于jQuery实现仿淘宝套餐选择插件
首先是页面HTML代码 复制代码 代码如下: <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript&qu
-
jquery插件corner实现圆角边框的方法
本文实例讲述了jquery插件corner实现圆角边框的方法.分享给大家供大家参考.具体如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtm
-
jQuery插件开发的五种形态小结
关于jQuery插件的开发自己也做了少许研究,自己也写过多个插件,在自己的团队了也分享过一次关于插件的课.开始的时候整觉的很复杂的代码,现在再次看的时候就清晰了许多.这里我把我自己总结出来的东西分享出来,帮助那些和我一样曾经遇到过同样问题的人. 我要做什么 我想要得到的javascript 插件应该会有以下几个特征 代码相对独立 链式操作 插件可配置 有可操作的方法,插件的生命周期可控制 配置可被缓存 可扩展 无冲突处理 事件代理,动态初始化 * 以下的代码均假设存在 jQuery 插件的第一形
-
jquery手风琴特效插件
手风琴效果是项目中使用频率较高的一种效果,原来项目一直都在用easyui的,临近年末,试着自己写了一个 css样式 复制代码 代码如下: /* CSS Document */ body { margin: 0 auto; padding: 0 auto; font-size: 9pt; font-family: 微软雅黑, 宋体, Arial, Helvetica, Verdana, sans-serif; } .accordion { padding-l
-
自写的一个jQuery圆角插件
原理是利用1px的div,具体实现看代码. 使用方法: 复制代码 代码如下: $('.test').rounder(); 这样会根据默认的设置产生一个圆角框,效果如图: 圆角处会有点锯齿:(如果仅此而已,那肯定是不够的.我们会想加上自己的一个样式该怎么办?使用方法: 复制代码 代码如下: $('.test').rounder({borderColor:'red',backgroundColor:'#EEE',color:'blue'}); 效果如图: 接下来我就来讲讲实现过程了,先附上jQuer
-
jquery 圆角遮罩图片实现图片圆角
运行后请刷新一次. 圆角遮罩图片实现图片圆角 by ahuinan 2009-5-15 $(function(){ $(".kuang").after(" "); }) li{ list-style:none; float:left; margin-right:20px; margin-top:20px; position:relative; } img{ border:0; width:94px; height:94px; } .kuang_div{ positi
-
CSS+Jquery实现页面圆角框方法大全
所以我就想用一个既方便调用又方便更新的方法来实现,结果如愿以偿.先将此技术点总结如下: 在此之前我也寻找过目前网络上最流行的做法的实现方案,大体共总结出7种方法,但是发现他们的方法多多少少都存在缺陷,后来我自己做出了我自己觉得满意的方法. 先看目前网络上最流行的7种做法: 1,无图片纯css圆角框 收录理由:兼容性强,不用图形 图一 特点: 1.不用任何图形,使用很多个div容器模拟出圆角效果. 2.兼容性:通杀所有浏览器 缺点: 1.构造这个圆角需要加入太多的无语义的标签,结构比较冗余. 2.
-
超级好用的jQuery圆角插件 Corner速成
jQuery Corner是一款jQuery的插件,最初由Dave Methvin开发,但后在Malsup同志的协助下,进行了一些重要的改进.现在项目放在github上,当然为了方便,本文会以附件的形式提供该插件,但要想得到最新版,请到项目的github上拿. 之所以会像变魔术一样地展现圆角及其他样式,是由于该插件为目标元素增加了一些小条块,这些小条块为背景色,所以人眼看上去出现了圆角而已,其实就是小东西遮盖了本来的直角. 看来我真不是干魔术师的料,一上来就先把老底给揭了出来.不急,我再补充一下
-
jQuery的插件列表(2010-1-25更新)
jQuery Scroll Follow 随屏幕滚动的层 点击查看Demo jScrollPane 自定义滚动条插件 点击查看Demo jQuery树状菜单插件 jqueryflexselect下拉框自动提示 jQuery id标签 - 8种不同的很酷的JQuery菜单例子 jQuery ContextMenu:轻量级JQuery插件,可以自定义右键弹出的菜单 jQuery Flash Plugin-这个 jQuery插件可以让你嵌入Flas***** jQuery Medi
-
jQuery提示插件qTip2用法分析(支持ajax及多种样式)
本文实例讲述了jQuery提示插件qTip2用法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <h
-
基于BootStrap环境写jQuery tabs插件
一直想改版网站首页的图书展示部分,以前的展示是使用BootStrap的传统的collapse,网页篇幅占用大,也不够美观,操作也来说比较麻烦.于是有了自己利用Jquery来做一个图书展示的tabs的想法,之前也在网上找了半天,并不是很满意. 下面来看看我的实现过程: 首先是HTML部分,HTML部分按照结构简约,突出干货的思路来设计.选项卡使用了列表,在列表中插入了超链接,当然这里的超链接只是作为按钮使用的,当点击任何一个链接,就切换到对应的选项卡.选项卡的内容部分直接使用DIV,将图书的展示一
-
推荐10个超棒的jQuery工具提示插件
1. Pop! 使用 Pop!可以创建简单的下拉菜单!这是一个并不引人注目的 jQuery 插件. 2. BetterTip 允许你创建定制的 Tool tips 的 jQuery 插件. 3. EZPZ Tooltip 非常简单的使用边框的 tooltip,同样也可以跟随鼠标. 4. BsTip 各种简单的 tooltips,使用淡入和淡出效果,并且也有边框环绕. 5. clueTip 当鼠标悬浮的时候允许显示一个漂亮的 tooltip 在指定的元素上. 6. inline HTML tool
-
JQuery boxy插件在IE中边角图片不显示问题的解决
JQuery boxy插件很好用,但也会出现一些问题,比如弹出框的边角在IE中不能显示.本博文将来解决这个问题.将boxy插件引用到项目中后会有一个boxy.css文件和jquery.boxy.js文件.在boxy.css文件中有给弹出框设置四个角图片的样式,如下图: 不做任何修改在Chrome浏览器下没有问题,如下: 在网上查了一些资料,说将css文件中的图片路径给位全路径可以解决问题,如下: 发现这样修改后并没有作用,运行后效果仍然如下: 有效的解决方法 将上面css截图的下半部分注释掉,如
-
基于jQuery倒计时插件实现团购秒杀效果
倒计时一般是用来表示未来某一时刻距现在时刻还剩多少时间.倒计时在WEB上应用非常广泛,如考试系统倒计时,团购网站中的优惠活动倒计时等等.今天,我们来使用jQuery倒计时超级实现团购秒杀效果,感兴趣的朋友一起学习吧! 1.1 帮助文档关键字 倒计时 秒杀 timer 1.2. 使用场景 这样的倒计时在购物网站中会经常使用到,比如秒杀,限时抢购,确认收货倒计时. 这个功能并不难实现,就是利用js的定时执行,搜了一下网上的代码,五花八门,都是一个方法,没有做到封装,方便使用,所以写了一个插件,方便项
-
jQuery时间插件jquery.clock.js用法实例(5个示例)
本文实例讲述了jQuery时间插件jquery.clock.js用法.分享给大家供大家参考,具体如下: Example 1: Basic clock, no options <html> <head> <title>jclock</title> <mce:script type="text/javascript" src="jquery-1.2.1.min.js" mce_src="jquery-1.2