jQuery UI选项卡和对话框

Question

如何在点击时将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> 

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

编辑，如果你想现有的元素，隐藏与显示这个元素：无。

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

Answer 2

可能你应该考虑这种方法吗？ jQuery UI Dialog window loaded within AJAX style jQuery UI Tabs

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