본문 바로가기
WEB

JQEURY MOBILE 모바일 버튼과 리스트뷰

by 둥바 2022. 7. 8.

버튼

- 모바일 화면 구성 요소 중 가장 많이 사용되는 인터페이스

- 사용자와의 상호작용을 위한 가장 단순,유용한 요소

- 링크,폼,아이콘,이미지,그룹 버튼 등

- 모바일 환경에 맞게 최적화된 형식으로 렌더링

- 페이지 간의 이동수단으로 활용

 

버튼 생성의 방법

<a href="#" data-role="button">버튼<a>

<button>버튼</button>

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

 : 세 버튼 모두 태그와 명세법은 다르지만 버튼 모양은 같으며, 버튼 문자열은 가운데로 정렬된다.

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

 <div data-role="page" id="page1">
 	<div data-role="header">
 		<h1>머리말영역(header)</h1>
 	</div>
 	<div data-role="content">
 		<p>컨텐츠영역(content)</p>
 		<a href="#" data-role="button" data-theme="a">버튼1(a테마)</a>
 		<button data-theme="b">버튼2(b테마)</button>
 		<input type="button" value="버튼3">
 	</div>
 	<div data-role="footer" data-position="fixed">
 		<h4>꼬리말영역(footer)</h4>
 	</div>
 </div>
</body>
</html>

기본 버튼 종류

- 링크 버튼 : <a>버튼 가장 많이 활용

- 헤더나 푸터 영역 : <a>링크만으로 버튼 생성 가능

- 콘텐츠 영역 :

<a>태그 안에 data-role="button"속성 명세해야 버튼 생성됨

또한, 버튼 기본 너비가 버튼이 위치한 컨테이너의 전체 너비를 거의 채운다.

 

- 버튼 너비 최소화 : 버튼이 너무 크면 버튼 너비를 문자열 크기에 맞춰 최소화

data-inline="true"속성 (인라인으로 변화)

data-mini="true"속성(상하 여백 제거)

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>link-btn</title>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

 <div data-role="page" id="page1">
 	<div data-role="header" data-position="fixed">
 		<h1>제목영역</h1>
 		<a href="#">a태그 버튼1</a>
 		<a href="#">a태그 버튼2</a>
 	</div>
 	<div data-role="content">
 		<p>컨텐츠영역(content)</p>
 		<a href="#">a태그 버튼3</a>
 		<a href="#" data-role="button">a태그 버튼4</a>
 		<!-- data-inline="true" : 글자의 여백을 제거해서 작은 버튼을 만든다. -->
 		<a href="#" data-role="button" data-inline="true">a태그 버튼5</a>
		<!-- data-mini="true" : 버튼과 글자의 상하 여백을 제거 -->
 		<a href="#" data-role="button" data-mini="true">a태그 버튼6</a>
 		
 	</div>
 	<div data-role="footer" data-position="fixed">
 		<a href="#">a태그버튼7</a>
 		<h4>꼬리말영역(footer)</h4>
 		<a href="#">a태그버튼8</a>
 	</div>
 </div>
</body>
</html>

 

폼 버튼 생성

- 입력이나 수정 등 폼과의 상호작용, 폼의 제출 위한 사용

- <button> 혹은 <input>태그 사용

- 모바일 버튼으로 자동 변환 ) type 속성이 submit, image, reset, button에 해당할 경우

- 고전적인 버튼 모양으로 변화를 원하면 data-role="none"속성 추가

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

 <div data-role="page" id="page1">
 	<div data-role="header">
 		<h1>머리말영역(header)</h1>
 	</div>
 	<div data-role="content">
 		<form>
 			<button>일반</button>
 			<button data-role="none">기존버튼</button>
 			<input type="button" value="입력">
 			<input type="submit" value="제출">
 			<input type="image" value="이미지">
 			<input type="reset" value="재설정">
 		</form>
 	</div>
 	<div data-role="footer" data-position="fixed">
 		<h4>꼬리말영역(footer)</h4>
 	</div>
 </div>
</body>
</html>

아이콘 추가

- 버튼의 의미를 시각적으로 표현하기 위함

- data-icon="아이콘" 속성추가

1) https://api.jquerymobile.com/icons/ 2) https://demos.jquerymobile.com/1.4.5/icons/

 

아이콘 버튼 변형

- 페이지에 버튼 많은 경우, 버튼 크기 줄이기 위해서 문자열 없이 아이콘만 버튼 표시

: data-iconpos="notext" 속성 추가

 

- 위치 변경 시, 기본적으로 왼쪽 정렬되는 것을 버튼 내에서 아이콘 위치 변경 가능

