jquery mobile의 버튼에 사용자 정의 직사각형 아이콘 사용

jquery mobile.I의 버튼에 사용자 정의 아이콘을 사용해야합니다. 나와 함께 아이콘이 있으며 버튼에 들어갑니다. 그러나 내가 직면 한 문제는 기본 서클이 내 아이콘 주위에 표시됩니다.이 경계선을 제거하고 그대로 아이콘을 표시해야합니다.이 문제를 해결하는 방법은 무엇입니까?jquery mobile의 버튼에 사용자 정의 직사각형 아이콘 사용

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta name="viewport" content="width=device-width; initial-scale=1.0" /> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" /> 
     <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script> 
     <script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script> 
      </head> 
    <body> 
     <div data-role="page" id="home"> 
      <div data-role="header" data-theme="b"> 
       <h1>Test</h1> 
      </div> 
      <div data-role="content" data-theme="b"> 
       <input type="button" data-inline="true" data-theme="b" data-icon="save-icon" data-iconpos="left" value="Save Data"></a> 
      </div> 
      <div data-role="footer" data-position="fixed" data-id="pFooter"> 
       <h1>Test</h1> 
      </div>  
     </div> 
    </body> 
</html>

다음과 같은 CSS :

이

은 내가 가진 HTML입니다

.ui-icon-save-icon{ 
    background: url(save_icon.png) 50% 50% no-repeat; background-size: 19px 21px; 
}

당신은 여기에서 볼 수 있습니다 - http://jsfiddle.net/yPRpt/

, 아이콘이 없음을 유의하시기 바랍니다 있지만, 이 예제에서 원을 볼 수 있습니다.

출처

2011-07-05 user700284

jQuery Mobile의 테마가 단추에 추가하는 반투명 원을 제거 할 수있는 유일한 방법은 관련 CSS 및/또는 해당 Javascript를 식별하고 무시하는 것입니다.

또는 jQM이 작동하는 사용자 정의 아이콘을 수정하지 않으시겠습니까? 이 일을 내가 지금까지 발견

출처

2011-07-05 16:42:02 Ben

서클을 삭제할 수 있다고 생각하지 않습니다.

문서 :

JQuery와 모바일 프레임 워크는 ... 자동으로 반투명 검정 원

을 추가

http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/buttons/buttons-icons.html

당신이 가진 비 투명 아이콘을 만들 수 있습니다

배경은 원과 버튼과 같은 색으로 커야합니다. 그러나 이것이 제대로 작동하는지 확신 할 수 없습니다. (테스트 안 함)

출처

2011-07-05 15:07:54

수있는 유일한 방법은 '데이터 아이콘' '사용자 정의'로 요소에 속성을 다음 투명 배경 이미지

예를 사용하여 CSS에 스타일을 설정하는 것입니다

<a id="hlFind" data-role="button" data-icon="custom">Find</a>

는 CSS에서 : 마크 업에

#hlFind .ui-icon-custom { 
    background:url("images/icon_phone_green.png") no-repeat scroll 0 0 transparent; 
}

출처

2011-07-13 05:30:08 trevorgk

대단히 감사합니다. 핵심 요소는 "투명"합니다. 14x14 크기의 이미지가 추가되어 "background-size : 14px 14px"가 추가되었습니다. 스크롤을 제거하고 "0 0"을 "2px 2px"로 변경했습니다. – DemitryT

재정 JQuery와 모바일 CSS 파일에 아래의 코드

.ui-icon-searchfield:after { 
    background:       #666 /*{global-icon-color}*/; 
    background:       rgba(0,0,0,.4) /*{global-icon-disc}*/; 
    background-image: url(images/icons-18-white.png) /*{global-icon-set}*/; 
    background-repeat: no-repeat; 
    -moz-border-radius:     9px; 
    -webkit-border-radius:    9px; 
    border-radius:      9px; 
}

이 부분은 기본 블랙 투명 이미지와

출처

2012-07-25 07:01:43 sij

더 나은 것 같습니다. – sij

재정이 CSS를

.ui-btn-corner-all { 

}

출처

2012-10-13 02:32:31

이 게시물이 잘 구글에 참조되는 둥근 컷 오프를 일으키는 것입니다. 사람이 여전히 간단한 솔루션을 찾고 있다면, 난 그냥 하나의 발견이 솔루션의

출처

2013-02-05 15:48:42 bgallet

안녕하세요. jsfiddle의 예를 들어 주시겠습니까? 감사! –

이렇게하면 이미지가있는 단추가 완벽하게 생성되지만 텍스트가 더 이상 세로로 정렬되지 않는 것이 문제입니다. CSS 변경이 필요할 수도 있습니다. –

아무도 나를 위해 일한 도움이 될 것입니다

<p data-role="button"><img align="left" width="35px" src="something.jpg"/>Button name<p>

희망을 ...

은 그냥 CSS 코드

.ui-icon-save-icon{ 
    background: url(save_icon.png) 50% 50% no-repeat; background-size: 19px 21px; 
}

을 넣고 추가 : CSS 이벤트 후 0으로 기본 원의 크기를 설정하고, 기본 원이 사라집니다! :)

.ui-icon-save-icon:after { 
    width: 0px; 
    height: 0px; 
}

출처

2014-10-15 11:22:51 LeonardoX

jquery mobile의 버튼에 사용자 정의 직사각형 아이콘 사용

답변

관련 문제