jQuery UI 选项卡和对话框答案

【问题标题】：jQuery UI tabs and dialogjQuery UI 选项卡和对话框
【发布时间】：2013-03-20 16:18:54
【问题描述】：

如何在单击时将 jQuery ui 选项卡添加到对话框中？这是我的代码。

<p>
  <a href="#" class = "premium_payer">Premium Payer:</a> 
  <span data-bind = "text: movements_owner_fullname"  id = "movements_payer_fullname" >         </span>
</p>

<script type="text/javascript">
  $('a.premium_payer').click(function payerDialog(e){
    $("#premium_payer").html('').dialog();
    $("#premium_payer").append('<p>' + "Full name: " + payer_fullname + '</p>').dialog();
    $("#premium_ayer").append('<p>' + "ID Number: " + person_id + '</p>').dialog();
            e.preventDefault();
    });
</script>

【问题讨论】：

@WimOmbelets 我想你的意思是atm？但无论如何，当用户点击“Premium payer”href 时，会使用 append 从 JS 生成一个对话框。
你想在哪里创建标签？我没有看到需要在哪些标签上构建任何相关的 HTML 或 JS
@AtifMohammedAmeenuddin 我希望在对话框中创建选项卡，正如我在开场白中提到的那样。

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

【解决方案1】：

<script type="text/javascript">
    $(document).ready(function(){
        $('a.premium_payer').click(function payerDialog(e){
            e.preventDefault();               
            var tabs = $("<div><ul><li><a href='#tab1'>tab1</a></li><li><a href='#tab2'>tab2</a></li></ul><div id='tab1'>Tab1 content</div><div id='tab2'>tab2 content</div></div>");
             $("#premium_payer").empty().append(tabs);
             $("#premium_payer").dialog();
             tabs.tabs();
        });
    });
</script>

EDIT如果你想要一个现有的元素，用 display: none 隐藏这个元素。

 <div id="tabs" style="display:none">
      <ul>
             <li>
                   <a href='#tab1'>tab1</a>
              </li>
              <li>
                    <a href='#tab2'>tab2</a>
              </li>
      </ul>
      <div id='tab1'>Tab1 content</div>
      <div id='tab2'>tab2 content</div>
 </div>

<script type="text/javascript">
    $(document).ready(function(){
        $('a.premium_payer').click(function payerDialog(e){
            e.preventDefault();               
            var tabs = $("#tabs");
             $("#premium_payer").empty().append(tabs);
             $("#premium_payer").dialog();
             tabs.show();
             tabs.tabs();
        });
    });
</script>

【讨论】：

@Gregorie 除了var tabs，我可以在我的 HTML 中使用它并链接它吗？

【解决方案2】：

您是否应该考虑这种方法？ jQuery UI Dialog window loaded within AJAX style jQuery UI Tabs

标题有点混乱。主要思想 - 从剩余的 url 加载内容。这比在 javascript 中构建“kind'a”模板要方便得多。

【讨论】：

感谢您的想法 :) 如果事情变得太麻烦，请记住！