1

元のタイトルですが、投稿するには長すぎます：「ASP.NETMVC 4、Razor、JQuery、JQueryMobile、Mobiscrollの問題-orientationchangeとアクセスアドレスバーが一部のモバイルブラウザーをクラッシュさせます。一部の電話では、スクローラーの幅と高さを変更しても機能しません。」

クラッシュの問題はAndroid2.1で発生します。iPhone、HTC EVO 4G LTE、その他のHTCでは発生しません。

スクローラーの幅と高さを変更しても、HTCでは機能しません。横向きに変更すると、スクローラーは縦向きと同じサイズになります。縦向きに戻すと、スクローラーは横向きのはずのサイズになります。

JQuery/Mobiscrollのコードは次のとおりです。

  function createDatePicker(selector){
        if($("#input_date_1").scroller('isDisabled') != 'undefined'){
            var scrollWidth = ($("div[id='main_content']").width())  / 4;
            var scrollHeight = scrollWidth / 2.5;
            $("#input_" + selector).scroller({
                    preset: 'date',
                    minDate: new Date(2000, 0, 1),
                    maxDate: new Date(2020, 11, 31),
                    theme: 'android',
                    display: 'inline',
                    mode: 'scroller',
                    dateOrder: 'mmddyy',
                    width: scrollWidth,
                    height: scrollHeight,
                    onChange: function (valueText, inst) {
                        var lbl = $("#lbl_" + selector);
                        var date = $("#input_" + selector).scroller('getDate');
                        lbl.text(date.toDateString());
                    }
                });
        }

  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 () {
        createDatePicker('date_1');

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

これらのスクリプトを、ページの下部に表示される@sectionスクリプト{}に含めています（それが適切かどうかはわかりません）。

どんな助けでもいただければ幸いです。

4

1 に答える 1

2

問題は、古いAndroid携帯電話が上記のようにサイズ変更イベントを好まなかったことでした。新しい携帯電話はorientationchangeイベントを好まなかったのです。このリンクのコードにより、すべてが完全に機能しました。

http://paulirish.com/2009/throttled-smartresize-jquery-event-handler/

そして、これが私がそれをどのように使用したかです：

//
// usage:
//$(window).smartresize(function () {
//    // code that takes it easy...
//});
//http://paulirish.com/2009/throttled-smartresize-jquery-event-handler/
(function ($, sr) {

    // debouncing function from John Hann
    // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
    var debounce = function (func, threshold, execAsap) {
        var timeout;

        return function debounced() {
            var obj = this, args = arguments;
            function delayed() {
                if (!execAsap)
                    func.apply(obj, args);
                timeout = null;
            };

            if (timeout)
                clearTimeout(timeout);
            else if (execAsap)
                func.apply(obj, args);

            timeout = setTimeout(delayed, threshold || 100);
        };
    }
    // smartresize 
    jQuery.fn[sr] = function (fn, threshold, execAsap) { return fn ? this.bind('resize', debounce(fn, threshold, execAsap)) : this.trigger(sr); };

})(jQuery, 'smartresize');


  $(function () {
        createDatePicker('date_1');

         $(window).smartresize(function () {
                setDatePickerWidthAndHeight();
            }, 200);
    });

この投稿の回答にリンクが見つかりました：jqueryでwindow.resizeが複数回起動します

ありがとう！

于 2012-12-07T17:17:16.973 に答える