================================
div 를 접목시킨 로딩바
================================
어렵............................................
/** STYLE 부분 **/
<style type ="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
overflow-y: auto;
overflow-x: hidden;
}
#bar,#barbackground {
position: absolute;
left: 0px;
top: 0px;
background-color: blue;
}
#barbackground {
background-color: #ffffff;
}
#main_Content {
position: absolute;
left: 0px;
top: 0px;
overflow: visible;
overflow-y: auto;
background-color: #990099;
width: 100%;
height: 100%;
}
#loading_bar {
position: absolute;
left: 306px;
top: 167px;
width: 605px;
height: 216px;
visibility: visible;
background-color: #ffffff;
}
-->
</style>
/** 스크립트 부분 **/
<script language="JavaScript1.2">
// 지연시간을 설정(초)
var duration = 0.8;
//var req_page = "<%= request.getRequestURL()%>";
//alert(req_page);
function postaction() {
// 로딩바를 보여준 후 이동할 페이지
d0cument.getElementById('baranchor').style.visibility="hidden";
//alert("loading_bar _ Hidden");
d0cument.getElementById('main_Content').style.visibility="visible";
//alert("main_Content : "+d0cument.getElementById('main_Content').style.visibility);
d0cument.getElementById('loading_bar').style.visibility="hidden";
}
var clipright = 0;
var widthIE = 0;
var widthNS = 0;
function initializebar() { //로딩바를 실행합니다.
if (d0cument.all) {
baranchor.style.visibility = "visible";
widthIE = bar.style.pixelWidth;
startIE = setInterval("increaseIE()", 50);
}
if (d0cument.layers) {
widthNS = d0cument.baranchorNS.d0cument.barbackgroundNS.clip.width;
d0cument.baranchorNS.d0cument.barNS.clip.right = 0;
d0cument.baranchorNS.visibility = "show";
startNS = setInterval("increaseNS()", 50);
}
}
//Internet Explorer
function increaseIE() {
bar.style.clip = "rect(0 " + clipright + " auto 0)"; //bar의 표시부분 구성
window.status = "Loading...";
if (clipright < widthIE)
clipright = clipright + (widthIE / (duration * 20));
else {
window.status = '';
clearInterval(startIE);
postaction();
}
}
//Other Browser
function increaseNS() {
if (clipright < 202) {
window.status = "Loading...";
d0cument.baranchorNS.d0cument.barNS.clip.right = clipright;
clipright = clipright + (widthNS / (duration * 20));
} else {
window.status = '';
clearInterval(startNS);
postaction();
}
}
//window.onload = initializebar;
</script>
/**BODY 부분**/
<body onLoad="initializebar()">
<script language="JavaScript1.2">
if (d0cument.all){
//이곳은 실제 로딩바를 표시하는 영역이며, 스타일 지정이 가능한 곳입니다.
d0cument.write('<div id="baranchor" style="position: absolute; left: 35%; top: 40%; width:400px; height:20px;visibility:hidden;">') ;
d0cument.write('<div id="bar" style="width:400px;height:20px;z-index:10"><font color="#ffffff">Now Loading........Please Wait....................................</font></div>') ;
d0cument.write('</div>');
//alert('down script');
}
</script>
<div id="loading_bar" style="visibility:hidden;">
<ilayer id="baranchorNS" name="baranchorNS" left="375" top="-280" width="405" height="24">
<layer name="barbackgroundNS" bgcolor="black" width="400" height="20" z-index="10" left="0" top="0"></layer>
<layer name="barNS" bgcolor="blue" width="400" height="20" z-index="11" left="0" top="0"></layer>
</ilayer>
</div>
<!-- 아래는 메인컨텐츠가 보이는 곳입니다. -->
<div id="main_Content" style="visibility: hidden;">
여기에 표시할 항목을 추가.............
</div>
</body>
'Front-end > Javascript' 카테고리의 다른 글
| JavaScript - 이클립스에서 JavaScript 한글 저장 문제 (0) | 2012.08.20 |
|---|---|
| JavaScript - isNaN ? (0) | 2012.08.15 |
| jSon - Begin (0) | 2012.08.15 |
| JSON (JavaScript Object Notation) (1) | 2012.08.15 |
| JavaScript - String replace() (0) | 2012.08.15 |