[英]Create multiple instance jQuery UI dialog on button click
我想創建多個實例的jQuery Dialog UI。 我還想用相同的標題創建每個jQuery對話框UI的多個副本。
如果單擊“打開對話框1”,則將打開“基本對話框1”。 如果再次單擊“打開對話框1”,它將生成具有相同標題的基本對話框1的副本。
如果單擊“打開對話框2”,則將打開“基本對話框2”。 如果再次單擊“打開對話框2”,它將生成具有相同標題的基本對話框2的副本。
現在,應該在屏幕上看到四個對話框。
例子:
1)同樣,在Windows中,我們可以多次打開“此PC”。
2)文件瀏覽器多次。
$(function() {
$('.dialog').dialog({
autoOpen: false
});
$('.opener').click(function() {
var d = $('.dialog').clone().appendTo('body'),
tab = $(this).attr('alt') - 1;
d.dialog({
autoOpen: false,
close: function(e, ui) {
$(this).dialog('destroy').remove();
}
});
console.log(tab);
d.find('.dtabs').tabs({
active: tab
});
d.dialog('open');
$(this).data('id');
});
});
<div class="dialog" id="dialog1" title="Basic dialog 1">
</div>
<div class="dialog" id="dialog2" title="Basic dialog 2">
</div>
<div class="dialog" id="dialog3" title="Basic dialog 3">
</div>
<input value="Open Dialog 1" type="button" class="opener" data-id="#dialog1" />
<input value="Open Dialog 2" type="button" class="opener" data-id="#dialog2" />
<input value="Open Dialog 3" type="button" class="opener" data-id="#dialog3" />
您可以使用data()
方法找到目標對話框,然后如下所示進行克隆:
$(function() { $('.opener').click(function() { var targetSelector = $(this).data('id'); var $target = $(targetSelector); var d = $target.clone().appendTo('body'); d.dialog({ close: function(e, ui) { $(this).dialog('destroy').remove(); } }); }); });
#dialog1, #dialog2, #dialog3 { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <link href="//code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet" /> <div class="dialog" id="dialog1" title="Basic dialog 1"></div> <div class="dialog" id="dialog2" title="Basic dialog 2"></div> <div class="dialog" id="dialog3" title="Basic dialog 3"></div> <input value="Open Dialog 1" type="button" class="opener" data-id="#dialog1" /> <input value="Open Dialog 2" type="button" class="opener" data-id="#dialog2" /> <input value="Open Dialog 3" type="button" class="opener" data-id="#dialog3" />
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.