jQuery - 라운드 박스 이번에는 이렇게 했는데...ㅠ..ㅠ... > 그누4 질문답변

그누4 질문답변

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

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>

댓글 전체

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 공부하다가 머리가 지끈 거려서.
잠시 봤더니 용량이 무지하게 크네요. ㅠ..ㅠ...
전체 202 |RSS
그누4 질문답변 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1402호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT