2010-11-22 100 views
1

我正在嘗試爲將div容器轉換爲可滾動容器的移動網站創建一個jQuery插件。我通過將所有在div容器內的孩子包裝在另一個絕對定位的div容器中來實現這一點。然後,我修改內部div的頂部或左側CSS樣式,以模擬上下或左右移動文本。我正在使用觸摸事件偵聽器來確定何時移動滾動div。用於移動網站的jQuery可滾動Div

但是,我有一些麻煩設置我的內部滾動div的寬度()。下面是代碼示例:

myObj.ready(function(){ 
myObj.css({ 'position' : 'relative', 'overflow' : 'hidden' }).wrapInner('<div id="scrollCntr">'); 
$('#scrollCntr').prepend("<img src='scrollBar.png' id='scrollBar' class='horizontal'"); 
$('#scrollCntr').height(myObj.height()); 

if (config.width <= 0) { 
    $('#scrollCntr').children().each(function(){ 
     if ($(this).css('display') == 'inline' || $(this).css('float') == 'left' || $(this).css('float') == 'right') { 
      totalWidth += $(this).width(); 

      for(var i = 0; i < boxProps.length; i++) 
       if ($(this).css(boxProps[i]) != "") 
        totalWidth += parseInt($(this).css(boxProps[i]).replace(/px/i, '').replace(/em/i, '').replace(/pt/i, '')); 
     } 
    }); 
} else { 
    totalWidth = config.width; 
} 

console.log(totalWidth); 
$('#scrollCntr').width(totalWidth); 
console.log($('#scrollCntr').width()); 

});

在這種情況下,config.width設置爲719,myObj是滾動的容器div。我不確定問題是什麼。在我的演示中,我沒有任何問題,當我的孩子元素只是圖像,但是當我將它應用到我的移動網站時,其中div元素的子元素在哪裏出現問題。也許孩子的元素沒有及時加載?但這並不能解釋爲什麼我不能設置滾動div的寬度。它絕對被加載。我不知道問題是什麼...

+0

我想我找出了問題所在。容器div被設置爲顯示:none,直到用戶採取特定操作。因此,它可以設置寬度,但不能檢索這些寬度。有沒有一種方法可以添加一個事件處理程序來偵聽我的容器div何時顯示(display:block)? – 2010-11-22 17:21:43

回答