하이브리드앱

본문 바로가기
사이트 내 전체검색
하이브리드앱
하이브리드앱

12. 툴바/내비게이션바/팝업

페이지 정보

작성자 관리자 댓글 0건 조회 1,143회 작성일 22-01-11 15:14

본문

12. 툴바/내비게이션바/팝업

실습 : jMobile22.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" data-fullscreen="true">

<a href="#" class="ui-btn-left ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-left ui-icon-carat-l">cancel</a>

<h1>툴바</h1>

<button class="ui-btn-right ui-btn ui-btn-b ui-btn-inline ui-mini ui-corner-all ui-btn-icon-right ui-icon-check">저장</button>

</div>

<div role="main" class="ui-content">

</div>

<div data-role="footer" data-position="fixed"> 

<h1>powered by jQueryMobile.com</h1>

</div>

</div>

</body>

</html>



1.PNG



실습 : jMobile23.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">

<div data-role="controlgroup" data-type="horizontal" class="ui-mini ui-btn-left">

<a href="#" class="ui-btn ui-btn-icon-right ui-icon-plus">추가</a>

<a href="#" class="ui-btn ui-btn-icon-right ui-icon-arrow-u">위</a>

<a href="#" class="ui-btn ui-btn-icon-right ui-icon-arrow-d">아래</a>

</div>

<h3>툴바연습</h3>

</div>

<div role="main" class="ui-content">

<div data-role="footer" data-position="fixed"> 

<div class="ui-bar">

<label for="selbox1" class="ui-hidden-accessible">지역</label>

<select name="selbox1" data-mini="true" data-inline="true">

<option value="seoul">서울</option>

<option value="seoul">인천</option>

<option value="seoul">광주</option>

<option value="seoul">부산</option>

</select>

</div>

</div>

</div>

</body>

</html>



2.PNG



실습 : jMobile24.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">

<h3>네비게이션바</h3>

</div>

<div data-role="navbar" data-iconpos="right">

<ul>

<li><a href="#" data-icon="grid" class="ui-btn-active">요약</a></li>

<li><a href="#" data-icon="star">즐겨찾기</a></li>

<li><a href="#" data-icon="gear">설정</a></li>

</ul>

</div>

<div role="main" class="ui-content">

</div>

<div data-role="footer" data-position="fixed"> 

<h3>jQuery</h3>

</div>

</div>

</body>

</html>



3.PNG



실습 : jMobile25.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">

<h3>팝업</h3>

</div>

<div role="main" class="ui-content">

<a href="#popupBasic" data-rel="popup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">기본 팝업</a>

<div data-role="popup" id="popupBasic">

<p>기본 팝업창 입니다..</p>

</div>

<p>툴팁을 알려줍니다.<a href="#popupInfo" data-rel="popup" 

class="ui-btn ui-alt-icon ui-nodisc-icon ui-btn-inline ui-icon-info ui-btn-icon-notext">툴팁</a></p>

<div data-role="popup" id="popupInfo" class="ui-content" data-theme="a" style="max-width:250px;">

<p>툴팁 정보입니다..</p>

</div>

<a href="#img1" data-rel="popup" data-position-to="window">

<img src="http://shopping.phinf.naver.net/20161024_1/03e4394c-c9b9-40aa-a1b5-d01e2f6259a7.jpg" lazyimg="http://shopping.phinf.naver.net/20161024_1/03e4394c-c9b9-40aa-a1b5-d01e2f6259a7.jpg" width="86" height="107">

</a>

<a href="#img2" data-rel="popup" data-position-to="window">

<img src="http://shopping.phinf.naver.net/20161026_0/83f2bfe6-67b8-4ea8-9a67-328baebaa67f.jpg" lazyimg="http://shopping.phinf.naver.net/20161026_0/83f2bfe6-67b8-4ea8-9a67-328baebaa67f.jpg" width="86" height="107">

</a>

<a href="#img3" data-rel="popup" data-position-to="window">

<img src="http://shopping.phinf.naver.net/20161025_23/cf5dcb5e-be4b-41bc-b209-bc59a05f044e.jpg" lazyimg="http://shopping.phinf.naver.net/20161025_23/cf5dcb5e-be4b-41bc-b209-bc59a05f044e.jpg" width="86" height="107">

</a>

<div data-role="popup" id="img1" data-overlay-theme="b" data-theme="b" data-corners="false">

<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>

<img class="popphoto" src="http://cdnok.makeshop.co.kr/shopimages/label55/0460040002623.jpg?10281151" style="max-height:512px;">

</div>

<div data-role="popup" id="img2" data-overlay-theme="b" data-theme="b" data-corners="false">

<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>

<img class="popphoto" src="http://cdnok.makeshop.co.kr/shopimages/label55/0460040001023.gif?10251742" style="max-height:512px;">

</div>

<div data-role="popup" id="img3" data-overlay-theme="b" data-theme="b" data-corners="false">

<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>

<img class="popphoto" src="http://cdnok.makeshop.co.kr/shopimages/label55/0460040002673.gif?10251845" style="max-height:512px;">

</div>

<div data-role="footer" data-position="fixed"> 

<h3>jQuery</h3>

</div>

</div>

