반응형
블로그 이미지
개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 IT 프로젝트에서 사용되는 툴들에 대해 많은 분들과 정보를 공유하고 싶습니다.
솔웅

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

카테고리

JQuery Mobile - Button basics 01

2012. 8. 11. 19:25 | Posted by 솔웅


반응형

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




반응형