jQuery UI选项卡和对话框
如何在点击时将jQuery ui选项卡添加到对话框? 这是我的代码。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>
<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>
谢谢:)工作得很好! – 2013-03-20 05:46:53
@Gregorie另外,我可以在我的HTML中使用'var tabs'来代替它吗? – 2013-03-20 05:52:27
@SnakeEater:看我的编辑 – Gregoire 2013-03-20 08:19:07
可能你应该考虑这种方法吗? jQuery UI Dialog window loaded within AJAX style jQuery UI Tabs
标题有点混乱。主要想法 - 从剩余的网址加载内容。这比在javascript中构建“kind'a”模板要方便得多。
感谢您的想法:)如果事情变得过于繁琐,请记住它! – 2013-03-20 05:56:27
那么会发生什么情况? – 2013-03-18 08:13:27
@WimOmbelets我认为你的意思是atm?但无论如何,当用户点击“高级付款人”href对话框是从JS使用附加生成的。 – 2013-03-18 08:15:28
你想在哪里创建标签?我没有看到任何相关的HTML或JS上哪些标签需要构建 – 2013-03-18 08:19:38