-
[jQuery] jQ Mobile 버튼(Buttons) - jQuery Mobile 강좌Web/jQuery 2016. 3. 16. 19:24
W3School 를 참고하여 작성하는 jQuery Mobile 강좌입니다.
아래 링크들은 Tutorial 편입니다.
jQuery Mobile Buttons
모바일 어플리케이션은 당신이 보기 원하는 것을 탭핑하는 간단한 구현 방식을 가지고 있습니다.
Creating a Button in jQuery Mobile
jQuery Mobile에서의 버튼은 3 가지 방법으로 만들 수 있습니다:
- <input> 엘리먼트 사용
- <button> 엘리먼트 사용(class="ui-btn")
- <a> 엘리먼트 사용(class="ui-btn")
<input> 엘리먼트
123<input type="button" value="Button">cs <button> 엘리먼트
12<button class="ui-btn">Button</button>cs <a> 엘리먼트
12<a href="#anylink" class="ui-btn">Button</a>cs Navigation Buttons
버튼으로 페이지들을 연결하기 위해서, class="ui-btn"인 <a> 엘리먼트를 사용합니다:
* jqnav.html
1234567891011121314151617181920212223242526272829303132333435363738394041424344<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"><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.3.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" id="pageone"><div data-role="header"><h1>Buttons</h1></div><div data-role="main" class="ui-content"><p>Welcome!</p><a href="#pagetwo" class="ui-btn">Go to Page Two</a></div><div data-role="footer"><h1>Footer Text</h1></div></div><div data-role="page" id="pagetwo"><div data-role="header"><h1>Buttons</h1></div><div data-role="main" class="ui-content"><p>Goodbye!</p><a href="#pageone" class="ui-btn">Go to Page One</a></div><div data-role="footer"><h1>Footer Text</h1></div></div></body></html>cs Grouped Buttons
jQuery Mobile 은 버튼을 그룹핑하기 위한 쉬운 방법을 제공합니다.
data-role="controlgroup" 속성과 data-type="horizontal | vertical" 을 사용합니다.
123456<div data-role="controlgroup" data-type="horizontal"><a href="#" class="ui-btn">Button 1</a><a href="#" class="ui-btn">Button 2</a><a href="#" class="ui-btn">Button 3</a></div>cs Back Buttons
뒤로가기 버튼을 생성하기 위해, data-rel="back" 속성을 사용합니다:
12<a href="#" class="ui-btn" data-rel="back">Go Back</a>cs Inline Buttons
기본적으로 버튼은 페이지의 최대 너비로 늘어나 있습니다. 버튼의 너비를 조절하거나, 양옆에 버튼을 여러 개를 두고자 할 경우, "ui-btn-inline" 클래스를 추가하면 됩니다:
* jqinline.html
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"><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.3.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" id="pageone"><div data-role="header"><h1>Welcome To My Homepage</h1></div><div data-role="main" class="ui-content"><p>Normal / Default button:</p><a href="#pagetwo" class="ui-btn">Go to Page Two</a><p>Inline button:</p><a href="#pagetwo" class="ui-btn ui-btn-inline">Go to Page Two</a></div><div data-role="footer"><h1>Footer Text</h1></div></div><div data-role="page" id="pagetwo"><div data-role="header"><h1>Welcome To My Homepage</h1></div><div data-role="main" class="ui-content"><p>Inline buttons (will appear side by side as long as the screen lets it):</p><a href="#pageone" class="ui-btn ui-btn-inline">Go to Page One</a><a href="#pageone" class="ui-btn ui-btn-inline">Go to Page One</a><a href="#pageone" class="ui-btn ui-btn-inline">Go to Page One</a></div><div data-role="footer"><h1>Footer Text</h1></div></div></body></html>cs
end* 본 포스트는 w3school 을 통해 작성된 포스트입니다.
'Web > jQuery' 카테고리의 다른 글
[jQuery] jQ Mobile 툴바(Toolbars) - jQuery Mobile 강좌 (0) 2016.03.18 [jQuery] jQ Mobile 팝업(Popups) - jQuery Mobile 강좌 (0) 2016.03.17 [jQuery] jQ Mobile 아이콘(Icons) - jQuery Mobile 강좌 (0) 2016.03.17 [jQuery] jQ Mobile 페이지(Pages) - jQuery Mobile 강좌 (0) 2016.03.16 [jQuery] jQ Mobile 시작하기 - jQuery Mobile 강좌 (0) 2016.03.16 [jQuery] 27. noConflict Method - jQuery 강좌 jQuery / CSE (0) 2015.06.13
