하이브리드앱

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


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

7. 폼 만들기(1)

페이지 정보

작성자 관리자 댓글 0건 조회 531회 작성일 22-01-10 16:06

본문

7. 폼 만들기(1)

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

<h1>폼</h1>

</div>

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

<label for="txtInput">텍스트<input type="text" id="txtInput" placeholder="이름 입력"></label>

<label for="txtSearch">검색<input type="search" id="txtSearch"></label>

<label for="txtNumber">Number<input type="number" id="txtNumber"></label>


</div>

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

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

</div>

</div>

</body>

</html>



1.PNG


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

<h1>폼</h1>

</div>

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

<label for="txtDate">Date<input type="date"id="txtDate"></label>

<label for="txtMonth">Month<input type="month"id="txtMonth"></label>

<label for="txtWeek">Week<input type="week"id="txtWeek"></label>

<label for="txtTime">Time<input type="time"id="txtTime"></label>


</div>

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

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

</div>

</div>

</body>

</html>



2.PNG


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

<h1>폼</h1>

</div>

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

<label for="txtEmail">Email<input type="email"id="txtEmail" data-mini="true"></label>

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

<label for="txtUrl">URL</label><input type="url"id="txtUrl" data-theme="b">

</div>

</div>

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

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

</div>

</div>

</body>

</html>



3.PNG



실습 : jMobile07.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>폼</h1>

</div>

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

<label>선택1<input type="checkbox" id="chk1"></label>

<label>선택2<input type="checkbox" id="chk2"></label>

<label>선택3<input type="checkbox" id="chk3"></label>

<div id="div1"></div>

</div>

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

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

</div>

</div>

</body>

</html>



4.PNG


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

$('#div1').text("선택1 :"+$('#chk1').is(":checked")+","+

"선택2 :"+$('#chk2').is(":checked")+","+

"선택3 :"+$('#chk3').is(":checked"));

};

var init = function() {

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

select();

});

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

select();

});

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

select();

});

};

$(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">

<label>선택1<input type="checkbox" id="chk1"></label>

<label>선택2<input type="checkbox" id="chk2"></label>

<label>선택3<input type="checkbox" id="chk3"></label>

<div id="div1"></div>

</div>

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

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

</div>

</div>

</body>

</html>



5.PNG



실습 : jMobile08.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>폼</h1>

</div>

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

<label>선택1<input type="checkbox" id="chk1"></label>

<label>선택2<input type="checkbox" id="chk2"></label>

<label>선택3<input type="checkbox" id="chk3"></label>

<label>선택4<input type="checkbox" id="chk4"></label>

<label>선택5<input type="checkbox" id="chk5"></label>

<label>선택6<input type="checkbox" id="chk6"></label>

<div id="div1"></div>

<div id="div2"></div>

<div id="div3"></div>

<div id="div4"></div>

<div id="div5"></div>

<div id="div6"></div>

</div>

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

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

</div>

</div>

</body>

</html>



6.PNG


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

    $.each($("input"),function(key, obj){

if($(obj).is(":checked") == true){

//console.log(key);

$('#div'+(key+1)).text('선택'+(key+1)+'이 체크됨');

}else{

$('#div'+(key+1)).text('');

}

});

};

var init = function() {

$('input').change(function(){

select();

});

};

$(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">

<label>선택1<input type="checkbox" id="chk1"></label>

<label>선택2<input type="checkbox" id="chk2"></label>

<label>선택3<input type="checkbox" id="chk3"></label>

<label>선택4<input type="checkbox" id="chk4"></label>

<label>선택5<input type="checkbox" id="chk5"></label>

<label>선택6<input type="checkbox" id="chk6"></label>

<div id="div1"></div>

<div id="div2"></div>

<div id="div3"></div>

<div id="div4"></div>

<div id="div5"></div>

<div id="div6"></div>

</div>

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

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

</div>

</div>

</body>

</html>



7.PNG



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

    $.each($("[name=radioGroup]"),function(key, obj){

if($(obj).is(":checked") == true){

//console.log(key);

$('#div1').text('선택'+(key+1)+'이 체크됨');

}

});

    $.each($("[name=radioGroupV]"),function(key, obj){

if($(obj).is(":checked") == true){

//console.log(key);

$('#Vdiv1').text('선택'+(key+1)+'이 체크됨');

}

});

    $.each($("[name=radioGroupH]"),function(key, obj){

if($(obj).is(":checked") == true){

//console.log(key);

$('#Hdiv1').text('선택'+(key+1)+'이 체크됨');

}

});

};

var init = function() {

$('[name=radioGroup]').on("change", function(){

select();

});

$('[name=radioGroupV]').on("change", function(){

select();

});

$('[name=radioGroupH]').on("change", function(){

select();

});

};

$(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">

<label>선택1<input name ="radioGroup" type="radio" id="radio1"></label>

<label>선택2<input name ="radioGroup" type="radio" id="radio2"></label>

<label>선택3<input name ="radioGroup" type="radio" id="radio3"></label>

<div id="div1"></div>

<fieldset data-role="controlgroup">

<label>선택1<input name ="radioGroupV" type="radio" id="Vradio1"></label>

<label>선택2<input name ="radioGroupV" type="radio" id="Vradio2"></label>

<label>선택3<input name ="radioGroupV" type="radio" id="Vradio3"></label>

<div id="Vdiv1"></div>

</fieldset>

<fieldset data-role="controlgroup" data-type="horizontal">

<label>선택1<input name ="radioGroupH" type="radio" id="Hradio1"></label>

<label>선택2<input name ="radioGroupH" type="radio" id="Hradio2"></label>

<label>선택3<input name ="radioGroupH" type="radio" id="Hradio3"></label>

<div id="Hdiv1"></div>

</fieldset>

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

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

</div>

</div>

</body>

</html>



8.PNG



실습 : jMobile10.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("속도 : "+$('#slider5').val()+"km/h");

}

var init = function(){

$('#slider5').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">

<input type="range" id="slider1" min="0" max="100" value="50" data-theme="b"/>

<input type="range" id="slider2" min="0" max="100" value="50" data-track-theme="b"/>

<input type="range" id="slider3" min="0" max="100" value="50" step="10"/>

<input type="range" id="slider4" min="0" max="100" value="50" data-popup-enabled="true"/>

<input type="range" id="slider5" min="0" max="100" value="50" data-show-value="true"/>

<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>



9.PNG



댓글목록

등록된 댓글이 없습니다.


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

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

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