JQuery Mobile - Button basics 02 (Options, Methods, Events)

OPTIONS

The following options apply to all buttons:

corners boolean

default: true

true로 설정되면 border-radius 테마가 적용 됨. 이 옵션은 data-corners="false" 로 사용할 수도 있음

$('a').buttonMarkup({ corners: "false" });

icon string

default: null

icon set 중에서 선택된 아이콘을 적용 함. data-icon="start" 로 사용 함

$('a').buttonMarkup({ icon: "star" });

iconpos string

default: "left"

버튼에 아이콘의 위치를 정해 줌. left, right, top, bottom, none, notext 등이 있음.
notext 는 icon 만 있는 버튼을 표시함. data-iconpos="left"

$('a').buttonMarkup({ iconpos: "right" });

iconshadow boolean

default: true

true로 설정되면 버튼의 아이콘에 그림자 테마를 적용함.
data-iconshadow="false"

$('a').buttonMarkup({ iconshadow: "false" });

inline boolean

default: null (false)

true로 설정되면 inline button을 만듬. 버튼 안의 text 길이에 따라 버튼 길이가 정해 짐. 디폴트로 이 값은 null 이라서 버튼은 full width 를 가짐.
true와 false 가 올 수 있음.
data-inline="true"

$('a').buttonMarkup({ inline: "true" });

mini boolean

default: null (false)

true로 설정되면 가로 세로 모두 약간 작은 버튼이 표시됨. true, false 가 올 수 있음
data-mini="true"

$('a').buttonMarkup({ mini: "true" });

shadow boolean

default: true

true이면 drop shadow style 이 버튼에 적용 됨.
data-shadow="false"

$('a').buttonMarkup({ shadow: "false" });

theme string

default: null, inherited from parent

해당 widget에 color scheme (swatch)를 세팅 함. a-z 값이 올 수 있음. 디폴트로 parent container 의 color를 상속 함.

data-theme="a"

$('a').buttonMarkup({ theme: "a" });

The following option applies only to form buttons, which are automatically initialized by the framework:

initSelector CSS selector string

default: "button, [type='button'], [type='submit'], [type='reset'], [type='image']"

This is used to define the selectors (element types, data roles, etc.) that will automatically be initialized as form buttons. To change which elements are initialized, bind this option to the mobileinit event:

$( document ).bind( "mobileinit", function(){
   $.mobile.button.prototype.options.initSelector = ".myButtons";
});

METHODS

아래의 메소드들이 버튼 form 에 적용되는 것들 입니다. Link-based button은 관련된 메소드들이 없습니다.

enable

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

disable

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

refresh update the form button

자바스크립트로 form 버튼을 여러개 생성했다면 여러분은 그 버튼들에 반드시 refresh 메소드를 적용해 주셔야 합니다. 그래야 visual styling이 업데이트 됩니다.

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

EVENTS

a, input, button element에 직접 bind 이벤트를 적용합니다. jQuery Mobile의 virtual events나 change, focus, blur 같은 bind standard javascript event 를 사용하세요.

 
$( ".myButton" ).bind( "click", function(event, ui) {
  ...
});

form button 플러그 인은 다음과 같은 custom event들이 있습니다.

create : form button 이 생성됐을 때 trigger 됨

$('[type='submit']').button({
   create: function(event, ui) { ... }
});