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

回答

相关问题