5. 레이아웃
페이지 정보
작성자 관리자 댓글 0건 조회 530회 작성일 22-01-09 22:45본문
5. 레이아웃
ui-grid-a : 2개의 그리드
ui-grid-b : 3개의 그리드
ui-grid-c : 4개의 그리드
ui-grid-d : 5개의 그리드
실습 : jMobile05.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">
<div class="ui-grid-a">
<div class="ui-block-a" style="background-color:yellow">1블럭(열/컬럼)</div>
<div class="ui-block-b" style="background-color:lightgreen">2블럭(열/컬럼)</div>
</div><br/>
<div class="ui-grid-b">
<div class="ui-block-a" style="background-color:yellow">1블럭</div>
<div class="ui-block-b" style="background-color:gray">2블럭</div>
<div class="ui-block-c" style="background-color:green">3블럭</div>
</div><br/>
<div class="ui-grid-c">
<div class="ui-block-a" style="background-color:yellow">1블럭</div>
<div class="ui-block-b" style="background-color:gray">2블럭</div>
<div class="ui-block-c">3블럭</div>
<div class="ui-block-d" style="background-color:green">4블럭</div>
</div><br/>
<div class="ui-grid-d">
<div class="ui-block-a" style="background-color:yellow">1블럭</div>
<div class="ui-block-b" style="background-color:gray">2블럭</div>
<div class="ui-block-c">3블럭</div>
<div class="ui-block-d" style="background-color:green">4블럭</div>
<div class="ui-block-e" style="background-color:red">5블럭</div>
</div><br><br>
<div data-role="footer" data-position="fixed">
<h1>powered by jQueryMobile.com</h1>
</div>
</div>
</body>
</html>
실습 : jMobile05.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">
<div class="ui-grid-a">
<div class="ui-block-a">1</div>
<div class="ui-block-b">2</div>
</div>
<div class="ui-grid-a">
<div class="ui-block-a">3</div>
<div class="ui-block-b">4</div>
</div> <br><br>
<div class="ui-grid-a">
<div class="ui-block-a"><input type="button" value="버튼1"></div>
<div class="ui-block-b"></div>
</div>
<div class="ui-grid-c">
<div class="ui-block-a" style="background-color:yellow"></div>
<div class="ui-block-b" style="background-color:gray"><input type="button" value="버튼2"/></div>
<div class="ui-block-c"><input type="button" value="버튼3"/></div>
<div class="ui-block-d" style="background-color:green"></div>
</div>
<div class="ui-grid-b">
<div class="ui-block-a" style="background-color:yellow"><input type="button" value="버튼4"/></div>
<div class="ui-block-b" style="background-color:gray"><input type="button" value="버튼5"/></div>
<div class="ui-block-c" style="background-color:green"><input type="button" value="버튼6"/></div>
</div>
<div class="ui-grid-d">
<div class="ui-block-a"><button class="ui-btn ui-icon-action ui-btn-icon-notext ui-btn-inline"></button></div>
<div class="ui-block-b"><button class="ui-btn ui-icon-heart ui-btn-icon-notext ui-btn-inline"></button></div>
<div class="ui-block-c"><button class="ui-btn ui-icon-check ui-btn-icon-notext ui-btn-inline"></button></div>
<div class="ui-block-d"><button class="ui-btn ui-icon-clock ui-btn-icon-notext ui-btn-inline"></button></div>
<div class="ui-block-e"><button class="ui-btn ui-icon-lock ui-btn-icon-notext ui-btn-inline"></button></div>
</div>
<div data-role="footer" data-position="fixed">
<h1>powered by jQueryMobile.com</h1>
</div>
</div>
</body>
</html>
댓글목록
등록된 댓글이 없습니다.