JQuery Mobile - Button basics 01

Button basics

버튼들은 standard HTML anchor와 input 엘리먼트와 함께 코딩 됩니다. 그리고 나서 jQuery Mobile에 의해서 모바일에 좀 더 어울리고 유용하도록 바뀌어 지는거죠. anchor 링크를 사용하면 navigation 버튼들을 만들 수 있습니다.  그리고 input이나 button 엘리먼트들을 사용해서 form submission을 할 수 있죠.

icons 을 추가하거나 inline or grouped.를 표시하는 것을 포함해서 버튼에 대한 모든 속성들을 보시려면 data- attribute reference 보세요.

Styling links as buttons

페이지의 main content block안에서 여러분은 data-role="button" attribute를 추가함으로서 anchor 링크들을 button 으로 style 할 수 있습니다. framework은 이 링크 기능을 포함한 버튼으로 이 anchor link를 변환시켜 줍니다. 아래 예제를 보세요.

<a href="index.html" data-role="button">Link button</a>



Produces this link-based button:

Note: 버튼으로 style 된 링크는 아래 form에서 사용되는 버튼하고 똑 같이 보입니다. 그런데 몇가지 다른점이 있죠. Link-based 버튼들은 button plugin의 한 부분이 아닙니다. 그냥 버튼 스타일로 보이도록 하기 위해 underlying buttonMarkup 플러그인을 사용하는 것이죠. 그래서 form button에서 사용되는 메소드인 enable, disable, refresh 같은 것들을 사용할 수 없습니다. 이 link-based button을 disable 시켜야 되면 그 효과를 내기 위해 ui-disabled 클래스를 추가하실 수 있습니다.

Mini size

툴 바에 딱 맞게 적은 공간을 사용하는 버튼을 만드려면 data-mini="true" attribute를 추가하세요. 그러면 mini version 버튼을 만들 수 있습니다.

	
<a href="index.html" data-role="button" data-mini="true">Link button</a>

이렇게 하면 일반적인 버튼보다 크기도 작고 글씨도 작은 버튼이 생깁니다.

Form buttons

좀 더 쉬운 styling을 위해서 framework는 submit,reset,button, image 타입으로 된 버튼이나 input element를 딱 맞게 스타일 된 버튼으로 자동적으로 convert 합니다. 이 경우 data-role="button" attribute를 넣을 필요가 없죠. 하지만 필요하다면 다른 jQuery plugin 처럼 아무 selector 에서나 직접 button plugin 을 call 해서 사용하실 수도 있습니다.

$('[type='submit']').button();



original button 이나 input 처럼 이벤트 처리를 하기 위해 framework은 실제 element를 투명처리 해서 숨기고 이것을 new button markup 위에 위치 시켜 버립니다. 유저가 custom-styled 버튼을 클릭하면 실제로는 original element를 클릭하는 것이죠. form button이 enhanced button으로 convert 되는 것을 막으려면 data-role="none" attribute를 추가하세요. 그러면 native control이 render 됩니다.

ButtonBasics.html