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) が何であるかわからないし、他の誰かがそれをしているのを見た場所を思い出せませんが、それは機能します....唯一の問題は、一部の古い電話では速度が低下し、最終的に向きを数回変更すると、携帯電話のブラウザがクラッシュします。

注：幅と高さのプロパティは1つのスクローラー用であると思います。したがって、「/ 4」です。3 つのスクローラーがあるため、幅を 4 で割ると、常にページに収まり、パディングとマージンを考慮する必要があります。

彼らのドキュメントには、「.eq(0)」の例はありません

編集：

ここで「.eq(0)」を見ました。

編集：

この投稿で、向きの変更をよりうまく機能させる方法を見つけました。

于 2012-12-03T16:46:21.443 に答える