[제작 및 배포]
http://www.rinix.co.kr
주인장 RINIX
[패치내용]
1. Mozilla, Safari, Opera 에서도 사용가능.
2. 그래프 롤오버시 애니메이션 추가.
3. 설명창 위치 교정.
[사용용도]
rx_graph 는 jQuery UI 이로서 세로형 또는 가로형 그레프 제작에 사용합니다.
간단하게 테이블과 레이어만의 설정으로 쉽게 그레프를 그릴수 있으며 초기 한번에 한해서 에니메이션을 실행합니다.
[사용방법]
1. script 설정
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="rx_graph.js"></script>
2. CSS 설정
<style>
.rx_bar {
width:14px;
height:1px;
clear: left;
float: left;
margin-top: 2px;
margin-right: 5px;
margin-left: 5px;
background-image: url(bar.gif);
}
#rx_win {
font-family: "굴림", "돋움";
font-size: 11px;
line-height: 18px;
color: #666666;
background-color: #FAFAFA;
padding: 5px;
border: 1px solid #666666;
position: absolute;
}
</style>
.rx_bar 는 그레프 스타일시트입니다. 혹 명칭이 맘에 안들어 바꾸시지 마세요 rx_graph 는 스타일시트이름으로 그래프레이어를 구분합니다.
#rx_win 는 그래프 롤오버시 나타나는 창의 스타일시트입니다.
3. 그래프설정
<div class="rx_bar" alt="높이" caption="설명창내용"></div>
alt 는 그래프의 높이이며 caption은 그래프 롤오버시 설명내용입니다.
http://www.rinix.co.kr
주인장 RINIX
[패치내용]
1. Mozilla, Safari, Opera 에서도 사용가능.
2. 그래프 롤오버시 애니메이션 추가.
3. 설명창 위치 교정.
[사용용도]
rx_graph 는 jQuery UI 이로서 세로형 또는 가로형 그레프 제작에 사용합니다.
간단하게 테이블과 레이어만의 설정으로 쉽게 그레프를 그릴수 있으며 초기 한번에 한해서 에니메이션을 실행합니다.
[사용방법]
1. script 설정
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="rx_graph.js"></script>
2. CSS 설정
<style>
.rx_bar {
width:14px;
height:1px;
clear: left;
float: left;
margin-top: 2px;
margin-right: 5px;
margin-left: 5px;
background-image: url(bar.gif);
}
#rx_win {
font-family: "굴림", "돋움";
font-size: 11px;
line-height: 18px;
color: #666666;
background-color: #FAFAFA;
padding: 5px;
border: 1px solid #666666;
position: absolute;
}
</style>
.rx_bar 는 그레프 스타일시트입니다. 혹 명칭이 맘에 안들어 바꾸시지 마세요 rx_graph 는 스타일시트이름으로 그래프레이어를 구분합니다.
#rx_win 는 그래프 롤오버시 나타나는 창의 스타일시트입니다.
3. 그래프설정
<div class="rx_bar" alt="높이" caption="설명창내용"></div>
alt 는 그래프의 높이이며 caption은 그래프 롤오버시 설명내용입니다.
rx_graph[1.01].js
$(document).ready(function(){
// 애니매이션 설정
/*$("div.rx_bar").animate({
height: $(this).attr("alt") + "px",
opacity: 1
}, 1500 );*/
for(i=0; i<$("div.rx_bar").length; i++){
$("div.rx_bar").eq(i).animate({
//세로형
height: $("div.rx_bar").eq(i).attr("alt") + "px",
//가로형
//width: $("div.rx_bar").eq(i).attr("alt") + "px",
opacity: 1
}, 2000 );
}
// 설명창
$("div.rx_bar").hover(function(e){
i = $("div.rx_bar").index(this);
rx_over(i);
$("body").append("<div id='rx_win'>"+ $(this).attr("caption") +"</div>");
rx_win_w = $("#rx_win").innerWidth(true) / 2;
rx_win_h = $("#rx_win").innerHeight(true) + 20;
$("#rx_win").css({"top":(e.pageY - rx_win_h) + "px", "left":(e.pageX - rx_win_w) + "px"}).show();
}, function(){
$("#rx_win").remove();
});
});
function rx_over(i){
pr = $("div.rx_bar").eq(i).attr("alt")*0.2;
$("div.rx_bar").eq(i).animate({
//세로형
height: $("div.rx_bar").eq(i).attr("alt") - pr + "px",
//가로형
//width: $("div.rx_bar").eq(i).attr("alt") - pr + "px",
opacity: 0.75
}, 250 )
.animate({
//세로형
height: $("div.rx_bar").eq(i).attr("alt") + "px",
//가로형
//width: $("div.rx_bar").eq(i).attr("alt") + "px",
opacity: 1
}, 500 );
}
// 애니매이션 설정
/*$("div.rx_bar").animate({
height: $(this).attr("alt") + "px",
opacity: 1
}, 1500 );*/
for(i=0; i<$("div.rx_bar").length; i++){
$("div.rx_bar").eq(i).animate({
//세로형
height: $("div.rx_bar").eq(i).attr("alt") + "px",
//가로형
//width: $("div.rx_bar").eq(i).attr("alt") + "px",
opacity: 1
}, 2000 );
}
// 설명창
$("div.rx_bar").hover(function(e){
i = $("div.rx_bar").index(this);
rx_over(i);
$("body").append("<div id='rx_win'>"+ $(this).attr("caption") +"</div>");
rx_win_w = $("#rx_win").innerWidth(true) / 2;
rx_win_h = $("#rx_win").innerHeight(true) + 20;
$("#rx_win").css({"top":(e.pageY - rx_win_h) + "px", "left":(e.pageX - rx_win_w) + "px"}).show();
}, function(){
$("#rx_win").remove();
});
});
function rx_over(i){
pr = $("div.rx_bar").eq(i).attr("alt")*0.2;
$("div.rx_bar").eq(i).animate({
//세로형
height: $("div.rx_bar").eq(i).attr("alt") - pr + "px",
//가로형
//width: $("div.rx_bar").eq(i).attr("alt") - pr + "px",
opacity: 0.75
}, 250 )
.animate({
//세로형
height: $("div.rx_bar").eq(i).attr("alt") + "px",
//가로형
//width: $("div.rx_bar").eq(i).attr("alt") + "px",
opacity: 1
}, 500 );
}
[이 게시물은 관리자님에 의해 2011-10-31 16:55:28 jQuery에서 이동 됨]
댓글 1개
13년 전
감사합니다.
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 7830 | 9년 전 | 393 | ||
| 7829 |
 gilynh |
