jQuery - 라운드 박스 이번에는 이렇게 했는데...ㅠ..ㅠ...

Clipboard01.jpg
모양이 깨어진 것인 안쪽 div와 바깥쪽 div가 꽉 차게 되지 않아서 그런가요???
jQuery 라운드 박스. 진짜 어렵네요. ㅠ..ㅠ...

<div id="notice_box"><div id="notice_box_in"><br>박스...............<br><br></div></div>

<script type="text/javascript" src="<?=$g4['path']?>/js/jquery.js"></script>
<script type="text/javascript" src="<?=$g4['path']?>/js/jquery.corner.js"></script>

<script type="text/javascript">
$(document).ready(function() {
$("#notice_box").corner().css({backgroundColor:"blue", width:"120"}).css('padding', '3px');
$("#notice_box_in").corner().css({backgroundColor:"white});
});
</script>

첨부파일

Clipboard01.jpg (2.3 KB)
0회 2008-11-20 15:35
|

댓글 4개

http://tottoe.com/bbs/board.php?bo_table=faq 요기 `분류`에 아까 붙여봤는데 괜찮습니다.
백그라운드 그라데이션 까지 가능합니다.
http://plugins.jquery.com/project/backgroundCanvas
헉...그래요?? 예제 좀 올려주세요. 굽신굽신...
ㅎ 단순합니다.
jquery.dimensions.js 이게 필요할지 모르겠네요..
조기위 제 작업계정/js/jquery.dimensions.js 받으세요.
조기위 제 작업계정/js/jquery.backgroundCanvas.js 받으시구요.
연결시 캐릭셋 지정해주세요.
<script type="text/javascript" src="<?=$g4['path']?>/js/jquery.dimensions.js" charset="UTF-8"></script>

<script type="text/javascript">
// 엘레멘트 라운드
// 그누보드 기본 prototype 과 충돌방지
var $j = jQuery.noConflict();
// Use jQuery via $j(...)
$j(document).ready(function()
{
$j("#notice").backgroundCanvas();
//$j(".notice1").backgroundCanvas();//이걸 한페이지 여러곳에 쓰려면 클래스로 가도 되죠..
$j("#notice1").backgroundCanvas();아니면 이런식으로 id로 여래개 넣으셔도 됩니다. 단, 저 아래쪽도 마찬가지로 해주시요.
});

// Draw the background on load and resize
$j(window).load(function ()
{
DrawBackground();
});

$j(window).resize(function()
{
DrawBackground();
});

function DrawBackground()
{
$j("#notice").backgroundCanvasPaint(BackgroundPaintFkt);//이걸 한페이지 여러곳에 쓰려면 클래스로 가도 되죠..
}

function BackgroundPaintFkt(context, width, height, canvas, $canvas, $canvasDiv, $content, $element )
{
var options = {x:0, height: height, width: width, radius:5, border: 0 };
var backgroundGradient = context.createLinearGradient(0, 0, 0, height - 2);
backgroundGradient.addColorStop(0 ,'#FFFFFF');//배경 그라데이션 시작색상
backgroundGradient.addColorStop(1, '#FAFAFA');// " 끝색상
context.fillStyle = "#EEEEEE";//이게 테두리 색상으로 보이는듯..

// Draw the blue border rectangle
$j.canvasPaint.roundedRect(context,options);

// Draw the gradient filled inner rectangle
options.border = 1;//테두리 두께
context.fillStyle = backgroundGradient;
$j.canvasPaint.roundedRect(context,options);
}

</script>

스타일은~~

/* 엘레멘트 라운드 - backgroundCanvas */
#notice { margin:20px; display:block; overflow:hidden; width:670px; height:auto; }
#notice p { padding: 1em 1em 1em 1em; }

<div id="notice">
<p>컨텐츠 관리자 영역외부 테두리</p>
</div>

덧) 스타일은 별개 없는거구요.
jquery.dimensions.js 이거 빼고 테스트 해보세요.
FAQ 아코디온에 걸려있는건데 여기에 해당되는지 가물가물...
감사합니다. 내일 해보구 궁금한거 있으면 또 물어볼께요.
오늘은 cookie 공부하다가 머리가 지끈 거려서.
잠시 봤더니 용량이 무지하게 크네요. ㅠ..ㅠ...
댓글을 작성하시려면 로그인이 필요합니다. 로그인

그누4 질문답변

그누보드4 관련 질문은 QA 로 이전됩니다. QA 그누보드4 바로가기 기존 게시물은 열람만 가능합니다.

+
제목 글쓴이 날짜 조회
17년 전 조회 801
17년 전 조회 717
17년 전 조회 956
17년 전 조회 789
17년 전 조회 932
17년 전 조회 755
17년 전 조회 945
17년 전 조회 726
17년 전 조회 737
17년 전 조회 1,925
17년 전 조회 728
17년 전 조회 857
17년 전 조회 818
17년 전 조회 857
17년 전 조회 1,508
17년 전 조회 1,810
17년 전 조회 819
17년 전 조회 928
17년 전 조회 771
17년 전 조회 710
🐛 버그신고