하이브리드앱

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

8. 폼 만들기(2)

페이지 정보

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

본문

8. 폼 만들기(2)

실습 : jMobile11.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 output = function(){

$('#speed').text("속도 제한범위 : "+$('#slider1').val()+"km/h"+" ~ "+

$('#slider2').val()+"km/h");

}

var init = function(){

$('#slider1').change(function(){

output();

});

$('#slider2').change(function(){

output();

});

};

$(document).bind("pageinit", init);

</script>

</head>

<body>

<div data-role="page">

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

<h1>슬라이더</h1>

</div>

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

<div data-role="rangeslider">

<input type="range" id="slider1" min="0" max="100" value="20">

<input type="range" id="slider2" min="0" max="100" value="50">

</div>

</div>

<div class="ui-corner-all"> 

<div class="ui-bar ui-bar-a"><h3>속도범위</h3></div>

<div class="ui-body ui-body-a">

<p id="speed"></p>

</div>

</div>

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

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

</div>

</div>

</body>

</html>



10.PNG



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


</head>

<body>

<div data-role="page">

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

<h1>slelect 폼</h1>

</div>

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

<select id="selBox" data-iconpos="left" disabled>

<option value="m1">메뉴1</option>

<option value="m2">메뉴2</option>

<option value="m3">메뉴3</option>

<option value="m4" selected>메뉴4</option>

</select>

<select id="selBox2">

  <option>메뉴를 선택하세요</option>

   <optgroup label="중화요리">

 <option value="m1">짬뽕</option>

 <option value="m2">짜장면</option>

 <option value="m3">볶음밥</option>

 <option value="m4">잡채밥</option>

</optgroup>

<optgroup label="한식">

 <option value="m1">김치찌개</option>

 <option value="m2">비빔밥</option>

 <option value="m3">된장찌개</option>

 <option value="m4">순두부</option>

</optgroup>

</select>


</div>

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

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

</div>

</div>

</body>

</html>




11.PNG



실습 : jMobile12.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 output = function() {

$('#region').text($('#regionSel').val()+": "+

$('#regionSel').find(":selected").text());

};

var init = function(){

$('#regionSel').change(function(){

output();

});

}

$(document).bind("pageinit", init);

</script>

</head>

<body>

<div data-role="page">

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

<h1>slelect 폼</h1>

</div>

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

<label for="regionSel">지역선택</label>

<select id="regionSel">

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

<option value="kyungi">경기</option>

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

<option value="pusan" selected>부산</option>

<option value="daegu">대구</option>

</select>

<div class="ui-corner-all">

<div class="ui-bar ui-bar-a"><h3>지역선택</h3></div>

<div class="ui-body ui-body-a">

<p id="region"></p>

</div>

</div>


</div>

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

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

</div>

</div>

</body>

</html>



12.PNG



실습 : jMobile13.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 output = function() {

$('#region').text($('#regionSel').val()+": "+

$('#regionSel').find(":selected").text());

};

var init = function(){

$('#regionSel').change(function(){

output();

});

}

$(document).bind("pageinit", init);

</script>

</head>

<body>

<div data-role="page">

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

<h1>slelect 폼</h1>

</div>

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

<label for="regionSel">지역선택</label>

<select id="regionSel" data-native-menu="false" multiple="multiple">

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

<option value="kyungi">경기</option>

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

<option value="pusan" selected>부산</option>

<option value="daegu">대구</option>

</select>

<select id="selBox2" data-native-menu="false" multiple="multiple">

  <option>메뉴를 선택하세요</option>

   <optgroup label="중화요리">

 <option value="m1">짬뽕</option>

 <option value="m2">짜장면</option>

 <option value="m3">볶음밥</option>

 <option value="m4">잡채밥</option>

</optgroup>

<optgroup label="한식">

 <option value="m1">김치찌개</option>

 <option value="m2">비빔밥</option>

 <option value="m3">된장찌개</option>

 <option value="m4">순두부</option>

</optgroup>

</select>

<div class="ui-corner-all">

<div class="ui-bar ui-bar-a"><h3>지역선택</h3></div>

<div class="ui-body ui-body-a">

<p id="region"></p>

</div>

</div>

</div>

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

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

</div>

</div>

</body>

</html>




13.PNG


실습 : jMobile14.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 output = function() {

$('#swSel').text($('#switch').find(":selected").text());

};

var init = function(){

$('#switch').change(function(){

output();

});

}

$(document).bind("pageinit", init);

</script>

</head>

<body>

<div data-role="page">

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

<h1>스위치 폼</h1>

</div>

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

   <div class="ui-field-contain">

   <label for="switch">불루투스

<select id="switch" data-role="slider" data-mini="true" data-inline="true">

<option value="1" >OFF</option>

<option value="2" >ON</option>

</select>

</label>

</div>

<div class="ui-corner-all">

<div class="ui-bar ui-bar-a"><h3>스위치선택</div>

<div class="ui-body ui-body-a">

<p id="swSel"></p>

</div>

</div>

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

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

</div>

</div>

</body>

</html>



14.PNG


댓글목록

등록된 댓글이 없습니다.

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

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

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