标签：android jquery asp-net-mvc jquery-mobile mobiscroll

原标题,但邮寄太长：
“ASP.NET MVC 4,Razor,JQuery,JQueryMobile,Mobiscroll问题 – orientationchange和访问地址栏崩溃了一些移动浏览器.改变滚动条的宽度和高度在某些手机上不起作用.”

崩溃问题发生在Android 2.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 scripts {}中,这些脚本在页面底部呈现(不确定是否相关).

任何帮助,将不胜感激.

解决方法:

事实证明,问题是旧的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);
    });

我在这篇文章的答案中找到了链接：window.resize in jquery firing multiple times

谢谢！

标签：android,jquery,asp-net-mvc,jquery-mobile,mobiscroll
来源： https://codeday.me/bug/20191002/1841915.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。