[제작 및 배포]
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년 전
감사합니다.
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 2230 | 16년 전 | 1293 | ||
| 2229 | 16년 전 | 2161 | ||
| 2228 | 16년 전 | 3226 | ||
| 2227 | 16년 전 | 2171 | ||
| 2226 | 16년 전 | 1755 | ||
| 2225 | 16년 전 | 1515 | ||
| 2224 |
 ideaman |
16년 전 | 2046 | |
| 2223 | 16년 전 | 4730 | ||
| 2222 | 16년 전 | 1415 | ||
| 2221 |
 RINIX |
16년 전 | 2146 | |
| 2220 |
RINIX |
16년 전 | 2137 | |
| 2219 |
RINIX |
16년 전 | 2407 | |
| 2218 |
RINIX |
16년 전 | 2149 | |
| 2217 |
RINIX |
16년 전 | 4440 | |
| 2216 |
RINIX |
16년 전 | 2928 | |
| 2215 | 16년 전 | 2869 | ||
| 2214 | 16년 전 | 1604 | ||
| 2213 | 16년 전 | 1252 | ||
| 2212 |
RINIX |
16년 전 | 3953 | |
| 2211 |
RINIX |
16년 전 | 1622 | |
| 2210 |
RINIX |
16년 전 | 1621 | |
| 2209 | 16년 전 | 2115 | ||
| 2208 | 16년 전 | 1887 | ||
| 2207 |
letsgolee
|
16년 전 | 1498 | |
| 2206 |
RINIX |
16년 전 | 3929 | |
| 2205 | 16년 전 | 1765 | ||
| 2204 | 16년 전 | 3136 | ||
| 2203 | 16년 전 | 3027 | ||
| 2202 | 16년 전 | 1049 | ||
| 2201 | 16년 전 | 1845 | ||
| 2200 | 16년 전 | 1599 | ||
| 2199 |
 MindMap |
16년 전 | 1858 | |
| 2198 |
태양의서쪽
|
16년 전 | 2652 | |
| 2197 |
태양의서쪽
|
16년 전 | 3029 | |
| 2196 |
태양의서쪽
|
16년 전 | 3230 | |
| 2195 | 16년 전 | 3328 | ||
| 2194 | 16년 전 | 1470 | ||
| 2193 |
letsgolee
|
16년 전 | 1425 | |
| 2192 | 16년 전 | 2258 | ||
| 2191 | 17년 전 | 1977 | ||
| 2190 |
 cmpanel |
17년 전 | 2292 | |
| 2189 | 17년 전 | 2814 | ||
| 2188 |
Sizkein
|
17년 전 | 3261 | |
| 2187 |
letsgolee
|
17년 전 | 2360 | |
| 2186 |
Sizkein
|
17년 전 | 1637 | |
| 2185 |
Sizkein
|
17년 전 | 3209 | |
| 2184 |
Sizkein
|
17년 전 | 3064 | |
| 2183 | 17년 전 | 3042 | ||
| 2182 | 17년 전 | 3923 | ||
| 2181 | 17년 전 | 2589 | ||
| 2180 |
 skinartisanCOM |
17년 전 | 2407 | |
| 2179 | 17년 전 | 2655 | ||
| 2178 | 17년 전 | 2900 | ||
| 2177 | 17년 전 | 2619 | ||
| 2176 | 17년 전 | 1454 | ||
| 2175 | 17년 전 | 1897 | ||
| 2174 | 17년 전 | 1497 | ||
| 2173 |
skinartisanCOM |
17년 전 | 1924 | |
| 2172 | 17년 전 | 2525 | ||
| 2171 | 17년 전 | 8709 | ||
| 2170 | 17년 전 | 3162 | ||
| 2169 | 17년 전 | 4251 | ||
| 2168 |
cmpanel |
17년 전 | 1989 | |
| 2167 | 17년 전 | 3659 | ||
| 2166 |
cmpanel |
17년 전 | 1556 | |
| 2165 | 17년 전 | 1388 | ||
| 2164 | 17년 전 | 2325 | ||
| 2163 | 17년 전 | 1320 | ||
| 2162 | 17년 전 | 1644 | ||
| 2161 | 17년 전 | 1461 | ||
| 2160 | 17년 전 | 2530 | ||
| 2159 |
inxps
|
17년 전 | 1505 | |
| 2158 |
inxps
|
17년 전 | 1098 | |
| 2157 | 17년 전 | 1231 | ||
| 2156 | 17년 전 | 3112 | ||
| 2155 | 17년 전 | 2179 | ||
| 2154 | 17년 전 | 1980 | ||
| 2153 |
 똥싼너구리 |
17년 전 | 1225 | |
| 2152 |
letsgolee
|
17년 전 | 2456 | |
| 2151 | 17년 전 | 1175 | ||
| 2150 |
아름다운세상
|
17년 전 | 1130 | |
| 2149 |
아름다운세상
|
17년 전 | 1380 | |
| 2148 |
아름다운세상
|
17년 전 | 2740 | |
| 2147 |
 넥스트스텝 |
17년 전 | 2400 | |
| 2146 | 17년 전 | 2488 | ||
| 2145 | 17년 전 | 1189 | ||
| 2144 | 17년 전 | 1307 | ||
| 2143 | 17년 전 | 3254 | ||
| 2142 | 17년 전 | 2839 | ||
| 2141 | 17년 전 | 4111 | ||
| 2140 | 17년 전 | 2260 | ||
| 2139 | 17년 전 | 2349 | ||
| 2138 | 17년 전 | 1402 | ||
| 2137 | 17년 전 | 2517 | ||
| 2136 | 17년 전 | 2202 | ||
| 2135 | 17년 전 | 2963 | ||
| 2134 |
아름다운세상
|
17년 전 | 2471 | |
| 2133 |
Juinjang
|
17년 전 | 1636 | |
| 2132 | 17년 전 | 2433 | ||
| 2131 | 17년 전 | 1591 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기