jQueryのセレクタ拡張
jQueryプラグインで、ウィンドウの中にあるか、外にあるかを判別するプラグイン。
「:first」とかと同じように、セレクタを拡張してる。
セレクタはこういう風に拡張するのか〜。
学んだこと:
▽単純に、true か false を返している。こういう風に書くのか〜
return fold <= $(element).offset().top - settings.threshold;
▽こうやって、セレクタを拡張してる。下の例の場合、「belowthefold 」はjQueryオブジェクト直下に作ったメソッド。
①メソッドを先に作り、②このメソッドに与える引数とともにセレクタを登録。③「below-the-fold」が(==「belowthefold 」が)trueを返せば、ヒット(jQueryObj選択)。
$.extend($.expr[':'], { "below-the-fold": function(a, i, m) { return $.belowthefold(a, {threshold : 0}); } });
/* * Viewport - jQuery selectors for finding elements in viewport * * Copyright (c) 2008-2009 Mika Tuupola * * Licensed under the MIT license: * http://www.opensource.org/licenses/mit-license.php * * Project home: * http://www.appelsiini.net/projects/viewport * */ (function($) { $.belowthefold = function(element, settings) { var fold = $(window).height() + $(window).scrollTop(); console.log(fold <= $(element).offset().top - settings.threshold); return fold <= $(element).offset().top - settings.threshold; }; $.abovethetop = function(element, settings) { var top = $(window).scrollTop(); return top >= $(element).offset().top + $(element).height() - settings.threshold; }; $.rightofscreen = function(element, settings) { var fold = $(window).width() + $(window).scrollLeft(); return fold <= $(element).offset().left - settings.threshold; }; $.leftofscreen = function(element, settings) { var left = $(window).scrollLeft(); return left >= $(element).offset().left + $(element).width() - settings.threshold; }; $.inviewport = function(element, settings) { return !$.rightofscreen(element, settings) && !$.leftofscreen(element, settings) && !$.belowthefold(element, settings) && !$.abovethetop(element, settings); }; $.extend($.expr[':'], { "below-the-fold": function(a, i, m) { return $.belowthefold(a, {threshold : 0}); }, "above-the-top": function(a, i, m) { return $.abovethetop(a, {threshold : 0}); }, "left-of-screen": function(a, i, m) { return $.leftofscreen(a, {threshold : 0}); }, "right-of-screen": function(a, i, m) { return $.rightofscreen(a, {threshold : 0}); }, "in-viewport": function(a, i, m) { return $.inviewport(a, {threshold : 0}); } }); })(jQuery);