[Jquery] - 스르륵 열리는 알림창 사용법 및 소스(자세한 사항은 댓글로 문의하세요)
Jquery & Mobile 2011. 8. 1. 10:44
jquery.jcarousel.js
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<title>스타일 미리보기</title>
<script type="text/javascript" src="/admin/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/admin/js/jquery.jcarousel.js"></script>
<link rel="stylesheet" type="text/css" href="/admin/css/skin.css" />
<link rel="stylesheet" type="text/css" href="/admin/css/alert.css" />
<script type="text/javascript">
var myMessages = ['info','warning','error','success']; // define the messages types
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel();
});
function hideAllMessages()
{
var messagesHeights = new Array(); // this array will store height for each
for (i=0; i<myMessages.length; i++)
{
messagesHeights[i] = $('.' + myMessages[i]).outerHeight(); // fill array
$('.' + myMessages[i]).css('bottom', -messagesHeights[i]); //move element outside viewport
}
}
function showMessage(type)
{
$('.'+ type +'-trigger').click(function(){
hideAllMessages();
$('.'+type).animate({bottom:"0"}, 500);
});
}
$(document).ready(function(){
// Initially, hide them all
hideAllMessages();
// Show message
for(var i=0;i<myMessages.length;i++)
{
showMessage(myMessages[i]);
}
// When message is clicked, hide it
$('#hidemsg').click(function(){
$('.message').animate({bottom: -$('.message').outerHeight()}, 500);
});
});
</script>
</head>
<body>
<div style="width:<?=$div_width?>;">
<div>
<button class="trigger info-trigger">펼침</button>
</div>
<div class="info message" style="clear:both;">
<button id="hidemsg">닫기</button>
<div id="wrap">
<ul id="mycarousel" class="jcarousel-skin-tango">
<li>열립니다.</li>
</ul>
</div>
</div>
</div>
</body>
</html>
'Jquery & Mobile' 카테고리의 다른 글
| [JqueryMobile] - 화면의 가로, 세로 사이즈 구하는 방법 (0) | 2011.08.04 |
|---|---|
| [Jquery] - 웹디자이너분들 참고할만한 Jquery 사이트 (0) | 2011.08.01 |
| [JqueryMobile] - Count Bubble 사용법 (0) | 2011.07.22 |
| [JqueryMobile] - JqueryMobile pageshow 사용법 (0) | 2011.07.20 |
| [JqueryMobile] - JqueryMobile Iscroll 예제 (0) | 2011.07.12 |