在jquery的tab中添加一个对话框

时间:2011-05-12 05:21:46

标签: jquery jquery-ui jquery-ui-dialog jquery-ui-tabs

我做了一个对话框和标签。它工作正常。但我想在标签中添加/显示一个对话框。例如,如果tab1单击对话框1将打开或显示在选项卡中,如果单击tab2,则对话框2将打开或显示在选项卡中。我只是需要帮助来解决这个问题。非常感谢。

对话框和标签。

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

1 个答案:

答案 0 :(得分:0)

我认为没有直接的做法。

但是,您可以通过将对话框的DOM从 body 标记转移到特定标签DOM的DOM来实现相同目的。

  1. 您可以使用标签插件的选择 或者显示事件来打开 对话框。
  2. 打开对话框中,转移 DOM。
  3. 仅供参考:确保在设置对话框时使用 autoOpen 选项。 通过这样做,您的对话框现在将在选项卡的范围内,即使用户转移到另一个选项卡也不会显示。

    希望有所帮助。