2011-03-18 2 views
0

단추에 아이콘을 추가하려고 시도했지만 작동하지 않는 것 같습니다.jQuery 단추 문제에 아이콘 추가

JS

$(document).ready(function(){ 

    $("button, input:submit, input:reset, input:button", "#customer_wrapper").button(); 

    $("#save_customer").button({ 
     icons: {primary: 'ui-icon-disk'} 
    }); 

}); 

HTML

<button name="save_customer" id="save_customer" value="Save" />Save</button> 

첫 번째 버튼에는 아이콘을 표시하지 않고있는 아이콘 및 텍스트 번째 인라인 아니다. 아이콘을 추가하는 가장 좋은 방법은 무엇입니까?

감사 업데이트]

그것의

확인 부분은 버튼 태그를 폐쇄하지 않는 내 잘못이다. 다음 줄에 텍스트가있는 아이콘을로드합니다. 브라우저에서

HTML

<button id="save_customer" name="save_customer" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary" role="button" aria-disabled="false"> 
    <span class="ui-button-icon-primary ui-icon ui-icon-disk"> </span> 
    <span class="ui-button-text">Save</span> 
</button> 

CSS 기본적으로

.ui-icon-disk { 
    background-position: -96px -112px; 
} 
.ui-button .ui-button-text { 
    display: block; 
    line-height: 1.4; 
} 
+1

동일한 ID를 가진 두 개의 요소가 없어야합니다. 또한 .ui-icon-disk CSS 클래스는 어떤 모습입니까? –

+0

@optus - 브라우저의 CSS 및 HTML 출력으로 내 게시물을 업데이트했습니다. – tomitank

답변

0

귀하의 HTML 코드는이를 좋아한다 :

http://jsfiddle.net/ynhat/fWkbv/

<button name="save_customer" id="save_customer">Save</button> 
당신이 동일한 ID를 가진 두 요소를 가지고 있겠지 확인하시기 바랍니다.

+0

이미지가로드되지 않은 이유는 button 태그를 닫지 않았기 때문입니다. 하지만 이제 텍스트가 아이콘 아래에 있습니다. – tomitank

+0

그것은 나를 위해 잘 작동합니다. 귀하의 버튼이 다른 CSS 코드의 영향을받는 것처럼 보입니다. – YNhat

+0

내가 갈등을 찾을 수없는 것, 내가 그것을 무시할 수있는 아이디어? – tomitank

0

, 주제에 대한 이미지는 CSS 파일 아래 이미지 디렉토리에 있어야합니다. 올바른 디렉토리에 있는지 확인하십시오. 아이콘 버튼

+0

이미지 디렉토리가 올바르게 배치되었습니다. – tomitank