설문조사 등등 로딩바 구현

 

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>