Question

我一定试过了5个不同的插件，每个插件都有缺点。首先，我需要它来处理具有指定高度的div，如果没有内容，仍然会绕过角落。其次，它需要在表格上工作（没有发现任何“工作”）

我真的不想使用图像，因为这意味着4images主要内容div然后4images用于表格，jquery将更容易

有什么建议吗？感谢

以下是我用cury角落试过的代码

 $(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>

Answer 1

我使用了Corners plugin，它没有图像。你的代码几乎是正确的，但你似乎已经混合了你的jQuery选择器。要选择ID为myId的元素，请使用$('#myId')，另请参阅jQuery docs中的选择器。

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来执行您想要的操作：

<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＆amp;表？

1 个答案: