본문 바로가기

Front-end/Javascript

JavaScript - 로딩바


================================

div 를 접목시킨 로딩바

================================

어렵............................................

/** STYLE 부분 **/

<style type ="text/css">

<!--

body {

margin-left0px;

margin-top0px;

margin-right0px;

margin-bottom0px;

overflow-yauto;

overflow-xhidden;

}

#bar,#barbackground {

positionabsolute;

left0px;

top0px;

background-colorblue;

}

#barbackground {

background-color#ffffff;

}

#main_Content {

positionabsolute;

left0px;

top0px;

overflowvisible;

overflow-yauto;

background-color#990099;

width100%;

height100%;

}

#loading_bar {

positionabsolute;

left306px;

top167px;

width605px;

height216px;

visibilityvisible;

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