單個頁面上的多個JQuery UI對話框

在單個頁面上，我希望使用JQuery UI的對話框來顯示一堆不同的對話框，以便用戶可以確認他們已經閱讀了特定的屏幕消息以及顯示一些其他內容。單個頁面上的多個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沒有有用的答案爲我的特定問題。

任何想法？謝謝！

來源

2013-08-07 jamesk5

經過一番黑客攻擊之後，我設法想出了一個比在PHP的foreach循環中編寫一些JavaScript更優雅的解決方案。

這仍然迭代每個div的我想用作他們的類的對話框，但將它們設置爲基於它們的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-14 04:50:32 jamesk5

單個頁面上的多個JQuery UI對話框

回答

相關問題