: data-iconpos 속성값으로 top(상), bottom(하), left(좌), right(우)

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

 <div data-role="page" id="page1">
 	<div data-role="header">
 		<h1>머리말영역(header)</h1>
 	</div>
 	<div data-role="content">
 		<p>아이콘</p>
 		<button data-icon="arrow-l">왼쪽방향화살표</button>
 		<input type="button" value="오른쪽방향화살표" data-icon="arrow-r" data-iconpos="right">
 		<input type="button" value="확인" data-icon="check">
 		<a href="#" data-role="button" data-icon="grid">그리드</a>
 		<button data-icon="search" data-iconpos="notext" data-inline="true">검색</button>
 		<a href="#" data-role="button" data-inline="true" data-icon="mail" data-iconpos="notext">메일</a>
 		<button data-icon="star" data-iconpos="top">별</button>
 	</div>
 	<div data-role="footer" data-position="fixed">
 		<h4>꼬리말영역(footer)</h4>
 	</div>
 </div>
</body>
</html>

 

- 사용자 정의 아이콘 : 버튼 생성 마크업 안에 data-icon 속성값으로 고유한 아이콘 이름 지정

<button data-icon="사용자정의 아이콘">버튼 제목</button>

: 추가하는 아이콘의 이름은 미리 정의되어야 한다.

: <style>태그 안에 사용자정의 아이콘 파일 위치와 스타일 속성으로 정의

: 추가하는 CSS클래스 이름은 반드시 'ui-icon-'접두어 뒤에 사용자 정의 아이콘 이름 붙여 명세

 

<style>

  .ui-icon-사용자정의아이콘이름:after{

         background:url();

         background-size: 이미지크기;

   }

</style>

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style type="text/css">

.ui-icon-my-icon:after{
	background-image:url("../image/buttonicon1.png");
	background-size:18px 18px;
}

</style>
</head>
<body>

 <div data-role="page" id="page1">
 	<div data-role="header">
 		<h1>머리말영역(header)</h1>
 	</div>
 	<div data-role="content">
 		<button data-icon="my-icon">사용자정의아이콘</button>
 		<input type="button" value="버튼" data-icon="my-icon" data-iconpos="bottom">
 		<a href="#" data-role="button" data-icon="my-icon" data-iconpos="notext" data-inline="true">버튼버튼</a>
 	</div>
 	<div data-role="footer" data-position="fixed">
 		<h4>꼬리말영역(footer)</h4>
 	</div>
 </div>
</body>
</html>

버튼 테마 

- 스타일 기본 테마는 a~e까지 5가지 종류

- 버튼도 다른 화면 요소처럼 상위 컨테이너 테마를 상속받는다.

- 버튼마다 data-theme="버튼테마이름" 속성값을 설정해 각 버튼의 테마 변경 가능

 

버튼 그룹 생성

- 버튼들을 하나의 컨트롤처럼 보이게 묶어서 그룹 생성

- 여백 없이 모아서 표시하면 의미적으로 밀접한 그룹화 가능

- data-role="controlgroup" 속성 값을 갖는 <div>태그로 그룹화하고자 하는 버튼 감싸기

- data-inline="true"속성을 갖는 버튼이 여러 개 있는 경우 버튼 그룹으로 그룹화 바람직

- 버튼을 기본적으로 세로방향으로 결합해 표시

- 가로방향 : data-type = "horizontal"

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

 <div data-role="page" id="page1">
 	<div data-role="header">
 		<h1>머리말영역(header)</h1>
 	</div>
 	<div data-role="content">
 		<div data-role="controlgroup">
 			<a href="#" data-role="button">버튼</a>
 			<a href="#" data-role="button">버튼</a>
 			<a href="#" data-role="button">버튼</a>
 		</div>
 		<div data-role="controlgroup" data-type="horizontal">
 			<a href="#" data-role="button">버튼</a>
 			<a href="#" data-role="button">버튼</a>
 			<a href="#" data-role="button">버튼</a>
 		</div>
 	</div>
 	<div data-role="footer" class="ui-bar" data-position="fixed">
 		<h4>꼬리말영역(footer)</h4>
 		<div data-role="controlgroup">
 			<a href="#">버튼</a>
 			<a href="#">버튼</a>
 			<a href="#">버튼</a>
 		</div>
 	</div>
 </div>
</body>
</html>

'WEB' 카테고리의 다른 글

JQuery Mobile 헤더와 푸터바 + 예제  (0) 2022.07.08
JQUERY MOBILE WEB 기초  (0) 2022.07.06
제이쿼리 예제(2)  (0) 2022.07.06
Ajax(Asynchronous JavaScript And XML, 비동기적 자바스크립트와 XML)와 JSON  (0) 2022.07.05
jQuery와 예제  (0) 2022.07.04

관련글

티스토리툴바