2012-05-28 7 views
12

dialogClass 속성을 사용하여 jQuery 대화 상자에 클래스를 추가하려고합니다. jquery UI 대화 상자에 클래스 추가 문제

$(function(){ 
    $("#toogleMAmaximized").dialog({ 
      title: 'Missions and Achivments', 
      autoOpen: false, 
      height: 500, 
      width: 700, 
      modal: true, 
      dialogClass: 'noPadding', 
      buttons: { 
        Cancel: function() { 
          $(this).dialog("close"); 
        } 
      }, 
      close: function() { 
        allFields.val("").removeClass("ui-state-error"); 
      } 

    }) 
    $("#toogleMAminimized").click(function() { 
      $("#toogleMAmaximized").dialog("open"); 
      $("#toogleMAmaximized").dialog({dialogClass:'noPadding'}); 
    }); 
}) 

<div id="toogleMAminimized" style="" class="noPadding"> 
<div class="" style="cursor: pointer;position: absolute;right: 0;top: 45px;"><img src ="images/MAminimized.png" alt="missions and achivments"/></div> 
</div> 

그냥 당신이 그것을 필요로하는 경우, 당신이 볼 수 있듯이, 나는 많은 방법으로 클래스를 추가하려고했습니다 내 HTML 코드

<div id="toogleMAmaximized" > 
<div id="missions"> 
    <div id="mission1" missiontitle="A new home!" missionpoint="1" missionicon="images/missions/icon/anewhome-icon.png" missionimage="images/missions/anewhome.png" made="f" class="mission notDone"> </div> 
</div> 
<div id="achivments"> 
    <div id="achivment1" achivmenttitle="Lucha sin cuartel!" achivmentpoint="10" achivmenticon="images/achivments/icon/1.png" achivmentimage="images/achivments/icon/luchasincuartel-plata-ico.png" made="t" class="achivment done"> </div> 
</div> 
</div> 

에, 나는 모든 시도했다

다음은 자바 스크립트입니다 가능한 조합은 있지만 계속 동일한 결과를 얻습니다. no noPadding 클래스

+0

'dialogClass' [나를 위해 일합니다] (http://jsfiddle.net/QHJKm/). 귀하의 코드는 [나를 위해 일합니다] (http://jsfiddle.net/QHJKm/1/). – Sampson

+0

'jQuery UI'의 버전은 무엇입니까? 나는'jQuery UI 1.8.16'을 사용하고 있습니다. 1.8.18을 사용했는지 확인해 보았습니다. 타이! –

+0

1.8.16과 [It works] (http://jsfiddle.net/QHJKm/3/)도 있습니다. – Sampson

답변

10

noPadding 클래스가 대화 상자에 성공적으로 추가됩니다. 필자는 마크 업과 스크립트를 바이올린에 넣고 jQuery UI 1.8.16 (테스트중인 버전)을로드하여이 사실을 확인했습니다. 이 테스트는 http://jsfiddle.net/QHJKm/3/에서 온라인으로 볼 수 있습니다.

여기서 혼란이 있다고 예상되는 효과는 noPadding이 대화 자체에있을 것입니다. 그 효과의 부족을 처음에는 추가되지 않았 음을 나타내는 것으로 해석했을 수 있습니다. 제 예제에서 보게 될 것처럼, 저는 다소 과감한 스타일의 빨간색 배경을 가지고 있습니다. 그러면 클래스가 실제로 대화 상자에 추가되고 있음을 신속하게 확인할 수 있습니다.

+0

여기에서 매우 혼란 스럽다. 어떻게 더 디버깅 할 수 있을까? 'noPadding' 클래스를 얻는 유일한 방법은'toogleMAmaximized' div 자체에서 그것을 하드 코딩하는 것입니다. 내가 1.8.16을 망가뜨릴 수 있을까? 지금 새 버전을 다운로드 중입니다. –

+0

오, 이제 네가하는 말 이해해! 그것은'toogleMAmaximized'에 추가되지 않았습니다. 이전 div 요소가 생성되기를 기대합니다! (rol = dialog 속성을 가진 사람에게는 익숙하지 않은 사람에게도 해당). 자, 이제 대화 상자 ("open") 바로 뒤에 실제 div에 클래스를 추가하는 것입니다. 감사합니다! –

관련 문제