2. 버튼 위젯
페이지 정보
작성자 관리자 댓글 0건 조회 1,366회 작성일 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>
실습 : 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>
실습 : 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>
실습 : 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>
실습 : 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>
댓글목록
등록된 댓글이 없습니다.