최고의 jquery 둥근 모서리, divs 및 테이블 작업?

약 5 개의 플러그인을 사용해 보았는데, 각각 단점이 있습니다. 먼저 지정된 높이의 div에서 작업해야하며 내용이 없으면 모서리를 둥글게 만듭니다. 두 번째는 테이블에서 작동해야합니다 (havent 한 발견 된 모든 "작업"이) 나는이 주요 콘텐츠 사업부에 대한 4images 다음 테이블, JQuery와 훨씬 쉬울 것 4images 의미로, 이미지를 사용하려면 정말 해달라고최고의 jquery 둥근 모서리, divs 및 테이블 작업?

어떤 조언이 필요합니까? 감사합니다

이미지없이 작동 나는 Corners plugin을 사용했습니다

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

출처

2009-11-17 Elliott

.. –

왜 안되나요? – Elliott

표는 표 형식의 데이터 (즉, 데이터와 같은 스프레드 시트)를 의미합니다. 탐색 링크를 표시하는 데이를 사용하면 마크 업이 좋지 않은 것으로 간주됩니다. 'ul/li'리스트를 사용하는 것은 이제 수년 동안 네비게이션을 만드는 더 수용적인 방법이었습니다. –

내가 cury 모서리와 시도 코드입니다. 코드가 거의 정확하지만 jQuery 선택기를 혼합 한 것 같습니다. myId 인 요소를 선택하려면 $('#myId')을 사용하고 jQuery docs의 선택기도 참조하십시오. 파이어 폭스

근무 코드 :이 다운로드하고 플러그인을 설치 한 필요로

<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를 사용 : 당신은 처음에`table`를 사용해서는 안

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

출처

2009-11-17 22:11:21 John

감사합니다. 그게 잘 작동 =) – Elliott

IE에서 단 하나의 문제는 ... 꼭대기 부분 모서리 = (내가 항상 가지고있는 문제, 정말 성가신. – Elliott

또한 IE에서 테이블 전혀 코너가 – Elliott

최고의 jquery 둥근 모서리, divs 및 테이블 작업?

답변

관련 문제