9년 전 | 571 | |
| 7828 | 9년 전 | 503 | ||
| 7827 | 9년 전 | 388 | ||
| 7826 | 9년 전 | 404 | ||
| 7825 | 9년 전 | 447 | ||
| 7824 | 9년 전 | 426 | ||
| 7823 | 9년 전 | 340 | ||
| 7822 | 10년 전 | 333 | ||
| 7821 | 10년 전 | 284 | ||
| 7820 | 10년 전 | 330 | ||
| 7819 |
 ABC디자인 |
10년 전 | 732 | |
| 7818 | 10년 전 | 363 | ||
| 7817 | 10년 전 | 482 | ||
| 7816 | 10년 전 | 382 | ||
| 7815 | 10년 전 | 584 | ||
| 7814 | 10년 전 | 411 | ||
| 7813 | 10년 전 | 350 | ||
| 7812 | 10년 전 | 364 | ||
| 7811 | 10년 전 | 373 | ||
| 7810 | 10년 전 | 528 | ||
| 7809 | 10년 전 | 455 | ||
| 7808 | 10년 전 | 338 | ||
| 7807 | 10년 전 | 379 | ||
| 7806 |
프로그래머7
|
10년 전 | 1313 | |
| 7805 | 10년 전 | 1246 | ||
| 7804 |
zahir1312
|
10년 전 | 755 | |
| 7803 |
ABC디자인 |
10년 전 | 1352 | |
| 7802 | 10년 전 | 439 | ||
| 7801 | 10년 전 | 841 | ||
| 7800 | 10년 전 | 1072 | ||
| 7799 | 10년 전 | 521 | ||
| 7798 | 10년 전 | 478 | ||
| 7797 | 10년 전 | 480 | ||
| 7796 | 10년 전 | 318 | ||
| 7795 | 10년 전 | 474 | ||
| 7794 | 10년 전 | 510 | ||
| 7793 | 10년 전 | 1021 | ||
| 7792 | 10년 전 | 427 | ||
| 7791 | 10년 전 | 518 | ||
| 7790 | 10년 전 | 476 | ||
| 7789 |
fbastore
|
10년 전 | 1415 | |
| 7788 | 10년 전 | 511 | ||
| 7787 | 10년 전 | 372 | ||
| 7786 | 10년 전 | 535 | ||
| 7785 | 10년 전 | 545 | ||
| 7784 | 10년 전 | 609 | ||
| 7783 | 10년 전 | 419 | ||
| 7782 | 10년 전 | 461 | ||
| 7781 | 10년 전 | 876 | ||
| 7780 | 10년 전 | 794 | ||
| 7779 | 10년 전 | 761 | ||
| 7778 | 10년 전 | 335 | ||
| 7777 | 10년 전 | 424 | ||
| 7776 | 10년 전 | 429 | ||
| 7775 | 10년 전 | 372 | ||
| 7774 | 10년 전 | 613 | ||
| 7773 | 10년 전 | 357 | ||
| 7772 | 10년 전 | 696 | ||
| 7771 | 10년 전 | 347 | ||
| 7770 | 10년 전 | 627 | ||
| 7769 | 10년 전 | 349 | ||
| 7768 | 10년 전 | 574 | ||
| 7767 | 10년 전 | 1138 | ||
| 7766 | 10년 전 | 463 | ||
| 7765 | 10년 전 | 491 | ||
| 7764 |
잘살아보자
|
10년 전 | 349 | |
| 7763 |
 foxrain |
