0

モバイルサファリでクラッシュし、他のすべてのブラウザで動作する次のコードがあります。チェックすると、より良い画像を表示するためにjqueryプラグインを使用しているチェックボックスがあります。問題は Safari-mobile での background-position 属性のサポートにあるようですが、修正方法がわかりません。

<input type="checkbox" id="terms"  data-bind="checked: termsOfUseAccepted" >
<label for="terms" class="" data-bind="text:TermsLabel"></label>        
<div class="chk-overview ">
<a  href="javascript:;" data-bind="visible: continueDisplay"><h2 >Continue</h2></a>
</div>

以下のJavascriptを使用しています

$(function () {
    var isTouch = false;
    try { isTouch = "ontouchstart" in window; } catch (e) { }

    var $activeTip = null;
     if (isTouch) {
        document.ontouchstart = function () {
            if ($activeTip) {
                $activeTip.data("close").call($activeTip);
                $activeTip = null;
            }
        };
    }

        function courseViewModel() {
            var self = this;
            self.termsOfUseAccepted = ko.observable(false);
            self.TermsLabel = ko.observable('I understand');
            self.continueDisplay = ko.computed({
                read: function() {
                    return self.termsOfUseAccepted();
                },
                owner: this,
                deferEvaluation: true
            });
        };
          var viewModel = new courseViewModel();

          ko.applyBindings(viewModel);


      });

(function($) {
    $.fn.hoverIntent = function(f, g) {
        var cfg = {sensitivity: 7,interval: 100,timeout: 0};
        cfg = $.extend(cfg, g ? {over: f,out: g} : f);
        var cX, cY, pX, pY;
        var track = function(ev) {
            cX = ev.pageX;
            cY = ev.pageY
        };
        var compare = function(ev, ob) {
            ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t);
            if ((Math.abs(pX - cX) + Math.abs(pY - cY)) < cfg.sensitivity) {
                $(ob).unbind("mousemove", track);
                ob.hoverIntent_s = 1;
                return cfg.over.apply(ob, [ev])
            } else {
                pX = cX;
                pY = cY;
                ob.hoverIntent_t = setTimeout(function() {
                    compare(ev, ob)
                }, cfg.interval)
            }
        };
        var delay = function(ev, ob) {
            ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t);
            ob.hoverIntent_s = 0;
            return cfg.out.apply(ob, [ev])
        };
        var handleHover = function(e) {
            var ev = jQuery.extend({}, e);
            var ob = this;
            if (ob.hoverIntent_t) {
                ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t)
            }
            if (e.type == "mouseenter") {
                pX = ev.pageX;
                pY = ev.pageY;
                $(ob).bind("mousemove", track);
                if (ob.hoverIntent_s != 1) {
                    ob.hoverIntent_t = setTimeout(function() {
                        compare(ev, ob)
                    }, cfg.interval)
                }
            } else {
                $(ob).unbind("mousemove", track);
                if (ob.hoverIntent_s == 1) {
                    ob.hoverIntent_t = setTimeout(function() {
                        delay(ev, ob)
                    }, cfg.timeout)
                }
            }
        };
        return this.bind('mouseenter', handleHover).bind('mouseleave', handleHover)
    }
})(jQuery);
(function($) {
jQuery.fn.customInput = function () {
    $(this).each(function (i) {
        if ($(this).is('[type=checkbox],[type=radio]')) {

            var input = $(this);
            if (input.data('customInput') === 'done') {
                return true;
            }
            else {
                input.data('customInput', 'done');
            }

            // get the associated label using the input's id
            var label = $('label[for=' + input.attr('id') + ']');

            //get type, for classname suffix 
            var inputType = (input.is('[type=checkbox]')) ? 'checkbox' : 'radio';

            // wrap the input + label in a div 
            $('<div class="custom-' + inputType + '"></div>').insertBefore(input).append(input, label);

            // find all inputs in this set using the shared name attribute
            var allInputs = $('input[name=' + input.attr('name') + ']');

            // necessary for browsers that don't support the :hover pseudo class on labels
            label.hover(
                function () {
                    $(this).addClass('hover');
                    if (inputType == 'checkbox' && input.is(':checked')) {
                        $(this).addClass('checkedHover');
                    }
                },
                function () { $(this).removeClass('hover checkedHover'); }
            );

            //bind custom event, trigger it, bind click,focus,blur events                   
            input.bind('updateState', function () {
                if (input.is(':checked')) {
                    if (input.is(':radio')) {
                        allInputs.each(function () {
                            $('label[for=' + $(this).attr('id') + ']').removeClass('checked');
                        });
                    };
                    label.addClass('checked');
                }
                else { label.removeClass('checked checkedHover checkedFocus'); }

            })
            .trigger('updateState')
            .click(function () {

                if (input.is(':checked')) {
                    if (input.is(':radio')) {
                        allInputs.each(function () {
                            $('label[for=' + $(this).attr('id') + ']').removeClass('checked');
                        });
                    };
                    label.addClass('checked');
                }
                else { label.removeClass('checked checkedHover checkedFocus'); }

            })
            .focus(function () {
                label.addClass('focus');
                if (inputType == 'checkbox' && input.is(':checked')) {
                    $(this).addClass('checkedFocus');
                }
            })
            .blur(function () { label.removeClass('focus checkedFocus'); });
        }
    });
};
})(jQuery);
    $.fn.smartHover = function (configObject) {
        if (isTouch) {
            $(this)
                .bind("hold", function () {
                    $activeTip = $(this);
                    $(this).data("held", true);
                })
                .bind("hold", configObject.over)
                .bind("click", function (e) {
                    var wasHeld = $(this).data("held");
                    $(this).data("held", false);
                    if (wasHeld) {
                        e.preventDefault();
                        return false;
                    }
                })
                .data("close", configObject.out);
        } else {
            $(this).hoverIntent(configObject);
        }
    };

$('input').customInput();

そして、ここにcssがあります

.chk-overview h2                    { font: 24px "StoneSansITCW01-SemiBol 735693",sans-serif; margin-bottom: 20px;padding: 0 }

.custom-checkbox label {
background: transparent url(http://aonhewittnavigators.com/AonExchange/media/Image-Gallery/SiteImages/checkbox.png) no-repeat;
outline: 0;
background-position: 0 0;
}
.custom-checkbox label {
cursor: pointer;
display: block;
height: 19px;
outline: 0;
position: relative;
width: 21px;
z-index: 1;
}
.custom-checkbox label.checked {
background-position: 0 bottom;
padding: 0;
}
.custom-checkbox input {
left: 1px;
margin: 0;
outline: 0;
position: absolute;
top: 5px;
z-index: 0;
height: 0;
}
4

1 に答える 1

1

チェックボックス スタイルの height: 0 を削除してみてください。チェックボックスの入力に高さまたは幅の属性が設定されていると、クラッシュするのを見てきました。

于 2013-11-11T22:53:46.627 に答える