jQuery - 라운드 박스 이번에는 이렇게 했는데...ㅠ..ㅠ... 정보
jQuery - 라운드 박스 이번에는 이렇게 했는데...ㅠ..ㅠ...본문
모양이 깨어진 것인 안쪽 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>
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>
댓글 전체
http://tottoe.com/bbs/board.php?bo_table=faq 요기 `분류`에 아까 붙여봤는데 괜찮습니다.
백그라운드 그라데이션 까지 가능합니다.
http://plugins.jquery.com/project/backgroundCanvas
백그라운드 그라데이션 까지 가능합니다.
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 아코디온에 걸려있는건데 여기에 해당되는지 가물가물...
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 공부하다가 머리가 지끈 거려서.
잠시 봤더니 용량이 무지하게 크네요. ㅠ..ㅠ...
오늘은 cookie 공부하다가 머리가 지끈 거려서.
잠시 봤더니 용량이 무지하게 크네요. ㅠ..ㅠ...