하이브리드앱

본문 바로가기
사이트 내 전체검색


하이브리드앱
하이브리드앱

13. 메뉴/판낼(panel)

페이지 정보

작성자 관리자 댓글 0건 조회 488회 작성일 22-01-11 15:25

본문

13. 메뉴/판낼(panel)

실습 : 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>



1.PNG


실습 : 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>



2.PNG




댓글목록

등록된 댓글이 없습니다.


개인정보취급방침 서비스이용약관 모바일 버전으로 보기 상단으로

TEL. 063-469-4551 FAX. 063-469-4560 전북 군산시 대학로 558
군산대학교 컴퓨터정보공학과

Copyright © www.leelab.co.kr. All rights reserved.