jQuery UI 使我的选项卡在每次单击时都会重新加载

发布于 2024-08-11 13:15:13 字数 2816 浏览 5 评论 0原文

我正在创建一个使用 AJAX 加载选项卡的 Web 应用程序。我的问题是，如果我有多个选项卡，每次我再次单击它时（访问另一个选项卡后），jQuery 都会重新加载一个选项卡。

这是我的代码：

index.html:

<!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>Air Office - New file</title>
<!-- jQuery -->
<script type="text/javascript" src="jqueryui/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jqueryui/js/jquery-ui-1.7.2.custom.min.js"></script>
<link rel="stylesheet" href="jqueryui/css/custom-theme/jquery-ui-1.7.2.custom.css" />

<!-- Scripts -->
<script type="text/javascript" src="JS/main.js"></script>
</head>
<body>
<input type="button" onclick="newDoc();" value="New document" />
<div id="mainTabs">
<ul>
</ul>
</div>
</body>
</html>

main.js:

$(document).ready(function()
{
    //Create tabs
    $("#mainTabs").tabs({load: function()
    {
        //Make accordion from template selector
        $(".selectTemplate").accordion();
    }}).find(".ui-tabs-nav").sortable({axis:'x'});
    //Create new document tab
    newDoc();
});

function newDoc()
{
    //Create new tab
    $("#mainTabs").tabs('add', 'newdocument.html', 'New Document');
}

newdocument.html:

<div>
<h1>Please select a template</h1>
<div class="selectTemplate">
    <h3><a href="#">Document</a></h3>
    <div>
        <ul class="selectTemplateTable">
            <li>Blank</li>
            <li>Letter</li>
            <li>Envelope</li>
            <li>Business card</li>
        </ul>
    </div>
    <h3><a href="#">Spreadsheets</a></h3>
    <div>
        <ul class="selectTemplateTable">
            <li>Blank</li>
            <li>Check list</li>
            <li>Budget</li>
        </ul>
    </div>
    <h3><a href="#">Presentations</a></h3>
    <div>
        <ul class="selectTemplateTable">
            <li>White</li>
            <li>Black</li>
            <li>Nature</li>
            <li>Space</li>
        </ul>
    </div>
    <h3><a href="#">Form</a></h3>
    <div>
        <ul class="selectTemplateTable">
            <li>Survey</li>
            <li>Exam</li>
        </ul>
    </div>
</div>
</div>

我该如何解决这个问题？

谢谢，

原文

I'm creating a web application which loads tabs using AJAX. My problem is that if I have multiple tabs, jQuery reloads a tab every time I click it again (after visiting another tab).

Here is my code:

index.html:

<!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>Air Office - New file</title>
<!-- jQuery -->
<script type="text/javascript" src="jqueryui/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jqueryui/js/jquery-ui-1.7.2.custom.min.js"></script>
<link rel="stylesheet" href="jqueryui/css/custom-theme/jquery-ui-1.7.2.custom.css" />

<!-- Scripts -->
<script type="text/javascript" src="JS/main.js"></script>
</head>
<body>
<input type="button" onclick="newDoc();" value="New document" />
<div id="mainTabs">
<ul>
</ul>
</div>
</body>
</html>

main.js:

$(document).ready(function()
{
    //Create tabs
    $("#mainTabs").tabs({load: function()
    {
        //Make accordion from template selector
        $(".selectTemplate").accordion();
    }}).find(".ui-tabs-nav").sortable({axis:'x'});
    //Create new document tab
    newDoc();
});

function newDoc()
{
    //Create new tab
    $("#mainTabs").tabs('add', 'newdocument.html', 'New Document');
}

newdocument.html:

<div>
<h1>Please select a template</h1>
<div class="selectTemplate">
    <h3><a href="#">Document</a></h3>
    <div>
        <ul class="selectTemplateTable">
            <li>Blank</li>
            <li>Letter</li>
            <li>Envelope</li>
            <li>Business card</li>
        </ul>
    </div>
    <h3><a href="#">Spreadsheets</a></h3>
    <div>
        <ul class="selectTemplateTable">
            <li>Blank</li>
            <li>Check list</li>
            <li>Budget</li>
        </ul>
    </div>
    <h3><a href="#">Presentations</a></h3>
    <div>
        <ul class="selectTemplateTable">
            <li>White</li>
            <li>Black</li>
            <li>Nature</li>
            <li>Space</li>
        </ul>
    </div>
    <h3><a href="#">Form</a></h3>
    <div>
        <ul class="selectTemplateTable">
            <li>Survey</li>
            <li>Exam</li>
        </ul>
    </div>
</div>
</div>

How can I fix this?

Thanks,

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

我恋#小黄人 2024-08-18 13:15:13

我发现我必须使用缓存。我会回答我自己的问题来帮助别人。

将 cache: true 添加到 tabs() 标志：

//Create tabs
 $("#mainTabs").tabs({load: function()
 {
  //Make accordion from template selector
  $(".selectTemplate").accordion();
 }, cache: true})

I found out that I must use cache. I'll answer my own q to help others.

Add cache: true to the tabs() flags:

//Create tabs
 $("#mainTabs").tabs({load: function()
 {
  //Make accordion from template selector
  $(".selectTemplate").accordion();
 }, cache: true})

回复收藏 0 原文

~没有更多了~