제이쿼리모바일 Button Widget 1

Button Widget

version added: 1.0

설명 : 버튼 위젯을 만듭니다.

Buttons

버튼은 표준 HTML input요소 로 코딩 된 

다음 jQuery Mobile을 통해 모바일 장치에서 더 매력적이고 유용하게 사용할 수 있도록 향상되었습니다.

Form buttons

스타일링의 편의를 위해, 프레임 워크가 자동으로 변환 inputA의 원소 type의를 submit, reset

또는 button사용자 지정 스타일 버튼에 - 추가 할 필요가 없습니다 data-role="button"특성. 

그러나 필요한 경우 jQuery 플러그인과 마찬가지로 모든 선택기에서 버튼 플러그인을 직접 호출 할 수 있습니다.

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

Input type="button" based button:

<input type="button" value="Button">

Input type="submit" based button:

<input type="submit" value="Submit Button">

Input type="reset" based button:

<input type="reset" value="Reset Button">

Providing pre-rendered markup 사전 렌더링 된 마크 업 제공

단추 위젯이 초기화 중에 작성하는 마크 업을 제공하여 페이지로드 시간을 향상시킬 수 있습니다.

이 마크 업을 직접 제공하고 속성을 설정하여이를 수행했음을 표시함으로써 data-enhanced="true"인스턴스화 중에 DOM 위젯을 건너 뛰고 필요한 DOM 구조가 이미 있다고 가정하도록 버튼 위젯에 지시합니다.

미리 렌더링 된 마크 업을 제공 할 때 프레임 워크가 일반적으로 설정하는 모든 클래스를 설정해야하며 사전 렌더링 된 마크 업이 기본값이 아닌 값을 반영한다는 것을 나타 내기 위해 값이 기본값과 다른 모든 데이터 속성도 설정해야합니다 해당 위젯 옵션의.

버튼 위젯은에 래퍼 div를 추가 합니다 input.

아래 예제에서는 버튼에 미리 렌더링 된 마크 업이 제공됩니다. 이 속성 data-corners="false"의 부재 때문에 명시 적으로 지정 ui-corner-all래퍼 요소 클래스는 "코너"위젯 옵션이 거짓임을 나타냅니다.

<div class="ui-btn ui-input-btn ui-shadow">

  The Button

  <input type="button" data-corners="false" data-enhanced="true" value="The Button"></input>

</div>