Jquery ui标签ajax内容问题

时间:2011-09-12 10:32:59

标签: javascript jquery jquery-ui jquery-plugins

我正在研究的项目包含大量的jquery和jqueryui。在每个页面中都有一个或多个jquery-ui选项卡,所有这些选项卡都使用内置的ajax。我有几个问题。 首先,几乎每个页面都有不同的jquery插件,我通过ajax,我在每个请求中反复包含相同的jquery libraru,这也是我在显示标签的索引页面中使用的。有没有办法包括jquery一次,并在我拉的每个ajax页面上使用它。这个问题也会导致几个不同的问题,比如我在不同的选项卡js之后单击该选项卡。不管用。我在下面放了一些代码,这样你就可以轻松理解我的问题了。

ajax / slider.php(此页面通过$ _GET获取id并生成一个滑块,我无法使其与jquery 1.6.2一起使用)

<link rel="stylesheet" type="text/css" href="ajax/advanced-slider.css" media="screen"/>
<script type="text/javascript" src="ajax/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="ajax/jquery.advancedSlider.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('.slider').advancedSlider({
          width:600, 
          height:228, 
          alignType: 'centerCenter',
          hideTimer:true, 
          effectType:'height', 
          horizontalSlices:'10', 
          verticalSlices:'1', 
          slicePattern:'leftToRight', 
          slicePoint:'centerBottom',
          sliceDuration:'500', 
          captionSize:'228',
          showThumbnails: false,
          navigationButtons: false,
          navigationArrows: false,
          slideshowControls: false  });
    });

</script>

AJAX / gallery.php

<link rel="stylesheet" type="text/css" href="../js/fancybox/jquery.fancybox-1.3.4.css" media="screen"/>
<script type="text/javascript" src="../js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="../js/fancybox/jquery.fancybox-1.3.4.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
    //$.noConflict(); // (that piece of code sometimes work sometimes doesn't and i have no idea why)
    $('a.grouped_elements').fancybox({
      titlePosition: 'inside'
    });
      });


</script>

ajax / g_maps.php

<script type="text/javascript" src="../js/jquery-1.6.2.min.js"></script>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true&amp;key=ABQIAAAAmwC95iK7Tp7hI6hDlNqLhBS5NlhQfHS3VfXEycw6BkztwAjcGBRR3F2hVVVhA0GciYJcjlYGoArYDg" type="text/javascript"></script>
<script type="text/javascript" src="../js/jquery.gmap-1.1.0-min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
     $.noConflict();
      $("#maps").gMap({ markers: [{ latitude: <?php echo $maps_x; ?>,
                              longitude: <?php echo $maps_y; ?>,
                              html: "<?php echo $maps_adi.'<br />'.$maps_adres; ?>",
                              popup: true }],
                              zoom: 16 });

    });


</script>

还有页面我正在使用标签

<link type="text/css" href="css/style.css" rel="stylesheet" />  
<link type="text/css" href="css/custom-theme/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
<link type="text/css" href="css/jqueryui-project-spesific.css" rel="stylesheet" />
<link type="text/css" href="js/countdown/jquery.countdown.css" rel="stylesheet" />
<link type="text/css" href="js/fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" />
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true&amp;key=ABQIAAAAmwC95iK7Tp7hI6hDlNqLhBS5NlhQfHS3VfXEycw6BkztwAjcGBRR3F2hVVVhA0GciYJcjlYGoArYDg" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/countdown/jquery.countdown.min.js"></script>
<script type="text/javascript" src="js/countdown/jquery.countdown-tr.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.15.custom.min.js"></script>
<script type="text/javascript" src="js/jqueryui-tr.js"></script>

<script type="text/javascript">
       $(document).ready(function(){

        $( "#tabs" ).tabs({
                cache: true,
                ajaxOptions: {
                error: function( xhr, status, index, anchor ) {
                            $( anchor.hash ).html(
                            "Some error message");
                            }
        }
        });
 });
</script>

我想你会对我的问题有所了解。我对js很新,所以如果你发现任何与这个问题毫无关系的错误随意发生。

如果我有任何错误,请抱歉我的英文。

感谢。

编辑:我解决了我的问题,将ajax页面中js libs的相对路径更改为js / ..所以我给了相对于页面的路径我调用ajax而不是ajax页面本身。但是,如果您有任何其他提示,那就太棒了。

1 个答案:

答案 0 :(得分:0)

你只需要在主页面(你有你的标签)中包含js,内容是通过ajax加载的,但它将在同一页面上,所以同样的js和css将适用。

我习惯在我的基页上使用它,因为它更有意义,但是,如果你真的需要在每个页面上都有它,你可以让包含服务器端在标题上给它一个键并检查js文件是否有'在添加之前已被包括