Dev/Web
JQuery를 이용한 둥근 테두리 테이블 만들기
newtype
2011. 2. 1. 14:30
웹눈 님의 Round Table 소스를 JQuery를 이용하는 소스로 수정해봤습니다.
JQuery를 요 몇일 보고 있는데, 재미있네요..
이제 막 시작한 단계로 더 깔끔하게 다듬을 수 있을 것도 같은데..
아직은 내공이 부족하네요.
좋은 방법 있으면 공유 해주시면 고맙겠습니다.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script> function roundTable(objID) { var $obj = $("table#" + objID); var s, r; var y, x, MAX; var w, h; r = parseInt($obj.attr('radius')); if (r == null || r < 1) r = 1; else if (r > 6) r = 6; MAX = r * 2 + 1; $obj.before("<TABLE id='tmpRoundTbl'></TABLE>") $("table#tmpRoundTbl") .attr("cellSpacing", 0) .attr("cellPadding", 0) .append("<TBODY></TBODY>"); for (y=0; y < MAX; y++) { $("table#tmpRoundTbl TBODY").append("<TR></TR"); s = Math.abs(y - parseInt(r)); for (x=0; x < MAX; x++) { $("table#tmpRoundTbl TBODY TR:eq("+y+")") .append("<TD></TD>"); w = '1px'; h = '1px'; if (x == 0 || x == MAX - 1) h = null; else if (y == 0 || y == MAX - 1) w = null; else if (r > 2) { if (Math.abs(x - r) == 1) w = '2px'; if (Math.abs(y - r) == 1) h = '2px'; } if (w != null) $("table#tmpRoundTbl TBODY TR:eq("+y+") TD:eq("+x+")") .css("width", w); if (h != null) $("table#tmpRoundTbl TBODY TR:eq("+y+") TD:eq("+x+")") .css("height", h); if (s == x || s == MAX - x - 1) $("table#tmpRoundTbl TBODY TR:eq("+y+") TD:eq("+x+")") .css("backgroundColor", $obj.attr('rborder') ); else if (x > s && s < MAX - x - 1) $("table#tmpRoundTbl TBODY TR:eq("+y+") TD:eq("+x+")") .css("backgroundColor", $obj.attr('rbgcolor') ); } } $("table#tmpRoundTbl TBODY TR:eq("+s+") TD:eq("+r+")").append( $obj ); } </script> <table id="ta" width="300" height="100" border="0" radius="3" rborder="#999999" rbgcolor="#F8F8F8"> <tbody><tr> <td valign="top">테스트입니다</td> </tr> </tbody></table> <span> <script>roundTable("ta");</script> </span>
[ 참고 ]
반응형