在調整窗口大小時調整滑塊的寬度/高度

我正在創建一個在調整瀏覽器窗口大小時動態調整大小的網站。這是通過使用CSS中的百分比實現的。不過，我還需要使用手風琴滑塊來調整瀏覽器窗口的大小，我認爲這不能用CSS來完成。我認爲解決這個問題的最好方法是使用jQuery，但我無法弄清楚如何去做。窗口大小調整時，如何更改滑塊的高度和寬度。任何幫助，將不勝感激。在調整窗口大小時調整滑塊的寬度/高度

頁面位於：[鏈接刪除]

來源

2010-12-06 GhostPool

沒有看到你的Kwicks jQuery代碼這是很難給出一個很好的答案，但我可以告訴，你最好的賭注是計算當前窗口的大小與JS，然後設置您的Kwicks手風琴的「最小」尺寸，然後相應地刷新它。

編輯：瞭解更多信息ghostpool，沿着這些線路

//after acknowledging window size change 
var minsize = applicableAccordianWidth/numberOfElements; 
$('.kwicks').kwicks({ 
    min: minsize, 
    spacing: 5 
});

您應該能夠重新初始化kwicks容器，併發送選項基於元素的由分割尺寸的最小尺寸的東西手風琴中的元素數量。

來源

2010-12-06 18:51:43

我使用下面的腳本沒有任何更改：http://kwicks.googlecode.com/svn/branches/v1.5.1/Kwicks/jquery.kwicks-1.5.1.js。我和你一起研究當前的窗口大小，我認爲它只是`jQuery（window）.width（）` - 但我沒有遵循，然後制定出手風琴的最小寬度？ – GhostPool 2010-12-06 19:32:48

@GhostPool，希望我的編輯應該給你更多的繼續。 – 2010-12-06 19:44:22

確切的方法將取決於您用於滑塊的插件，但您需要先在resize事件中附加一個函數。這裏有一些文檔：http://api.jquery.com/resize/

和示例：

$(function() { 
    $(window).resize(function() { 
     //do your resizing stuff here 
     alert('You resized me!'); 
    }); 
});

來源

2010-12-06 18:54:02 Ender

下面的代碼將容納尺寸調整

(function ($){ 
    $(window).resize(function(){ 
    var w = $('#kwicks').width(); 
    var eachw = (w/5.0); 
console.log(w,eachw); 
    $('.kwick').css('width',eachw+'px').css('left',function(idx){return idx*eachw}); 
    }); 
})(jQuery);

，但你還需要告訴插件使用新的值當動畫時，我不知道他們是否支持這一點。

來源

2010-12-06 19:27:35

在調整窗口大小時調整滑塊的寬度/高度

回答

相關問題