Jquery 使Mobiscroll的高度和宽度具有响应性

使用Mobiscroll，高度和宽度在原始JQuery实现中设置。当屏幕大小改变时，我当前使用CSS@media查询更改宽度和高度。我想知道是否有办法使用原始JQuery实现

我的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实现

---

谢谢

您可以通过

.width（）

---

通过

.width（）

---

我解决了这个问题，这里是最后的代码：

// 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();
        }
    });

---

我解决了这个问题，这里是最后的代码：

// 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();
        }
    });

---

以下是我在方向更改时调整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（与您的没有太大不同）来调整字体大小（“dwwr td”不在媒体查询中）：

我使用了类似于您的代码来初始化宽度和高度

我不确定.eq（0）是什么，我不记得在哪里看到其他人这样做，但它起作用了。。。。。。唯一的问题是，在一些较旧的手机上，它的速度似乎会减慢，并在几次方向改变后最终导致手机浏览器崩溃

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

在它们的示例中，没有带“.eq（0）”的示例

编辑：

就是我看到“.eq（0）”的地方

编辑：

---

此时，我找到了一种让方向更改更好地工作的方法。

以下是我在方向更改时调整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（与您的没有太大不同）来调整字体大小（“dwwr td”不在媒体查询中）：

我使用了类似于您的代码来初始化宽度和高度

我不确定.eq（0）是什么，我不记得在哪里看到其他人这样做，但它起作用了。。。。。。唯一的问题是，在一些较旧的手机上，它的速度似乎会减慢，并在几次方向改变后最终导致手机浏览器崩溃

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

在它们的示例中，没有带“.eq（0）”的示例

编辑：

就是我看到“.eq（0）”的地方

编辑：

---

在这里，我找到了一种让方向改变更好的方法。

太好了，谢谢你的帮助。我已经发布了我的最终代码作为答案。再次感谢你的回复，效果很好。我现在遇到的问题是，当你在手机上改变方向时，要改变尺寸。整个网站会使用@mediaqueries调整大小，但由于高度和宽度是在Javascript中设置的，因此在刷新浏览器之前不会调整大小。这是一个解决办法吗？再次感谢这太好了，谢谢你的帮助。我已经发布了我的最终代码作为答案。再次感谢你的回复，效果很好。我现在遇到的问题是，当你在手机上改变方向时，要改变尺寸。整个网站会使用@mediaqueries调整大小，但由于高度和宽度是在Javascript中设置的，因此在刷新浏览器之前不会调整大小。这是一个解决办法吗？再次感谢汉克斯·森海。我原来的版本在方向改变方面做得不太好，所以我会试试你的！这种方式也有它的问题：谢谢Soenhay。我原来的版本在方向改变方面做得不太好，所以我会试试你的！这种方式也有其问题：