[Jquery] - 스르륵 열리는 알림창 사용법 및 소스(자세한 사항은 댓글로 문의하세요)

Jquery & Mobile 2011. 8. 1. 10:44
반응형


<!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>

 

반응형
: