-
Div Loading 이미지 영역 DimmFront-End/jQuery 2013. 7. 4. 11:30
실행화면
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>jQuery showLoading example</title>
<!-- <link href="css/showLoading.css" rel="stylesheet" media="screen" /> -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="showloading.js"></script>
<style type="text/css">
.loading-indicator {
height: 136px;
width: 136px;
background: url( 'loading.gif' );
background-repeat: no-repeat;
background-position: center center;
}
.loading-indicator-overlay {
background-color: #FFFFFF;
opacity: 0.6;
filter: alpha(opacity = 60);
}
.small-loading-indicator {
height: 136px;
width: 136px;
background: url( 'small_loading.gif' );
background-repeat: no-repeat;
background-position: center center;
}
.small-loading-indicator-overlay {
background-color: #FFFFFF;
opacity: 0.6;
filter: alpha(opacity = 60);
}
a {
color: blue;
cursor:pointer;
text-decoration: underline;
}
div.instructions_container {
float: left;
width: 350px;
margin-right: 50px;
}
div#activity_pane {
float:left;
width: 350px;
height: 200px;
border: 1px solid #CCCCCC;
background-color: #EEEEEE;
padding-top: 200px;
text-align: center;
}
div.example_links
.link_category {
margin-bottom: 15px;
}
.loading-indicator-bars {
background-image: url('images/loading-bars.gif');
width: 150px;
}
</style>
<script type="text/javascript">
jQuery(document).ready(
function() {
//
// When a user clicks the 'loading-default' link,
// call showLoading on the activity pane
// with default options
//
jQuery('a.loading-default').click(
function() {
jQuery('#activity_pane').showSmallLoading();
// jQuery('#activity_pane').showLoading();
}
);
//
// When a user clicks the 'loading-ajax' link,
// call showLoading, sleep, then call hide loading
// with default options
//
jQuery('a.loading-ajax').click(
function() {
jQuery('#activity_pane').showLoading(
{
'afterShow':
function() {
setTimeout( "jQuery('#activity_pane').hideLoading()", 1000 );
}
}
);
}
);
//
// When a user clicks the 'loading-bars' link,
// call showLoading with addClass specified
//
jQuery('a.loading-bars').click(
function() {
jQuery('#activity_pane').showLoading(
{
'addClass': 'loading-indicator-bars'
}
);
}
);
//
// When a user clicks the 'loading-hide' link,
// call hideLoading on the activity pane
//
jQuery('a.loading-hide').click(
function() {
jQuery('#activity_pane').hideSmallLoading();
// jQuery('#activity_pane').hideLoading();
}
);
}
);
</script>
</head>
<body>
<div class="instructions_container">
<div class="example_links">
<div class="link_category">
<div class="link">
<a class="loading-default">Show default loading indicator</a>
</div>
<div class="link">
<a class="loading-hide">Hide default loading indicator</a>
</div>
</div>
<div class="link_category">
<div class="link">
<a class="loading-ajax">simulate 1-second Ajax load</a>
</div>
</div>
<div class="link_category">
<div class="link">
<a class="loading-bars">show 'bars'-style loading indicator</a>
</div>
<div class="link">
<a class="loading-hide">Hide 'bars'-style indicator</a>
</div>
</div>
</div>
<div class="usage">
Usage with jQuery load method:
<pre>
jQuery('#activity_pane').showLoading();
jQuery('#activity_pane').load(
'/path/to/my/url',
{},
function() {
//
//this is the ajax callback
//
jQuery('#activity_pane').hideLoading();
}
);
</pre>
</div>
</div>
<div id="activity_pane">
Here is where we will load something via ajax.
<br />
This container <b>must</b> have an id attribute
</div>
<div style="clear:both;"></div>
</body>
</html>
필요 소스 :
'Front-End > jQuery' 카테고리의 다른 글
javascript 정규식을 이용해서 영문, 숫자 혼용만 사용하는 비밀번호 확인 (0) 2013.11.19 jquery 주민등록번호 외국인 / 내국인 유효성 검사 (0) 2013.11.19 한글 또는 영문만이 존재하는지 체크하는 자바스크립트 (0) 2013.11.19 웹앱 롱터치 clipboard 현상 막기 (0) 2013.08.20 Jquery js file Error 대처법 (0) 2013.07.16 날짜값 + - 현재 날짜 가져오기 (0) 2013.07.04 JSON object 복사 / clone (0) 2013.05.24 Jquery select Add or Remove (0) 2012.11.14 Jquery Selector 예시 (0) 2012.11.08 제이쿼리 체크박스 (0) 2012.11.06 댓글
loading_Test.html
showloading.js