数据库生成jquery选项卡
|
更新2：
对于更简单的脚本，您可以使用jquery live与动态创建的dom一起使用。这是问题所在吗？
更新1：
我试过将ѭ0的ajax从ѭ1移出，这会产生奇怪的结果，即它将只返回未格式化的标签名称，而不会包含标签内容。然后单击这些未格式化的选项卡，只需打开一个新窗口，而不显示选项卡内容。
原始问题：
以下脚本运行良好，只需创建3个选项卡，并根据查询字符串
tab
tabs.aspx
<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<title></title>
<script type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js\"></script>
<script type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js\"></script>
<link type=\"text/css\" href=\"http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css\" rel=\"stylesheet\" />
<script type=\"text/javascript\" language=\"javascript\">
$(document).ready(function() {
$(\"#tabs\").tabs({
ajaxOptions: {
success: function(){
$( \".portlet\" ).addClass( \"ui-widget ui-widget-content ui-helper-clearfix ui-corner-all\" )
.find( \".portlet-header\" )
.addClass( \"ui-widget-header ui-corner-all\" )
.end()
.find( \".portlet-content\" );
$(\".column\").disableSelection();
}
}
});
});
</script>
<style type=\"text/css\">
.column { width: 170px; float: left; padding-bottom: 100px; }
.portlet { margin: 0 1em 1em 0; }
.portlet-header { margin: 0.3em; padding-bottom: 4px; padding-left: 0.2em; }
.portlet-header .ui-icon { float: right; }
.portlet-content { padding: 0.4em; }
.ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; }
.ui-sortable-placeholder * { visibility: hidden; }
</style>
</head>
<body>
<div id=\"tabs\">
<ul>
<li class=\"tab\" id=\"tab_1\"><a href=\"tabs.aspx?tab=1\">Default</a></li>
<li class=\"tab\" id=\"tab_2\"><a href=\"tabs.aspx?tab=2\">Reports</a></li>
<li class=\"tab\" id=\"tab_3\"><a href=\"tabs.aspx?tab=3\">Other</a></li>
</ul>
</div>
</body>
</html>
id=\"tabs\"
id=\"tabs\"
<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<title></title>
<script type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js\"></script>
<script type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js\"></script>
<link type=\"text/css\" href=\"http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css\" rel=\"stylesheet\" />
<script type=\"text/javascript\" language=\"javascript\">
$(document).ready(function() {
$(\"#tabs\").tabs({
ajaxOptions: {
success: function(){
$( \".portlet\" ).addClass( \"ui-widget ui-widget-content ui-helper-clearfix ui-corner-all\" )
.find( \".portlet-header\" )
.addClass( \"ui-widget-header ui-corner-all\" )
.end()
.find( \".portlet-content\" );
$.ajax({
url: \'get_tab_frame.aspx?rand=\' + Math.random(),
type: \'GET\',
error: function(xhr, status, error)
{
alert(status);
alert(xhr.responseText);
},
success: function(results)
{
$(\"#tabs\").empty().html(results);
}
});
$(\".column\").disableSelection();
}
}
});
});
</script>
<style type=\"text/css\">
.column { width: 170px; float: left; padding-bottom: 100px; }
.portlet { margin: 0 1em 1em 0; }
.portlet-header { margin: 0.3em; padding-bottom: 4px; padding-left: 0.2em; }
.portlet-header .ui-icon { float: right; }
.portlet-content { padding: 0.4em; }
.ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; }
.ui-sortable-placeholder * { visibility: hidden; }
</style>
</head>
<body>
<div id=\"tabs\"> </div>
</body>
</html>
get_tab_frame.aspx
<ul>
<li class=\"tab\" id=\"tab_1\"><a href=\"tabs.aspx?tab=1\">Default</a></li>
<li class=\"tab\" id=\"tab_2\"><a href=\"tabs.aspx?tab=2\">Reports</a></li>
<li class=\"tab\" id=\"tab_3\"><a href=\"tabs.aspx?tab=3\">Other</a></li>
</ul>
没有找到相关结果
已邀请:
2 个回复
乐遣杀屎
贡炮逗握惫