douganggu4392
2014-05-15 10:25
浏览 81
已采纳

在jquery ui tabs中加载不同的页面很慢,有时会崩溃

My boss wanted different process (which were originally individual pages) to show up on tabs

anyway I'm using the jquery ui tabs

http://jqueryui.com/tabs/

my code

jquery

    <script type="text/javascript">
$(document).ready(function()
{ 
$("#tabs-1").load("transaction.php");
$("#tabs-2").load("book.php");
$("#tabs-3").load("schedule.php");
});
</script>

html

<ul>
<li><a href="#tabs-1">Transaction</a></li>
<li><a href="#tabs-2">Book</a></li>
<li><a href="#tabs-3">Schedule</a></li>
</ul>
<div id="tabs-1">
</div>
<div id="tabs-2">
</div>
<div id="tabs-3">

each page pulls up data in mysql database the problem is, book.php has lots of data so loading it is slow and sometimes the browser crashes

is this implementation possible or should I explain this that using tabs is not recommended, this should be showed using individual pages?

图片转代码服务由CSDN问答提供 功能建议

我的老板希望在标签上显示不同的过程(最初是单独的页面) \ n

无论如何我正在使用jquery ui标签

http:// jqueryui.com/tabs/

我的代码

jquery

 &lt  ; script type =“text / javascript”&gt; 
 $(document).ready(function()
 {
 $(“#tabs-1”)。load(“transaction.php”); 
 $  ( “#选项卡-2”)的负载( “book.php中”);。
 $的( “#选项卡-3”)的负载( “schedule.php”); 
}); 
&LT; /脚本&GT;  
   
 
 

html

 &lt; ul&gt; 
&lt; li&gt;&lt; a href =“#tabs-  1“&gt;交易&lt; / a&gt;&lt; / li&gt; 
&lt; li&gt;&lt; a href =”#tabs-2“&gt;图书&lt; / a&gt;&lt; / li&gt; 
&lt; li&gt;&lt; a  href =“#tabs-3”&gt;日程&lt; / a&gt;&lt; / li&gt; 
&lt; / ul&gt; 
&lt; div id =“tabs-1”&gt; 
&lt; / div&gt; 
&lt; div id  =“tabs-2”&gt; 
&lt; / div&gt; 
&lt; div id =“tabs-3”&gt; 
   
 
 

每个页面都会提取数据 mysql数据库 问题是,book.php有很多 加载它的数据很慢,有时浏览器崩溃

这个实现是否可行,或者我应该解释一下,不建议使用制表符,这应该使用单独的页面显示?

  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • dshqd84261 2014-05-15 10:30
    已采纳

    what you could do is get the book.php to only load when tab 2 is clicked.

    $("#tabs-2").click(function(){
        $("#tabs-2").load("book.php");
    });
    

    this should help to stop it crashing straight away. if it doesn't help you will need to optimise you query.

    you could also try using ajax.

    put this in you document load and hopefully it should load the contents of book.php into the tab.

      $.get( "book.php", function(book) {
        $("#tabs-2").html(book);
      });
    

    Jquery Sample

    $.ajax({
       type: "POST",
       url: "page_url",
       data: $("#advserc").serialize() + "&pagenum=" + page, // i sent the page through with it
      beforeSend:function(){  // this unhides a div with gif loading image in it.
            //show gif here, eg:
            $("#loading").show();
    
        },
        complete:function(){
            //hide gif here, eg:
            $("#loading").hide(); // this hides the div
        },
       success: function(data){
          $("#content-container").html(data); // here i fill the div with the dat from the php page
       }
    });
    
    已采纳该答案
    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题