하이브리드앱

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


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

2. 버튼 위젯

페이지 정보

작성자 관리자 댓글 0건 조회 506회 작성일 22-01-09 21:22

본문

2. 버튼 위젯

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

<a data-role="button">기본 버튼</a>

<button>기본버튼1</button>

<input type="button" value="기본 input버튼">

</div>

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

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

</div>

</div>

</body>

</html>




1.PNG



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

<button data-role="button" data-enhanced="false">버튼</button>

<input type="button" data-enhanced="true" value="버튼" />

<button data-corners="false">버튼</button>

<input type="button" data-corners="false" value="버튼"/>

</div>

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

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

</div>

</div>

</body>

</html>



2.PNG



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

<button data-icon="home" data-iconpos="left">아이콘버튼</button>

<button data-icon="home" data-iconpos="right">아이콘버튼</button>

<button data-icon="home" data-iconpos="top">아이콘버튼</button>

<button data-icon="home" data-iconpos="bottom">아이콘버튼</button>

<input type="button" data-icon="home" data-iconpos="right" value="아이콘 버튼" />


</div>

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

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

</div>

</div>

</body>

</html>



3.PNG



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

<div class="ui-input-bun ui-btn ui-icon-home ui-btn-icon-notext"></div>

<button data-icon="check" data-iconpos="left">버튼</button>

<button data-icon="carat-r" data-iconpos="right">버튼</button>

<button data-icon="carat-l" data-theme="b" data-iconpos="left">버튼</button>

<button data-icon="carat-u" data-iconshadow="true" data-iconpos="left">버튼</button>

<button data-icon="carat-d" data-theme="b" data-iconpos="left" data-iconshadow="true">버튼</button>


</div>

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

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

</div>

</div>

</body>

</html>



4.PNG


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

<button data-inline="true">인라인버튼</button>

<input type="button" data-inline="true" value="인라인">

<button data-mini="true">작은 버튼</button>

<input type="button" data-mini="true" value="작은 버튼">

</div>

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

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

</div>

</div>

</body>

</html>



5.PNG


댓글목록

등록된 댓글이 없습니다.


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

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

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