10년 전 | 1421 | |
| 7762 |
Tosea
|
10년 전 | 1031 | |
| 7761 | 10년 전 | 619 | ||
| 7760 |
잘살아보자
|
10년 전 | 644 | |
| 7759 |
잘살아보자
|
10년 전 | 470 | |
| 7758 |
잘살아보자
|
10년 전 | 559 | |
| 7757 | 10년 전 | 1212 | ||
| 7756 |
ITBANK
|
10년 전 | 1235 | |
| 7755 | 10년 전 | 1913 | ||
| 7754 | 10년 전 | 1028 | ||
| 7753 | 10년 전 | 854 | ||
| 7752 | 10년 전 | 1365 | ||
| 7751 |
잘살아보자
|
10년 전 | 496 | |
| 7750 |
잘살아보자
|
10년 전 | 453 | |
| 7749 |
잘살아보자
|
10년 전 | 457 | |
| 7748 |
잘살아보자
|
10년 전 | 446 | |
| 7747 |
잘살아보자
|
10년 전 | 547 | |
| 7746 |
잘살아보자
|
10년 전 | 658 | |
| 7745 |
잘살아보자
|
10년 전 | 894 | |
| 7744 |
잘살아보자
|
10년 전 | 402 | |
| 7743 | 10년 전 | 926 | ||
| 7742 |
starbros
|
10년 전 | 811 | |
| 7741 |
잘살아보자
|
10년 전 | 636 | |
| 7740 |
잘살아보자
|
10년 전 | 501 | |
| 7739 |
잘살아보자
|
10년 전 | 447 | |
| 7738 |
잘살아보자
|
10년 전 | 507 | |
| 7737 |
잘살아보자
|
10년 전 | 468 | |
| 7736 |
잘살아보자
|
10년 전 | 486 | |
| 7735 |
잘살아보자
|
10년 전 | 821 | |
| 7734 |
잘살아보자
|
10년 전 | 413 | |
| 7733 |
잘살아보자
|
10년 전 | 518 | |
| 7732 |
잘살아보자
|
10년 전 | 674 | |
| 7731 |
잘살아보자
|
10년 전 | 596 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기