轻松实现与所有浏览器（Internet Explorer、Firefox、Chrome、Opera）兼容的圆角

• 下载演示项目 - 191.25 KB

引言

最近，我下载了一个非常高效强大的 ASP.NET 开源 CMS。

不幸的是，提供的 HTML 模板非常单调或严格。我希望找到一个简单的解决方案，用尽可能少的代码来实现。

最终，我发现了 Dave Methvin 的杰出作品：jQuery Corner 库（基于 Jquery 框架库），它能够实现与所有浏览器的兼容性。

访问 http://jquery.malsup.com/corner/。

我将此页面以 PDF 格式附加在演示网站的根目录下。

这个库非常出色，因为它允许你在角落放置许多漂亮的形状。

背景

我思考如何最容易地使用这个库？

JQuery 是一个非常强大的框架，能够读取任何标签并读取其所有属性。

所以我的想法是创建一个新的属性：“corner”，添加到我想要圆角的标签上（在我的例子中是 div 标签）。该属性的可能值是其 corner() 方法的所有可能参数值：“Bevel”、“notch”、“bite”、“cool”等。

所以我将此属性添加到我想要的所有标签中

<div id="div0" class="headermenu" corner="notch">
	Hi , 
	This is a simple test to see the corners with specials shapes.
	Hi , 
	This is a simple test to see the corners with specials shapes
</div>
		

<div id="div1" class="headermenu" corner="bite">
	Hi , 
	This is a simple test to see the corners shapes.<
	i , 
	This is a simple test to see the corners shapes
</div>
		

<div id="div2" class="headermenu" corner="10px">
	Hi , 
	This is a simple test to see the corners rounded.<br />
	i , 
	This is a simple test to see the corners rounded
</div>

现在我需要编写一个简单的函数，该函数仅获取 HTML 文档中所有带有“corner”属性的 div 标签，以便应用 jquery corner() 方法。

所以我创建了文件 jquery.corner.executor.js 来包含

//do this task when the DOM is loaded
$(document).ready(function() {

    // Watch all div in document (you can do the same for table tags)
    $('div').each(function(index) {
        
		//Is there a corner attribute in the current div tag ?
		var attr = $(this).attr('corner');

        //if current div has attribute corner , get the value
        if (typeof attr !== 'undefined' && attr !== false) 
		{
            //get current div id
            var cur_id = $(this).attr('id');

            //get the value : style to apply
            var cur_value = $(this).attr('corner');

            //set property value
            $('#' + cur_id).corner(cur_value);
        }
    });
});

Using the Code

我们看到使用这个插件非常容易。

总结

1. 以正确的顺序在头部包含此 JavaScript

   <!-- The older versions of jquery works too -->	
   <script type="text/javascript" src="js/jquery-1.4.min.js" />  
   <script type="text/javascript" src="js/jquery.corner.js" />   
   <script type="text/javascript" src="js/jquery.corner.executor.js" />

2. 将属性 corner="good_style" 添加到你的 div 中。
3. 感谢 Dave Methvin 的出色工作；)

关注点

始终对 jQuery 以及围绕它构建的所有优秀的开源库进行各种可能性探索都非常有趣。它使复杂的事情能够以简单的方式完成。

历史

• 2011 年 7 月 19 日：初始版本