7. 폼 만들기(1)
페이지 정보
작성자 관리자 댓글 0건 조회 1,187회 작성일 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>
실습 : 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>
실습 : 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>
실습 : 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>
실습 : 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>
실습 : 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>
실습 : 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>
실습 : 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>
실습 : 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>
댓글목록
등록된 댓글이 없습니다.