0

使用 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 实现。

谢谢！

4

3 回答 3

2

您可以通过获取屏幕宽度来做到这一点.width()

$(selector).width(); //get the width you want 
$(window).width();   // returns width of browser viewport
$(document).width(); // returns width of HTML document
于 2012-11-01T03:20:22.573 回答
1

我解决了这个问题，这是最终代码：

// 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-02T01:35:46.763 回答
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”不在媒体查询中）：

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

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

我不确定 .eq(0) 是什么，我不记得我在哪里看到其他人这样做但它有效......唯一的问题是在一些旧手机上它似乎变慢并最终在一些方向更改后使手机的浏览器崩溃。

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

在他们的文档中没有“.eq(0)”的示例

编辑：

这是我看到“.eq(0)”的地方。

编辑：

在这篇文章中，我找到了一种让方向改变更好地工作的方法。

于 2012-12-03T16:46:21.443 回答