Question

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

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

有没有办法在所有.mod_message_modal元素上声明autoOpen:false而不必单独声明它们（使用唯一的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。

这似乎与发布here的问题类似，对我的特定问题没有任何有用的答案。

有什么想法吗？谢谢！

Answer 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>

单个页面上的多个JQuery UI对话框

1 个答案: