在 jquery 的选项卡中添加对话框答案

【问题标题】：Adding a dialog in tab in jquery在 jquery 的选项卡中添加对话框
【发布时间】：2011-05-12 13:38:48
【问题描述】：

我做了一个对话框和标签。它工作正常。但是我想在选项卡中添加/显示对话框。例如，如果 tab1 单击 dialog1 将在选项卡中打开或显示，如果 tab2 单击，则 dialog2 将在选项卡中打开或显示。我只需要帮助如何做这些事情。非常感谢。

对话框和选项卡。

<div id="dialog">
<table id="myTable" width="100%" border="0"  cellspacing="1" cellpadding="2 class="draggable ui-widget"> 
<thead class="ui-widget-header"> 
<tr> 
<th><strong>Symbol</strong><span class="ui-icon ui-icon-triangle-2-n-s" style="position:absolute;top:15%;margin-top:-8px"></span></th> 
<th><strong>Price</strong><span class="ui-icon ui-icon-triangle-2-n-s" style="position:absolute;top:15%;margin-top:-8px"></span></th> 
<th><strong>Volume</strong><span class="ui-icon ui-icon-triangle-2-n-s" style="position:absolute;top:15%;margin-top:-8px"></span></th> 
<th><strong>Buy</strong><span class="ui-icon ui-icon-triangle-2-n-s" style="position:absolute;top:15%;margin-top:-8px"></span></th> 
<th><strong>Sell</strong><span class="ui-icon ui-icon-triangle-2-n-s" style="position:absolute;top:15%;margin-top:-8px"></span></th> 
</tr> 
</thead> 
</div>

<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all" id="tabs">
<ul>
<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#tabs-1">Market1</a></li>
    <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#tabs-2">Market2</a></li>
    <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#tabs-3">Market3</a></li>
</ul>
<div id="tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom">

</div>
<div id="tabs-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom">

</div>
<div id="tabs-3" class="ui-tabs-panel ui-widget-content ui-corner-bottom">

</div>

并，这是我的脚本。强>

<script>
$(document).ready(function() 
   { 
    //$(function() {
    $("#tabs").tabs();      
    //});

 $("#dialog").dialog({title:'MarketWatch',minHeight:50,width:1000});        

 } 
); 
</script>

【问题讨论】：

标签： jquery jquery-ui jquery-ui-dialog jquery-ui-tabs

【解决方案1】：

我认为没有直接的方法。

但是，您可以通过将对话框的 DOM 从 body 标签转移到 specific 标签 DOM 的 DOM 来实现。

你可以使用tab插件的select 或 show 事件来打开对话框。
在 open 对话事件时，切换 DOM。

仅供参考：确保在设置对话框时使用 autoOpen 选项。通过这样做，您的对话框现在将在选项卡的范围内，即使用户切换到另一个选项卡也不可见。

希望对您有所帮助。

【讨论】：