jQuery ui選項卡使用ajax和fancybox

我有一個頁面有幾個選項卡，其中使用fancybox，所有工作良好，直到你選擇第二個選項卡，然後fancybox停止工作。jQuery ui選項卡使用ajax和fancybox

主頁：

<!doctype html> 

<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>WebShop</title>  

    <link rel="stylesheet" type="text/css" href="/includes/igepa.css" /> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" /> 

    <script src="http://code.jquery.com/jquery-1.8.2.js"></script> 
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>  

    <script> 
    $(function() { 
     $("#tabs").tabs({ 
      beforeLoad: function(event, ui) { 
       $('.ui-tabs-hide').empty(); 
       ui.jqXHR.error(function() { 
        ui.panel.html(
         "Couldn't load this tab. We'll try to fix this as soon as possible. " + 
         "If this wouldn't be a demo."); 
       }); 
      }, 
     }); 
    }); 
    </script> 
</head> 
<body> 

<div id="tabs"> 
    <ul> 
     <li><a href="test.htm">Test</a></li> 
     <li><a href="test.htm">Test</a></li> 
    </ul> 
</div> 

</body> 
</html>

TEST.HTM：

<html> 

    <head> 
     <title>Test</title> 

     <link rel="stylesheet" href="http://www.igepa.be/includes/fancybox/source/jquery.fancybox.css" type="text/css" media="screen" /> 
     <link rel="stylesheet" href="http://www.igepa.be/includes/fancybox/source/helpers/jquery.fancybox-buttons.css" type="text/css" media="screen" /> 
     <link rel="stylesheet" href="http://www.igepa.be/includes/fancybox/source/helpers/jquery.fancybox-thumbs.css" type="text/css" media="screen" />  

     <script src="http://www.igepa.be/includes/jqgridOpenSource/js/jquery-1.7.2.min.js" type="text/javascript"></script> 
     <script src="http://www.igepa.be/includes/jqgridOpenSource/js/i18n/grid.locale-nl.js" type="text/javascript"></script> 
     <script src="http://www.igepa.be/includes/jqgridOpenSource/js/jquery.jqGrid.min.js" type="text/javascript"></script>     

     <script type="text/javascript" src="http://www.igepa.be/includes/fancybox/source/jquery.fancybox.pack.js"></script> 
     <script type="text/javascript" src="http://www.igepa.be/includes/fancybox/source/helpers/jquery.fancybox-buttons.js"></script> 
     <script type="text/javascript" src="http://www.igepa.be/includes/fancybox/source/helpers/jquery.fancybox-media.js"></script> 
     <script type="text/javascript" src="http://www.igepa.be/includes/fancybox/source/helpers/jquery.fancybox-thumbs.js"></script>   

     <script> 
      $(document).ready(function(){ 
       $(".fancybox").fancybox();    
      });    
     </script> 
    </head> 

<body> 
    <a class="fancybox" rel="group" href="http://www.igepa.be/img/items/01-0000-0002Big.jpg"><img src="http://www.igepa.be/img/items/01-0000-0002.jpg" /></a> 
</body>

實施例：http://www.igepa.be/phdj/tabs/tab.htm

來源

2012-11-14 PhDJ

切換標籤時碰到一個JS錯誤。上的test.html引用jQuery是不工作，更改：

http://www.igepa.be/js/jquery-1.7.2.min.js

有了正確的jQuery的網址，如：

<script src="http://code.jquery.com/jquery-1.8.2.js"></script>

所以你的瀏覽器不加載一個新的jQuery文件，並使用已經緩存版本。

來源

2012-11-14 14:48:14 Skatox

比較遺憾的是，改變了代碼。 – PhDJ

我找到了解決方案，如果我將所有的CSS和JS鏈接移動到「頂級」工作正常。

這是工作代碼：

<!doctype html> 

<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>WebShop</title>  

    <link rel="stylesheet" type="text/css" href="/includes/igepa.css" /> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" /> 

    <script src="http://code.jquery.com/jquery-1.8.2.js"></script> 
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>  

     <link rel="stylesheet" href="http://www.igepa.be/includes/fancybox/source/jquery.fancybox.css" type="text/css" media="screen" /> 
     <link rel="stylesheet" href="http://www.igepa.be/includes/fancybox/source/helpers/jquery.fancybox-buttons.css" type="text/css" media="screen" /> 
     <link rel="stylesheet" href="http://www.igepa.be/includes/fancybox/source/helpers/jquery.fancybox-thumbs.css" type="text/css" media="screen" />  

     <script src="http://www.igepa.be/includes/jqgridOpenSource/js/jquery-1.7.2.min.js" type="text/javascript"></script> 
     <script src="http://www.igepa.be/includes/jqgridOpenSource/js/i18n/grid.locale-nl.js" type="text/javascript"></script> 
     <script src="http://www.igepa.be/includes/jqgridOpenSource/js/jquery.jqGrid.min.js" type="text/javascript"></script>     

     <script type="text/javascript" src="http://www.igepa.be/includes/fancybox/source/jquery.fancybox.pack.js"></script> 
     <script type="text/javascript" src="http://www.igepa.be/includes/fancybox/source/helpers/jquery.fancybox-buttons.js"></script> 
     <script type="text/javascript" src="http://www.igepa.be/includes/fancybox/source/helpers/jquery.fancybox-media.js"></script> 
     <script type="text/javascript" src="http://www.igepa.be/includes/fancybox/source/helpers/jquery.fancybox-thumbs.js"></script>   

    <script> 
    $(function() { 
     $("#tabs").tabs({ 
      beforeLoad: function(event, ui) { 
       $('.ui-tabs-hide').empty(); 
       ui.jqXHR.error(function() { 
        ui.panel.html(
         "Couldn't load this tab. We'll try to fix this as soon as possible. " + 
         "If this wouldn't be a demo."); 
       }); 
      }, 
     }); 
    }); 
    </script> 
</head> 
<body> 

<div id="tabs"> 
    <ul> 
     <li><a href="test.htm">Test</a></li> 
     <li><a href="test.htm">Test</a></li> 
    </ul> 
</div> 


</body> 
</html>

TEST.HTM：

<html> 

    <head> 
     <title>Test</title> 

     <script> 
      $(document).ready(function(){ 
       $(".fancybox").fancybox();    
      });    
     </script> 
    </head> 

<body> 
    <a class="fancybox" rel="group" href="http://www.igepa.be/img/items/01-0000-0002Big.jpg"><img src="http://www.igepa.be/img/items/01-0000-0002.jpg" /></a> 
</body>

來源

2012-11-14 14:56:06 PhDJ

jQuery ui選項卡使用ajax和fancybox

回答

相關問題