jquery-ui - 带有来自模板字符串的选项卡的 JQuery UI 对话框

Question

我正在尝试创建一个 JQuery-UI 对话框，其中嵌入了一个 jquery-ui 选项卡式结构。这是我的功能：

 <script type="text/javascript" language="javascript" charset="utf-8">

 function createDialog(title, text) {
var tstr="<div id='tabs' >"
+"<ul>"
+"<li><a href='#tabs-1'>A</a></li>"
+"<li><a href='#tabs-2'>B</a></li>"
+"</ul>"
+"<div id='tabs-1'>"
+"A Stuff Goes Here"
+"</div>"
+"<div id='tabs-2'>B Stuff Goes Here"
+"</div>"
+"</div>"
 return $("<div class='dialog' title='" + title + "'><p>" + tstr + "</p></div>")
 .dialog({
resizable:true,
height:480,
width:650,
modal:true,
buttons: {
        "Dismiss": function() {
            $( this ).dialog( "close" );
        }
    }
});
tabs.tabs();

}

</script>

调用该函数时会出现对话框，但选项卡被格式化为链接。谁能给我一个想法，什么是错的？请注意，该函数是从 JQuery 数据表回调中调用的。

Answer 1

1. 您的示例中未定义“选项卡”
2. 由于您在返回中创建了一个对话框，因此您需要将选项卡调用与对话框调用链接起来。

例如：...

 return $("<div class='dialog' title='" + title + "'><p>" + tstr + "</p></div>")
     .dialog({
    resizable:true,
    height:480,
    width:650,
    modal:true,
    buttons: {
            "Dismiss": function() {
                $( this ).dialog( "close" );
            }
        }
    }).tabs();

你在正确的道路上，但由于“tabs()”在返回后被调用，它永远不会执行。此外，由于未定义“tabs”变量，您会收到参考错误。