0

スムーズ スクロールをアンカー スクリプトに転用し、サイトでレスポンシブ Web デザインを実践しようとしています。ブラウザの幅が 900px を超えている間は、クリック イベントのみを機能させる必要があります。

$(function() {
    if($(window).width() > 900){
        $('article').bind('click',function(event){
            stuffHappens;
        });
    }
});

window .resize 関数も使用してみましたが、結果は非常にバグがあります。最終結果は、ロード時に機能し、ブラウザーのサイズ変更を確認する必要があります (有効または無効にする必要がある場合)。提案？

$(window).resize(function() {
});
4

2 に答える 2

0

jQueryのサイズ変更機能へのリンクをありがとう@Connerはページの読み込みでは機能しません

そのコードを使用して、ウィンドウの幅が 900 より大きい場合にのみ、クリックしたときに任意の記事要素にスムーズにスクロールするようにこのスクリプトを作成することができました! 完全。

onResize = function() {
    if($(window).width() > 900){
        $('article').bind('click',function(event){
            var $myPos = $(this);

            $('html, body').stop().animate({
                scrollLeft: $($myPos).offset().left -0
            }, 500, 'easeInOutExpo');
            event.preventDefault();
        });
    }
    else{
        $('article').unbind('click');
    }
}
于 2012-07-06T02:20:22.853 に答える
0

あなたが探しているのは

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/redmond/jquery-ui.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.js"></script>
    </head>
    <body>
        <div class="clickme">Click Me</div>
    </body>
    <script>
        $(document).ready(function(){
            var handler = function(){
                console.log("clicked");
            };
            var $window = $(window);

            var setClickHandler = function(){
                if($window.width() > 900){
                    var registered = false;
                    var events = $(".clickme").data("events");
                    if(events){
                        var handlers = $(".clickme").data("events").click;
                        if(handlers){
                            $.each(handlers, function(index, e){
                                if(e.handler == handler){
                                    registered = true;
                                }
                            });
                        }
                    }
                    if(!registered){
                        $(".clickme").on("click", handler );
                    }
                } else {
                    $(".clickme").off("click", handler );
                }
            };

            setClickHandler();
            $window.on("resize", setClickHandler);
        });
    </script>
</html>

少し複雑に見えますが、これが私が思いつくことができる最高のものです。
ここでは、ウィンドウ幅に基づいてハンドラーを登録および登録解除します。

別の簡単な解決策は、ハンドラー内の状態を確認することです

            $(document).ready(function(){
            var handler = function(){
                if($window.width() > 900){
                    console.log("clicked");
                }
            };
            var $window = $(window);

            $(".clickme").on("click", handler );
        });
于 2012-07-03T03:39:53.793 に答える