2010-11-22 43 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

回答