jQuery Mobile : 버튼 맞춤 설정 방법

Question

<a data-role="button"> 버튼의 배경을 내 이미지로 변경하려면 어떻게해야하나요? 또한 왼쪽에있는 단추 위에 내 사용자 정의 아이콘을 어떻게 추가 할 수 있습니까?

Answer 1

링크에 클래스를 지정하고 CSS를 사용하여 배경 이미지를 변경하십시오.

<a data-role="button" class="my-button"> 

...

.my-button { 
    background-image: url('images/my-button.png') !important; 
} 

Answer 2

내가 jQuery를 모바일 버튼을 사용자 정의 할 수있는 권장되는 방법은 사용자 정의 테마를 추가하는 것을 말할 것입니다.

<a data-role="button" data-theme="my-site">Button</a> 

이렇게하면 버튼의 여러 요소와 상태를보다 효과적으로 제어 할 수 있습니다. 예를 들어, (그들은 자동으로 버튼에 추가) 사용자 지정 테마 이름과 연관된 클래스의 코드를 작성하여 CSS에서 버튼의 여러 가지 상태를 타겟팅 할 수 있습니다 :

.ui-btn-up-my-site { /* your code here */ } 
.ui-btn-hover-my-site { /* your code here */ } 
.ui-btn-down-my-site { /* your code here */ } 

을 명심 기본 버튼 테두리, 그림자 및 배경 그라데이션으로 만들어집니다. 또한 프레임 워크에 의해 자동으로 생성되는 버튼 안에 추가 HTML 요소가 있습니다. 사용자 정의하고자하는 항목에 따라 버튼 내의 다른 클래스 (UI 아이콘, UI 템플리트, UI 단추 등)를 대상으로 지정해야 할 수도 있습니다.

다음은 jQuery Mobile 버튼의 고급 사용자 정의를 수행하는 방법을 설명하는 자습서입니다. 기사는 어떻게 jQuery를 모바일 테마를 재설정하는 몇 가지 기본적인 사용자 정의를 수행하는 방법을 보여줍니다, 어떻게 당신이 원하는 무엇이든에 기본 버튼을 켭니다 :

http://appcropolis.com/blog/advanced-customization-jquery-mobile-buttons/