最好的jQuery圆角，适用于divs&桌子? [英] best jquery rounded corners, working on divs & tables?
问题描述
我必须尝试大约5种不同的插件，每个插件都有缺点.首先，我需要它在具有指定高度的div上工作，并且如果没有内容，仍然需要四舍五入.其次，它需要在表上工作(已经找到任何工作"的东西)
I must have tried about 5 different plugins, each having downsides. Firstly I need it to work on a div with a specified height, and still round the corners if there is no content. Secondly it needs to work on tables (havent found any that "work")
我真的不想使用图像，因为这意味着主要内容div的图像为4images，表的图像为4images，jQuery会容易得多
I dont really want to use images, as this means 4images for the main content div then 4images for the table, jquery would be much easier
有什么建议吗?谢谢
下面是我尝试过的带有弯角的代码
Below is the code I have tried with cury corners
$(document).ready( function()
{
$('.content').corner();
$('nav_links').corner();
});
</script>
<div id="content" class="content">
<table id="nav_links" class="nav_links" cellpadding="7">
<tr>
<td class="nav_background"><a href="index.html">Home</a></td>
<td class="nav_background"><a href="#">1</a></td>
<td class="nav_background"><a href="#">2</a></td>
<td class="nav_background"><a href="#">3</a></td>
<td class="nav_background"><a href="#">4</a></td>
</tr>
</table>
推荐答案
我使用了角落插件，它可以在没有图像的情况下工作.您的代码几乎是正确的，但是您似乎混合了jQuery选择器.要选择ID为myId的元素，请使用$('#myId')，另请参见 jQuery文档中的选择器.
I've used the Corners plugin, which works without images. Your code is almost correct, however you seem to have mixed your jQuery selectors up. To select an element with id myId, use $('#myId'), see also selectors in the jQuery docs.
FireFox的工作代码:
Working code for FireFox:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.corners.min.js"></script>
<script type="text/javascript">
$(document).ready( function()
{
$('#nav_links').corners('20px');
});
</script>
<style type="text/css">
#nav_links { background-color: #c0c0c0; }
</style>
</head>
<body>
<div id="content" class="content">
<table id="nav_links" class="nav_links" cellpadding="7">
<tr>
<td class="nav_background"><a href="index.html">Home</a></td>
<td class="nav_background"><a href="#">1</a></td>
<td class="nav_background"><a href="#">2</a></td>
<td class="nav_background"><a href="#">3</a></td>
<td class="nav_background"><a href="#">4</a></td>
</tr>
</table>
</div>
</body>
</html>
请注意，这要求您已经下载并安装了插件.正如您在评论中所写，这似乎不适用于IE中的表格.在这种情况下，最好的解决方案是将表转换为dcneiner建议的列表，因为从语义上来说，此 是页面/链接的列表. 如果您要坚持使用表格并能够指定显式宽度，请使用背景div来完成所需的操作:
Note that this requires you've downloaded and installed the plugin. As you write in the comments, this doesn't seem to work for tables in IE. The best solution in this cases would be to transform the table to a list as suggested by dcneiner, since this is semantically a list of pages/links anyway. If you want to stick to the table, and are able to specify an explicit width, use a background div to do what you want:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.corners.min.js"></script>
<script type="text/javascript">
$(document).ready( function()
{
$('#nav_links_background').corners('20px');
});
</script>
<style type="text/css">
#nav_links_background { background-color: #c0c0c0; width: 20em;}
</style>
</head>
<body>
<div id="content">
<div id="nav_links_background">
<table id="nav_links" cellpadding="7">
<tr>
<td class="nav_background"><a href="index.html">Home</a></td>
<td class="nav_background"><a href="#">1</a></td>
<td class="nav_background"><a href="#">2</a></td>
<td class="nav_background"><a href="#">3</a></td>
<td class="nav_background"><a href="#">4</a></td>
</tr>
</table>
</div>
</div>
</body>
</html>
这篇关于最好的jQuery圆角，适用于divs&桌子?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
