【问题标题】:Issues adding a class to jquery ui dialog将类添加到 jquery ui 对话框的问题
【发布时间】:2012-05-28 16:37:03
【问题描述】:

我正在尝试使用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

【问题讨论】:

  • dialogClassworks for me。你的代码also works for me.
  • jQuery UI 的哪个版本?我正在使用jQuery UI 1.8.16。刚刚看到它使用 1.8.18 让我检查一下。泰!
  • It works 也有 1.8.16。

标签: jquery-ui


【解决方案1】:

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

我怀疑这里的混淆与noPadding 将对对话框本身产生的预期效果有关。可能您将其缺乏效果解释为一开始就没有添加它的迹象。正如您将在我的示例中注意到的那样,我有一个相当大胆的风格,红色背景。这可以快速确认该类确实已添加到对话框中。

【讨论】:

  • 我在这里很困惑,我该如何进一步调试呢?我获得noPadding 类的唯一方法是将其硬编码到toogleMAmaximized div 中。我可以有一个坏的 1.8.16 吗?我现在正在下载一个新版本。
  • 哦!,现在我明白你在说什么了!它没有像我预期的那样添加到toogleMAmaximized,而是添加到之前创建的 div 元素中! (对于任何不熟悉它的人来说,具有 rol=dialog 属性的那个)。好的,剩下要做的就是将类添加到真正的 div 中,就在 dialog("open") 之后,谢谢!
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-08-27
  • 2011-05-24
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多