■ Front-End ■/jQuery Mobile

[jQuery 모바일] 버튼을 그룹으로 묶어보자

한길(One Way) 2023. 2. 11.

모바일 웹 사이트와 스마트 폰, 태블릿 및 데스크탑 응용 프로그램을 만들 수 있도록 설계된 HTML5 기반 프레임워크다.

이번에는 jQuery Mobile의 버튼을 그룹으로 묶는 것에 대해 알아보자. 논리적으로 동일한 성격의 버튼을 아래의 태그로 감싸면 쉽게 그룹으로 묶을 수 있다.

그룹으로 묶을 때 기본은 수직으로 버튼이 배열되지만 data-type 속성을 horizontal로 하면 수평으로 버튼을 배열한다.

마지막에 있는 버튼 그룹에는 data-theme를 b로 적용해 보았다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Mobile</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-1.11.1.min.js" ></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js" ></script>
</head>
 
<body>
    <section id="page1" data-role="page" data-add-back-btn="true" data-theme="b">
        <header data-role="header">
           <h1>다양한 버튼(그룹)</h1>
        </header>
        <div class="content" data-role="content">         
           <div data-role="controlgroup">
               <a href="#" data-role="button">Yes</a>
               <a href="#" data-role="button">No</a>
               <a href="#" data-role="button">Cancel</a>
           </div>
           <div data-role="controlgroup">
               <a href="#" data-role="button" data-mini="true">Yes</a>
               <a href="#" data-role="button" data-mini="true">No</a>
               <a href="#" data-role="button" data-mini="true">Cancel</a>
           </div>
           <div data-role="controlgroup" data-type="horizontal">
               <a href="#" data-role="button">Yes</a>
               <a href="#" data-role="button">No</a>
               <a href="#" data-role="button">Cancel</a>
           </div>
           <div data-role="controlgroup" data-type="horizontal">
               <a href="#" data-role="button" data-mini="true">Yes</a>
               <a href="#" data-role="button" data-mini="true">No</a>
               <a href="#" data-role="button" data-mini="true">Cancel</a>
           </div>
           <div data-role="controlgroup" data-type="horizontal">
               <a href="#" data-role="button" data-mini="true" data-theme="b">Yes</a>
               <a href="#" data-role="button" data-mini="true" data-theme="b">No</a>
               <a href="#" data-role="button" data-mini="true" data-theme="b">Cancel</a>
           </div>
        </div>
        <footer data-role="footer" data-position="fixed">
           <h2>주한길</h2>
        </footer>
    </section>
</body>
</html>

jqm_05.html

0.00MB

결과화면

jQuery Mobile에서 알아둘 속성

data-role="page | header | content | footer | controlgroup"
data-theme="a | b | c"
data-position="fixed"
data-transition="fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none"
data-add-back-btn="true | false"
data-rel="dialog | popup | back | external"
data-icon="home | delete | plus | arrow-u | arrow-d | carat-l | carat-t | carat-r | carat-b | check | gear | grid
| star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search | false"
data-inline="true | false"
data-mini ="true | false"
data-corners="true | false"
data-shadow="true | false"
data-type="horizontal | vertical"

728x90

저작자표시 비영리

'■ Front-End ■ > jQuery Mobile' 카테고리의 다른 글

[jQuery 모바일] 리스트뷰 기본을 익혀보자 (0)	2023.02.11
[jQuery 모바일] 네비게이션바와 툴바를 페이지에 달아보자 (0)	2023.02.11
[jQuery 모바일] 다양한 모양의 버튼을 만들어보자 (0)	2023.02.11
[jQuery 모바일] 다이얼로그 화면으로 팝업 (0)	2023.02.11
[jQuery 모바일] 다양한 전환효과를 주며 페이지를 이동 (0)	2023.02.11

[jQuery 모바일] 버튼을 그룹으로 묶어보자

'■ Front-End ■ > jQuery Mobile' 카테고리의 다른 글

댓글

티스토리툴바