向jquery ui对话框添加类的问题

时间:2012-05-28 16:37:03

标签: jquery-ui

我正在尝试使用dialogClass属性向我的jQuery对话框添加一个额外的类。这是javascript:

$(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>

正如您所看到的,我尝试以多种方式添加课程,我尝试了所有可能的组合,但仍然得到相同的结果:没有noPadding

1 个答案:

答案 0 :(得分:11)

您的noPadding课程已成功添加到对话框中。我已经通过将您的标记和脚本放在一个小提琴中并加载jQuery UI 1.8.16(您正在测试的版本)来确认这一点。此测试可在http://jsfiddle.net/QHJKm/3/在线获取。

我怀疑这里的混淆是noPadding对对话本身的预期影响。可能是你将其缺乏效果解释为表明它没有被添加开始。正如你在我的例子中所说的那样,我有一个相当大胆的风格,一个红色的背景。这很快就确认了该类确实被添加到对话框中。