Jquery ui tabs ajaxコンテンツの問題

Question

私が取り組んでいるプロジェクトには、たくさんのjqueryとjqueryuiが含まれています。すべてのページには、1つ以上のjquery-uiタブがあり、すべてが組み込みのajaxで動作します。私はいくつかの問題があります。 まず、ほとんどすべてのページに異なるjqueryプラグインがあります。私はajaxを抜き出していますが、私はタブを表示しているインデックスページでも使用されているすべての要求に同じjquery libraruを何度も繰り返しています。 jqueryを一度インクルードし、それを私が引っ張っているすべての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に新しいです。

私は誤りがある場合、私の英語については残念です。

ありがとうございました。

EDIT：私はちょっとjs/jsへのjsライブラリの相対パスを変更することで私の問題を解決しました。私はページに相対パスを与えています。私はajaxを呼び出していません。しかし、もしあなたが偉大な他のヒントを持っているなら。

Answer 1

メインページ（あなたのタブがある場所）にjsを入れるだけで、コンテンツはajax経由で読み込まれますが、同じページに表示されるので同じCSSが適用されます。

ベースページで使用するのが理にかなっていますが、実際にはすべてのページに含める必要がある場合は、インクルードサーバー側でヘッダーにキーを付け、jsファイルの天井があるかどうかを確認できます追加する前に追加されました