</body>

</html>



4.PNG



실습 : jMobile26.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>팝업</h3>

</div>

<div role="main" class="ui-content">

<a href="#closeBtnLeft" data-rel="popup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">왼쪽닫기버튼</a>

<div data-role="popup" id="closeBtnLeft" class="ui-content" style="max-width:250px">

<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-left"></a>

<p>왼쪽 클로스 버튼 </p>

</div>

<a href="#undismissible" data-rel="popup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">닫기버튼</a>

<div data-role="popup" data-dismissible="false" id="undismissible" class="ui-content" style="max-width:250px">

<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-left"></a>

<p>클로스 버튼 </p>

</div>

<a href="#posSelector" data-rel="popup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline" data-position-to="#header">헤더팝업설정버튼</a>

<div data-role="popup" id="posSelector" class="ui-content" data-theme="a">

<p>지정된 팝업 위치에서 팝업된다...</p>

</div>

<a href="#transparent" data-rel="popup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline" data-position-to="#header">투명배경팝업</a>

<div id="transparent" data-role="popup" data-theme="none" data-shadow="false">

<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right"></a>

<img src="http://demos.jquerymobile.com/1.4.0/_assets/img/firefox-logo.png" class="popphoto" height="300" width="300" >

</div>

<a href="#login" data-rel="popup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-check ui-btn-icon-left ui-btn-a" data-position-to="window">로그인</a>

<div data-role="popup" id="login" data-theme="a" class="ui-corner-all">

<form action="#">

<div style="padding:10px 20px;">

<h3>로그인</h3>

<label for="id">아이디</label>

<input type="text" id="id" value="" placeholder="사용자 ID 입력" data-theme="a">

<label for="pw">비밀번호</label>

<input type="text" id="pw" value="" placeholder="비밀번호 입력" data-theme="a">

<button type="submit" class="ui-btn ui-corner-all ui-shadow ui-btn-b ui-btn-icon-left ui-icon-check">로그인</button>

</div>

</form>

</div>

</div>

<div data-role="footer" data-position="fixed"> 

<h3>jQuery</h3>

</div>

</div>

</body>

</html>



5.PNG



실습 : jMobile27.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(){

$('#listview li:gt(0)').click(function(){

$('#poplist').popup('close'); //팝업창 닫기

$('#printZone').text('선택메뉴 : '+$(this).text());

});

}

$(document).ready(init);

</script>

</head>

<body>

<div data-role="page">

<div data-role="header" data-position="fixed" id="header">

<h3>팝업</h3>

</div>

<div role="main" class="ui-content">

<a data-role="button" data-inline="true" href="#poplist" data-rel="popup" data-position-to="window">메뉴리스트</a>

<div data-role="popup" id="poplist">

<ul data-role="listview" data-inset="true" id="listview" style="min-width:200px">

<li data-role="list-divider">MENU</li>

<li><a href="#">메뉴1</a></li>

<li><a href="#">메뉴2</a></li>

<li><a href="#">메뉴3</a></li>

<li><a href="#">메뉴4</a></li>

<li><a href="#">메뉴5</a></li>

</ul>

</div>

<a data-role="button" data-rel="popup" href="#popinput">고객설문</a>

<div data-role="popup" id="popinput" style="min-width:25px;padding:20px;">

<form>

<h3>팬 의견</h3>

프로야구 올해 우승팀은?

<input type="text" id="baseballTxt"> 

<input type="button" id="btn" value="확인">

</form>

</div>

<div id="printZone"></div>

</div>

<div data-role="footer" data-position="fixed">

<h3>jQuery</h3>

</div>

</div>

</body>

</html>



6.PNG



실습 : jMobile27.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(){

$('#btn').click(function(){

$('#popinput').popup('close'); //팝업창 닫기

$('#printZone').text('예상 우승팀: '+$("#baseballTxt").val());

});

}

$(document).ready(init);

</script>

</head>

<body>

<div data-role="page">

<div data-role="header" data-position="fixed" id="header">

<h3>팝업</h3>

</div>

<div role="main" class="ui-content">

<a data-role="button" data-inline="true" href="#poplist" data-rel="popup" data-position-to="window">메뉴리스트</a>

<div data-role="popup" id="poplist">

<ul data-role="listview" data-inset="true" id="listview" style="min-width:200px">

<li data-role="list-divider">MENU</li>

<li><a href="#">메뉴1</a></li>

<li><a href="#">메뉴2</a></li>

<li><a href="#">메뉴3</a></li>

<li><a href="#">메뉴4</a></li>

<li><a href="#">메뉴5</a></li>

</ul>

</div>

<a data-role="button" data-rel="popup" href="#popinput">고객설문</a>

<div data-role="popup" id="popinput" style="min-width:25px;padding:20px;">

<form>

<h3>팬 의견</h3>

프로야구 올해 우승팀은?

<input type="text" id="baseballTxt"> 

<input type="button" id="btn" value="확인">

</form>

</div>

<div id="printZone"></div>

</div>

<div data-role="footer" data-position="fixed">

<h3>jQuery</h3>

</div>

</div>

</body>

</html>



7.PNG


댓글목록

등록된 댓글이 없습니다.

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

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

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