2008년 10월 26일
ajax 로딩 화면 만들기..
Ajax를 쓰다보면 로딩을 뿌려줄때가 많다.
로딩에도 여러가지가 있는것같다.
1. 로딩될 자리에 "로딩중..." 이라는 글자나 뺑글 뺑글 돌아가는 이미지가 바로 뜨는 방법
2. 페이지 젤 하단이나 상단에 "로딩중.. " "저장중.." 이라는 글자가 뜨는 방법 (테터툴즈가 이렇지..아마..)
3. 화면 중간에 새창? (사실은 레이어인데 그냥 새창이라고 하겠음) 이 떠서 로딩중 글자 뿌려주는 방법 (나의 주거래 은행 하나 은행에서 이번에 리빌드 하면서 이방법을 쓰더라.. )
기타등등..
머.. 상황에 맞게 이렇게 저렇게 쓰면 될것같다.
어떻게 보면 되게 간단하지만 나의 단기 기억상실을 보완하기 위해 여기에 소스와 사용법을 뿌려놓습니다. =,.=a
prototype 을 기본적으로 사용함을 미리 밝혀 둡니다.
사용법은 아래와 같습니다.
아 그리고 페이지 맨 아래쪽에 이거 넣어주시구요~
상자가 처음에는 안보이게 합니다.
ps ) <img src="/images/ajax-loader.gif"> 로딩에 쓸 이미지는 여기에서 보고 원하는데로 만들어서 가져오면 됩니다.~
감사합니다 _^_
로딩에도 여러가지가 있는것같다.
1. 로딩될 자리에 "로딩중..." 이라는 글자나 뺑글 뺑글 돌아가는 이미지가 바로 뜨는 방법
2. 페이지 젤 하단이나 상단에 "로딩중.. " "저장중.." 이라는 글자가 뜨는 방법 (테터툴즈가 이렇지..아마..)
3. 화면 중간에 새창? (사실은 레이어인데 그냥 새창이라고 하겠음) 이 떠서 로딩중 글자 뿌려주는 방법 (나의 주거래 은행 하나 은행에서 이번에 리빌드 하면서 이방법을 쓰더라.. )
기타등등..
머.. 상황에 맞게 이렇게 저렇게 쓰면 될것같다.
어떻게 보면 되게 간단하지만 나의 단기 기억상실을 보완하기 위해 여기에 소스와 사용법을 뿌려놓습니다. =,.=a
prototype 을 기본적으로 사용함을 미리 밝혀 둡니다.
<style>
#ajaxBox{
border:3px solid #000000;
width:300px;
height:50px;
position:absolute;
background-color:#ffffff;
text-align:center;
font-weight:bold;
padding:20px 0px 0px 0px;
color:#FF6600;
}
</style>
<div id="ajaxBox"><div id="ajaxBoxMent">잠시만 기다려주세요..</div><img src="/images/ajax-loader.gif"></div>
#ajaxBox{
border:3px solid #000000;
width:300px;
height:50px;
position:absolute;
background-color:#ffffff;
text-align:center;
font-weight:bold;
padding:20px 0px 0px 0px;
color:#FF6600;
}
</style>
<div id="ajaxBox"><div id="ajaxBoxMent">잠시만 기다려주세요..</div><img src="/images/ajax-loader.gif"></div>
<script>이것이 소스답니다. 별거도 없는데.. 강좌랍시고 -_-;;;;
function showAjaxBox(ment){
//항상 화면 중앙에 나타나도록...
var yp=document.body.scrollTop;
var xp=document.body.scrollLeft;
var ws=document.body.clientWidth;
var hs=document.body.clientHeight;
if(!ment) ment="잠시만 기다려주세요..";
var ajaxBox=$('ajaxBox');
$('ajaxBoxMent').innerHTML=ment;
ajaxBox.style.top=yp+eval(hs)/2-100;
ajaxBox.style.left=xp+eval(ws)/2-100;
Element.show(ajaxBox);
}
</script>
사용법은 아래와 같습니다.
function test(){
showAjaxBox();//로딩 박스 보인후에...
var url="Ajax.php";
var myAjax=new Ajax.Request(
url,
{
asynchronous:true,
parameters:pars,
onComplete:function(res){
Element.hide('ajaxBox');// 다 처리한후.. 박스를 숨김..
}
}
);
}
아 그리고 페이지 맨 아래쪽에 이거 넣어주시구요~
상자가 처음에는 안보이게 합니다.
<script>
Element.hide('ajaxBox');
</script>
ps ) <img src="/images/ajax-loader.gif"> 로딩에 쓸 이미지는 여기에서 보고 원하는데로 만들어서 가져오면 됩니다.~
감사합니다 _^_
# by | 2008/10/26 23:30 | ajax | 트랙백 | 덧글(1)
☞ 내 이글루에 이 글과 관련된 글 쓰기 (트랙백 보내기) [도움말]