입력 버튼에 jQuery UI 버튼 아이콘을 추가하는 방법은 무엇입니까?

Question

jQuery UI Button icons과 <input type="submit"> 요소를 함께 사용할 수 있습니까?

문서 예제에서는 <button> 요소를 사용하지만 아이콘이 입력 버튼과 함께 작동하는지 여부는 명시 적으로 밝히지 않았습니다. <input type="submit">으로 렌더링하는 ASP.NET Button 컨트롤에 아이콘을 추가하고 싶습니다.

이것은 내가 무엇을 시도했다입니다 :

$("input.add").button({ icons: { primary: "ui-icon-circle-plus" } }); 

버튼이 누락 된 아이콘을 제외하고 올바르게 스타일입니다. 내가 놓친 게 있니?

Answer 1

제대로하고 있습니다. 그것은 입력 요소에서 작동하지 않는 것 같습니다. JQuery UI Button의 소스 코드를 자세히 살펴보면 아이콘을 가져 오는 요소 앞에 <span class='ui-button-icon-primary ui-icon " + icons.primary + "'></span>이 붙어 있지만 입력 요소에는 나타나지 않는 것으로 나타났습니다.

실제로 조금 더 가까이 보입니다. 확실하지 어떻게이 처음 놓친하지만 소스는 다음이 포함 기본적으로 스팬/앞에 추가 입력 요소에 추가되기 전에 종료하는 코드를 알려줍니다

if (this.type === "input") { 
    if (this.options.label) { 
    this.element.val(this.options.label); 
    } 
    return; 
} 

. 그래서 의도적으로 설계된 것입니다.

Answer 2

브래들리 마운트 포드 (Bradley Mountford)가 말한 것처럼, 제출 요소는 디자인에 의해 아이콘으로 스타일링되지 않습니다 (왜 디자인입니까, 전혀 모르겠습니다).

asp : Button을 asp : LinkButton으로 변경하면 모든 것이 정상적으로 작동합니다. 네, 정말 쉽습니다.

Answer 3

내 문제는 스타일을 덮어, 그래서이 솔루션은 나에게 도움이 :이 솔루션을 찾고 있어요

$('input.add').each(function(){ 
      $(this).replaceWith('<button class="add" type="' + $(this).attr('type') + '">' + $(this).val() + '</button>'); 
}); 
$('.add').button({ icons: { primary: 'ui-icon-circle-plus' } }); 

Answer 4

을하고 난 완벽한

자바 스크립트

$(function() { 

    //botoes de login 

    $("#btnLogin").button({ 
      icons: { primary: "ui-icon-key" } 
     }).hide().after('<button>').next().button({ 
      icons: 
      { 
       primary: 'ui-icon-key' 
      }, 
      label: $("#btnLogin").val() 
     }).click(function (event) { 
      event.preventDefault(); 
      $(this).prev().click(); 
     }); 
    $("#close").button({ icons: { primary: "ui-icon-close" } }); 
}); 

작동 내 하나를 발견 웹 폼

<asp:Button ID="btnLogin" runat="server" Text="Login" OnClick="btnLogin_Click" />