jquery-ui-slider庫擾亂我的舊jQuery功能

我在我的網站上有一個選項卡式的內容。基於HTML如下：jquery-ui-slider庫擾亂我的舊jQuery功能

<ul class="tabContainer"> 
</ul> 

<div id="tabContent"> 
    <div id="contentHolder"> 
     <!-- The AJAX fetched content goes here --> 
    </div> 
    <div id="pagination"></div> 
</div>

管理該HTML的含量（生成標籤，執行AJAX，其獲取的PHP頁面，並在拉片保持體返回的結果）的函數：

$(document).ready(function(){ 

    var Tabs = { 
     '1' : 'page1.php?p='+var, 
     '2' : 'page2.php?p='+var, 
     '3' : 'page3.php?p='+var, 

    } 
    var colors = ['blue','blue','blue']; 

    var topLineColor = { 
     blue:'lightblue', 
     blue:'lightblue', 
     blue:'lightblue',} 

    var z=0; 
    $.each(Tabs,function(i,j){ 

     var tmp = $('<li><a href="" class="tab '+colors[(z++%4)]+'">'+i+' <span class="left" /><span class="right" /></a></li>'); 


     tmp.find('a').data('page',j); 


     $('ul.tabContainer').append(tmp); 
    }) 


    var the_tabs = $('.tab'); 

    the_tabs.click(function(e){ 

     var element = $(this); 

     if(element.find('#overLine').length) return false; 

     var bg = element.attr('class').replace('tab ',''); 

     $('#overLine').remove(); 

     $('<div>',{ 
      id:'overLine', 
      css:{ 
       display:'none', 
       width:element.outerWidth()-2, 
       background:topLineColor[bg] || 'white' 
      }}).appendTo(element).fadeIn('slow'); 


     if(!element.data('cache')) 
     { 

      $.get(element.data('page'),function(msg){ 
       $('#contentHolder').html(msg); 
       element.data('cache',msg); 
      }); 
     } 
     else { 
     $('#contentHolder').html(element.data('cache')); 

     } 
     e.preventDefault(); 

    }) 

    the_tabs.eq(2).click(); 

});

如您所見，單擊一個選項卡時，選項卡頂部將出現一個覆蓋線，寬度等於其寬度。

問題： 使用id =分頁的DIV將包含jPaginator，這是使用jquery-ui-slider的碼。 jPaginator的作用是分頁，顯示一個滑塊並顯示我們在div＃contentHolder中放入的內容的頁數。問題是，當我包含jquery-ui-slider庫時，標籤的覆蓋不能正確工作。當我從標題中刪除庫腳本標記時，上面的寬度是可以的，並且在點擊標籤之間切換的方式也可以。

我認爲jquery-ui-slider包含的功能擾亂了我的功能tab() !!幫助表示讚賞。

來源

2013-03-16 whiteletters in blankpapers

你可以創建一個jsfiddle.net來顯示這個問題嗎？ – mplungjan 2013-03-16 10:47:59

我從來沒有使用jsfiddle.net，但我認爲這是機會，請給我一些時間，我會回到這裏給它。感謝您對此事的反饋。 – 2013-03-16 10:50:34

哦，經過半天的搜索，我想我應該在SO上寫一篇文章，在5分鐘內找到解決方案。我給解決方案作爲答案。感謝你的mplungjan爲你的時間和建議jsfiddle，我會學習如何使用它。 – 2013-03-16 10:54:48

我通過將false作爲outerWidth函數的參數解決了該解決方案。

width:element.outerWidth(false)-2,

這是一個臨時的解決方案，因爲在我的情況真實的建議是保持同步，並始終保持最新的jQuery和jQuery UI的滑塊的版本。

謝謝你的時間。

來源

2013-03-16 11:02:16

我在'功能選項卡（var） {...}中看到了令人不安的包裝document.ready'您可能需要刪除該文件 – mplungjan 2013-03-16 11:45:35

謝謝mplungjan您平常的協作。如果我理解得很好，我應該從函數內部移除document.ready，然後在document.ready之後調用函數？就是這個？ – 2013-03-16 14:36:26

不，只是刪除功能，並保留文件。已知 – mplungjan 2013-03-16 14:57:33

jquery-ui-slider庫擾亂我的舊jQuery功能

回答

相關問題