javascript-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>
标签:jquery-ui-tabs,jquery-ui,jquery-ui-dialog,javascript,jquery 来源: https://codeday.me/bug/20191031/1973319.html