제이쿼리 모바일 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>