제이쿼리 모바일 Panel (오른쪽 또는 왼쪽 화면 띄우기)

The position of the panel on the screen is set by the data-position attribute.

The default value of the attribute is left, meaning it will appear from the left edge of the screen.

Specify data-position="right" for it to appear from the right edge instead.

The display mode of the panel is set by the data-display attribute. The value of the attribute defaults to reveal, meaning the panel will sit under the page and reveal as the page slides away. Specify data-display="overlay" for the panel to appear on top of the page contents. A third mode, data-display="push" animates both the panel and page at the same time.

 

 

data-position="right" //오른쪽에서 나오는 panel

 

 

data-display="overlay" // panel 효과

data-display="push"  // panel 효과

 

data-rel="close"  // panel 닫기 옵션

//반드시 아래와 같이 제이쿼리 로드할 수 있는 url 삽입해주세요
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<a href="#myPanel">
	여기 클릭하면
</a>

<div data-role="panel" id="myPanel" data-display="overlay" data-position="right"> 
   여기 모바일 panel 화면이 보여집니다.
   <img class="float-right" data-rel="close" src="closebtn">
</div> 

 

 

 

 

출처: demos.jquerymobile.com/1.4.5/panel/