jquery檢測調整大小的瀏覽器和tabSlideOut插件

我使用tabSlideOut插件（http://www.building58.com/examples/tabSlideOut.html），這與我調整瀏覽器大小時的作用很大。代碼基本上檢查文檔就緒和瀏覽器調整大小的瀏覽器大小，以確定是否應顯示選項卡。但是，在調整大小時，選項卡無法正常工作，並在單擊時滑入和滑出多次。任何人都可以協助jquery檢測調整大小的瀏覽器和tabSlideOut插件

function doMenu() { 

    var width = $(window).width(); 

    if (width < 530) { 


    $('.slide-out-div').tabSlideOut({ 
     tabHandle: '.handle', 
     pathToTabImage: null, 
     imageHeight: null, 
     imageWidth: null, 
     tabLocation: 'right', 
     speed: 300, 
     action: 'click', 
     topPos: '0', 
     leftPos: '20px', 
     fixedPosition: false, 
     toogleHandle: false 
    }); 
    } 

} 
$(document).ready(doMenu); 
$(window).resize(doMenu);

來源

2013-04-02 LeeTee

你可能會初始化tabSlideOut插件多次 - 每一次瀏覽器窗口大小它增加了運行的滑動動畫新click處理程序。嘗試類似：

var menuInitialized = false; 
var handle = null; 
function doMenu() { 
    if(handle === null) { 
     handle = $(".handle"); 
    } 
    var width = $(window).width(); 
    if (width < 530) { 
     if(!menuInitialized) { 
      //only call $.tabSlideOut once 
      menuInitialized = true; 
      $('.slide-out-div').tabSlideOut({ 
       tabHandle: '.handle', 
       pathToTabImage: null, 
       imageHeight: null, 
       imageWidth: null, 
       tabLocation: 'right', 
       speed: 300, 
       action: 'click', 
       topPos: '0', 
       leftPos: '20px', 
       fixedPosition: false, 
       toogleHandle: false 
      }); 
     } 
     handle.show(); 
    } else { 
     handle.hide(); 
    } 
} 
$(document).ready(doMenu); 
$(window).resize(doMenu);

來源

2013-04-02 18:22:03 pfyod

嗨，謝謝你的回答。這適用於文檔準備，但不適用於瀏覽器調整大小，它看起來不像初始化標籤菜單 – LeeTee

除非我誤解了你，它確實有效。我創建了一個小提琴來測試：http://jsfiddle.net/Zmu5C/ - 你可以玩調整右欄的大小。在'ready'和'resize'被初始化，如果在那個事件窗口小於530px寬（初始化一次）;顯示/隱藏句柄（當> = 530px時隱藏，當<530px時顯示）。 – pfyod

不知道爲什麼它不適合我的項目。當瀏覽器的大小調整到<530時，顯示的整個幻燈片div都會顯示，並且單擊該句柄也不會將其關閉。我認爲這將是我的CSS。 – LeeTee

jquery檢測調整大小的瀏覽器和tabSlideOut插件

回答

相關問題