13. 메뉴/판낼(panel)
페이지 정보
작성자 관리자 댓글 0건 조회 1,192회 작성일 22-01-11 15:25본문
실습 : jMobile28.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>제이쿼리 모바일 연습</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed" id="header">
<h3>Collapsible Menu</h3>
</div>
<div role="main" class="ui-content">
<div data-role="collapsible" data-inset="false" data-theme="a" data-content-theme="a">
<h4>Heading</h4>
<p>베이직 Callapsible Menu</p>
</div>
<div data-role="collapsible" data-mini="true">
<h4>Heading</h4>
<p>베이직 Callapsible Menu</p>
</div>
<div data-role="collapsible" data-iconpos="right" data-collapsed-icon="carat-d" data-expanded-icon="carat-u">
<h4>Heading</h4>
<p>베이직 Callapsible Menu</p>
</div>
<div data-role="collapsible" data-inset="false">
<h4>리스트메뉴</h4>
<ul data-role="listview">
<li><a href="#">메뉴1</a></li>
<li><a href="#">메뉴2</a></li>
<li><a href="#">메뉴3</a></li>
<li><a href="#">메뉴4</a></li>
</ul>
</div>
<div data-role="collapsible" data-inset="false">
<h4>리스트메뉴</h4>
<ul data-role="listview">
<li><a href="#">메뉴1</a></li>
<li><a href="#">메뉴2</a></li>
<li><a href="#">메뉴3</a></li>
<li><a href="#">메뉴4</a></li>
</ul>
</div>
<a data-role="button" href="#popCollapsible" data-rel="popup">Callapsible Popup</a>
<div data-role="popup" id="popCollapsible" data-theme="none">
<div data-role="collapsible-set" data-theme="b" data-collapsed-icon="arrow-r"
data-expanded-icon="arrow-d" style="magin:0; width:250px;">
<div data-role="collapsible" data-inset="false">
<h3>프로야구</h3>
<ul data-role="listview">
<li><a href="#" data-rel="dialog">두산베어스</a></li>
<li><a href="#" data-rel="dialog">NC다이노스</a></li>
<li><a href="#" data-rel="dialog">넥센히어로즈</a></li>
<li><a href="#" data-rel="dialog">LG트윈스</a></li>
</ul>
</div>
<div data-role="collapsible" data-inset="false">
<h3>프로축구</h3>
<ul data-role="listview">
<li><a href="#" data-rel="dialog">전북현대</a></li>
<li><a href="#" data-rel="dialog">서울유나이티드</a></li>
<li><a href="#" data-rel="dialog">포항스틸러스</a></li>
<li><a href="#" data-rel="dialog">울산현대</a></li>
</ul>
</div>
<div data-role="collapsible" data-inset="false">
<h3>프로농구</h3>
<ul data-role="listview">
<li><a href="#" data-rel="dialog">오리온스</a></li>
<li><a href="#" data-rel="dialog">전자랜드</a></li>
<li><a href="#" data-rel="dialog">삼성</a></li>
<li><a href="#" data-rel="dialog">현대모비스</a></li>
</ul>
</div>
</div>
</div>
</div>
<div data-role="footer" data-position="fixed">
<h3>jQuery</h3>
</div>
</div>
</body>
</html>
실습 : jMobile29.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>제이쿼리 모바일 연습</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">
var init = function(){
$('#openPanel1').click(function(){
$('#mypanel').panel('open');
});
$('#closePanel1').click(function(){
$('#mypanel').panel('close');
});
};
$(document).ready(init);
</script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="panel" id="mypanel" data-dismissible="false" data-swipe-close="false" data-position="right" data-position-fixed="true">
<h2>My Panel 제목</h2>
<P>기본패널</p>
<a href="#page1" data-rel="close" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-btn-a ui-icon-delete ui-btn-icon-left">페널닫기</a>
</div>
<div data-role="panel" id="mypanel2" data-display="overlay" data-dismissible="false" data-swipe-close="false" data-position="right">
<h2>My Panel 제목</h2>
<P>기본패널</p>
<a href="#page1" data-rel="close" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-btn-a ui-icon-delete ui-btn-icon-left">페널닫기</a>
</div>
<div data-role="panel" id="mypanel3" data-display="push" data-dismissible="false" data-swipe-close="false" data-position="right">
<h2>My Panel 제목</h2>
<P>기본패널</p>
<a href="#page1" data-rel="close" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-btn-a ui-icon-delete ui-btn-icon-left">페널닫기</a>
</div>
<div data-role="header" data-position="fixed" id="header">
<h3>panel</h3>
</div>
<div role="main" class="ui-content">
<p>아래의 버튼을 클릭해서 패널을 열어보세요!!</p>
<a href="#mypanel" class="ui-btn ui-btn-inline ui-corner-all ui-shadow"> Reveal 열기</a>
<a href="#mypanel2" class="ui-btn ui-btn-inline ui-corner-all ui-shadow"> Overlay 열기</a>
<a href="#mypanel3" class="ui-btn ui-btn-inline ui-corner-all ui-shadow">Push 열기</a>
<button id="openPanel1">open패널</button>
<button id="closePanel1">close패널</button>
<p>내용1</p>
<p>내용1</p>
<p>내용1</p>
<p>내용1</p>
<p>내용1</p>
<p>내용1</p>
<p>내용1</p>
<p>내용1</p>
<p>내용1</p>
<p>내용1</p>
<p>내용1</p>
<p>내용1</p>
<p>내용1</p>
<p>내용1</p>
<p>내용1</p>
<p>내용1</p>
</div>
<div data-role="footer" data-position="fixed">
<h3>jQuery</h3>
</div>
</div>
</body>
</html>
댓글목록
등록된 댓글이 없습니다.