http://www.jngent.co.kr/test.php
########
개발자 : 조일현
이메일 : ssdosso@naver.com
#########
저번에 올렸었지만,,,
미약 한것 같아서 지우고..
새로운 버젼을 올립니다.
앞으로 응용할 수 있는게 많을 것 같습니다.
Firefox 와 IE 에서 다 가능합니다.
ajax,CSS ,prototype 으로 구현 되었습니다.
ps. 본 소스를 보시면, 왜 prototype1.4 가 유용한지,굳이 왜 사용해야 하는지...에대하여
잘 알 수 있습니다.
우선, 소스의 간결화가.. 그 첫번째 이유이고, 두번째 큰 이유는 의도 하지는 않았지만.
FF 와 IE 의 호환성 입니다.
ps2 . ajax Update 함수를 이용해서 업로드 로딩바를 구현 하였습니다 가능합니다.
<?
$pwd = './';
?>
<script language="javascript" type="text/javascript" src="<?=$pwd?>js/prototype.js"></script>
<script language="javascript">
var MY = new Channel();
function Channel() {
this.num = null;
this.div = null;
this.divTxt = null;
this.div2 = null;
this.div2Txt = null;
this.percent_num = null;
this.percent_num1 = null;
this.total = 0;
this.apName = navigator.appName;
}
function Progress() {
MY.total = 100;
MY.num = '58';
MY.num1 = '30';
MY.div = $("progress_0");
MY.divTxt = $("progreessTxt_0");
MY.div2 = $("progress_1");
MY.div2Txt = $("progreessTxt_1");
MY.percent_num = 0;
MY.percent_num1 = 0;
Element.setStyle(MY.div, {width:MY.percent_num+'px'});
Element.setStyle(MY.div2, {width:MY.percent_num+'px'});
updateProgress();
}
function updateProgress()
{
if(MY.total >= 100)
{
if(MY.num > 0)
{
if( MY.percent_num < MY.num) {
MY.percent_num = MY.percent_num + 1;
if(MY.num > 20 ) {
if(MY.percent_num < 20) {
Element.hide(MY.divTxt); }
else {
Element.show(MY.divTxt);
Element.setStyle(MY.divTxt, {left:'-5px',width:MY.percent_num+'%'});
}
} else {
Element.setStyle(MY.divTxt, {left:'+23px',width:MY.percent_num+'%'});
}
MY.divTxt.innerHTML = MY.percent_num +"%";
if(MY.apName == 'Netscape') Element.setStyle(MY.div, {width:MY.percent_num+'%',background:'url("../images/mychannel/bg_blue_per.gif")'});
else Element.setStyle(MY.div, {width:MY.percent_num+'%'});
}
}
if(MY.num1 > 0)
{
if( MY.percent_num1 < MY.num1) {
MY.percent_num1 = MY.percent_num1 + 1;
if(MY.num1 > 20 ) {
if(MY.percent_num1 < 20) {
Element.hide(MY.div2Txt); }
else {
Element.show(MY.div2Txt);
Element.setStyle(MY.div2Txt, {left:'-5px',width:MY.percent_num1+'%'});
}
} else {
Element.setStyle(MY.div2Txt, {left:'+23px',width:MY.percent_num1+'%'});
}
MY.div2Txt.innerHTML = MY.percent_num1 +"%";
if(MY.apName == 'Netscape') Element.setStyle(MY.div2, {width:MY.percent_num1+'%',background:'url("../images/mychannel/bg_yellow_per.gif")'});
else Element.setStyle(MY.div2, {width:MY.percent_num1+'%'});
}
}
setTimeout("updateProgress()",40);
}
}
Event.observe(window, 'load', function(event){Progress();}, false);
</script>
<link rel="stylesheet" href="test.css" type="text/css" media="SCREEN" title="Upload" />
<table width="298" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="23" background="<?=$pwd?>images/mychannel/bg_name.gif"style="PADDING-left: 7px;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="20"> </td>
<td><strong><font color="#FFFFFF">로딩바</font></strong></td>
</tr>
</table></td>
</tr>
<tr>
<td height="32"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="95"> </td>
<td ><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="5"> </td>
</tr>
<tr>
<td align="right"> </td>
</tr>
</table>
<strong></strong></td>
<td width="20"> </td>
</tr>
</table></td>
</tr>
<tr>
<td height="49"><table width="265" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="6" height="20"> </td>
<td width="146"><table width="146" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="11" background="<?=$pwd?>images/mychannel/bg_per.gif">
<div id="pointlevel_0" ><div id="progreessTxt_0" ></div><div id="progress_0">
<table width="100%" border="0" cellspacing="0" cellpadding="0" >
<tr><!-- style="background-attachment:fixed; background-image:url(../images/mychannel/bg_blue_per.gif)" -->
<td width="7"><img src="<?=$pwd?>images/mychannel/bg_blue_per_left.gif" width="7" height="11"></td>
<td height="11" align="left" class="back1"><img src="../../images/mychannel/bg_blue_per.gif" width="1" height="11" /></td>
<td width="6"><img src="<?=$pwd?>images/mychannel/bg_blue_per_right.gif" width="7" height="11"></td>
</tr>
</table></div></div> </td>
</tr>
</table></td>
<td width="113"> </td>
</tr>
<tr>
<td height="20"> </td>
<td><table width="146" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="11" background="<?=$pwd?>images/mychannel/bg_per.gif">
<div id="pointlevel_1" ><div id="progreessTxt_1"></div><div id="progress_1">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="7" ><img src="<?=$pwd?>images/mychannel/bg_yellow_per_left.gif" width="7" height="11"></td>
<td height="11" align="left" class="back2" ><img src="../../images/mychannel/bg_yellow_per.gif" width="1" height="11" /></td>
<td width="6"><img src="<?=$pwd?>images/mychannel/bg_yellow_per_right.gif" width="7" height="11"></td>
</tr>
</table></div></div></td>
</tr>
</table></td>
<td> </td>
</tr>
</table></td>
</tr>
<tr>
<td height="24"> </td>
</tr>
<tr>
<td style="PADDING-left: 11px;"> </td>
</tr>
</table>
'인터넷정보' 카테고리의 다른 글
| 파일의 존재유무 (0) | 2007.10.11 |
|---|---|
| 파일의 존재유무 (0) | 2007.10.11 |
| PHP 유용한상수들 SID 라는 상수 (0) | 2007.10.11 |
| PHP 유용한상수들 SID 라는 상수 (0) | 2007.10.11 |
| 설문조사 등등 로딩바 구현 (0) | 2007.10.11 |
| AJAX를 이용한 메모보드(포스트잇) (0) | 2007.10.11 |
| AJAX를 이용한 메모보드(포스트잇) (0) | 2007.10.11 |
| PHP로 작동하는 RSS 읽는 함수 (0) | 2007.10.11 |
| PHP로 작동하는 RSS 읽는 함수 (0) | 2007.10.11 |
| 심플한 라이트박스 효과 (이미지, 아이프레임, html 지원) (0) | 2007.10.11 |