使Mobiscroll高度和宽度响应

使用Mobiscroll，高度和宽度在原始JQuery实现中设置。当屏幕大小发生变化时，我目前的宽度和高度会随着CSS @media查询而改变。我想知道是否有原始JQuery实现方式。使Mobiscroll高度和宽度响应

我的JQuery

$('ul.scroll-list select').scroller({ 
    preset: 'select', 
    theme: 'ios', 
    display: 'inline', 
    mode: 'scroller', 
    inputClass: 'i-txt', 
    width: 50, 
    height:50, 
    onShow: function (html, instance) { 
     $("input[id$='_dummy'], .scroll-list label").hide(); 
    } 
});

我的CSS

@media only screen and (max-width: 959px) { 
    .ios .dww li {font-size:0.7em;} 
    .dww.dwrc {height:150px !important;} 
}

想知道是否有这样做的更清洁的方式，通过主题或一些JQuery的实现。

谢谢！

来源

2012-11-01 Desmond

您可以通过获取屏幕宽度由.width()

$(selector).width(); //get the width you want 
$(window).width(); // returns width of browser viewport 
$(document).width(); // returns width of HTML document

来源

2012-11-01 03:20:22

非常好，感谢您的帮助NullPointer。我已经发布了我的最终代码作为答案。 – Desmond

@Desmond非常欢迎.... ;-) –

再次感谢您对此的回复，它运作良好。我现在遇到的问题是在您更改手机方向时更改尺寸。整个网站使用@mediaqueries调整大小，但由于高度和宽度都是在Javascript中设置的，因此在刷新浏览器之前它不会调整大小。这是一个解决方案吗？再次感谢 – Desmond

我解决了这个问题做到这一点，这里的最终代码：

// Add mobi scroller to fares page 
    var scrollWidth = $('.scroll-list li').width() - 10; 
    var scrollHeight = $('.scroll-list li').height(); 

    $('ul.scroll-list select').scroller({ 
     preset: 'select', 
     theme: 'ios', 
     display: 'inline', 
     mode: 'scroller', 
     inputClass: 'i-txt', 
     width: scrollWidth, 
     height: scrollHeight, 
     onShow: function (html, instance) { 
      $("input[id$='_dummy'], .scroll-list label").hide(); 
     } 
    });

来源

2012-11-02 01:35:46 Desmond

这里是我做了关于调整的mobiscroll日期控制方向变化：

function setDatePickerWidthAndHeight() 
{ 
    var scrollWidth = ($("div[id='main_content']").width())/4; 
    var scrollHeight = scrollWidth/2.5; 
    var selectorBase1 = "date_1"; 
    $("#input_" + selectorBase1).eq(0).scroller('option', 'width', scrollWidth); 
    $("#input_" + selectorBase1).eq(0).scroller('option', 'height', scrollHeight); 
} 

$(function() { 
$(window).bind('orientationchange', function (event) { 
       setTimeout(setDatePickerWidthAndHeight(),100); 
      }); 
}

另外，我用类似于这个CSS（没有太大的不同ENT比你）在媒体查询来调整字体大小（“TD .dwwr”不是在媒体查询）：

.dww li { 
    font-size: 3.25em; 
    } 
.dwwr td { 
    padding: 0; 
}

我用类似你们代码用于初始化的宽度和高度。

我不确定.eq（0）是什么，我不记得我在哪里看到别人这样做，但它的工作原理......唯一的问题是，在一些旧手机上它似乎在一些方向改变后，放慢速度并最终使手机的浏览器崩溃。

注：我认为宽度和高度属性是为一个滚动条，因此“/ 4”。由于有3个滚动条，如果我将宽度除以4，它应该始终适合页面并考虑填充和边距。

在他们documentation不存在与 “.EQ（0）”

编辑为例：

Here是在那里我看到了 “.EQ（0）” 的东西。

编辑：

在这个post我找到一种方式来获得的方位变化更好的工作。

来源

2012-12-03 16:46:21 Soenhay

谢谢Soenhay。我原来的版本在改变方向时效果不好，所以我会给你一个去！ – Desmond

这种方式也有它的问题：http：// stackoverflow。COM /问题/ 13710834 /问题与 - mobiscroll-orientationchange和存取的地址栏，崩溃，一些 – Soenhay

使Mobiscroll高度和宽度响应

回答

相关问题