1

在单个页面上，我希望使用 JQuery UI 的对话框来显示一堆不同的对话框，以便用户可以确认他们已经阅读了特定的屏幕消息以及显示其他一些内容。

我有一个服务器端 PHP foreach() 生成消息并将每个消息放置在 a中，其中包含<div class="mod_message_short">许多子 div 用于布局/格式化，包括 a<div class="mod_message_modal">其中包含与该特定消息有关的对话框的内容。

有没有一种方法可以声明autoOpen:false所有 .mod_message_modal 元素而不必单独声明它们（使用唯一的 id 而不是封装它们的类）？

以下是我到目前为止所得到的：

<script type="text/javascript">
$(function(){
    $('.mod_message_modal').dialog({
        autoOpen:false
    });

    $('.mod_message_readmore').click(function(e){
        $(".mod_message_short[data-messageid='" + $(this).parents('.mod_message_short').data('messageid') + "']").find('.mod_message_modal').dialog("open");
        e.preventDefault();
    });
});
</script>

不幸的是，这不起作用，因为 .dialog() 从 DOM 中删除了所有元素，所以当我尝试找到它们以在鼠标单击事件上单独打开它们时，我不能。

我希望解决方案是单独声明这些，但我认为这会生成一堆可能不必要的 javascript。

这似乎与此处发布的问题类似，但 对我的特定问题没有有用的答案。

有任何想法吗？谢谢！

4

1 回答 1

1

经过一番折腾，我设法想出了一个比在 PHP 的 foreach 循环中编写一些 javascript 更优雅的解决方案。

这仍然会遍历我想通过他们的类用作对话框的每个 div，但会根据它们的 id 属性将它们设置为对话框。这允许它们被单独调用，再次基于它们的 id。HTML5 data-* 属性的使用是我解决方案的关键。

我的视图类中的 HTML 和 PHP：

<?php foreach($this->messages as $message): ?>
    <div class="mod_message_short" data-messageid="<?php echo $message->id;?>">
            <!-- Display shortext here -->
        <div class="mod_message_modal" data-title="<?php echo $message->title; ?>" id="fullMessage_<?php echo $message->id; ?>">
            <!-- Display longer message here -->
        </div>
    </div>
<?php endforeach; ?>

Javascript：

<script type="text/javascript">
    var messages_viewDialogOptions = {
        autoOpen: false,
        modal: true,
        width: 600,
        buttons: [{
            text:"Mark as Read",
            click:function(){
                //Ajax Callback here
                $(this).dialog('close');
            }
        },{
            text:"Close",
            click:function(){$(this).dialog('close');}
        }]
    }
    $(function(){
        $('.mod_message_modal').each(function(){
            $(this).dialog(messages_viewDialogOptions);
        });
        $('.mod_message_readmore').click(function(e){
            var currentDialog = $('#fullMessage_'+$(this).parents('.mod_message_short').data('messageid'));
            currentDialog.dialog('option','title',currentDialog.data('title'));
            currentDialog.dialog('open');
            e.preventDefault();
        });
    });
</script>
于 2013-08-14T04:50:32.180 回答