下ã¾ã§ã‚¹ã‚¯ãƒãƒ¼ãƒ«ã—ãŸã‚‰è‡ªå‹•çš„ã«ãƒšãƒ¼ã‚¸ãƒ³ã‚°ã•ã‚Œã‚‹ç”»é¢ã‚’ã¿ãŸã“ã¨ã¯ã‚ã‚Šã¾ã™ã‹ï¼Ÿ
ç§ã¯è‰¯ãスマホサイトã§è¦‹ã¾ã™ã€‚PCサイトã§ã‚‚ãŸã¾ã«è¦‹ã‹ã‘ã‚‹ã“ã¨ã¯ã‚ã‚Šã¾ã™ãŒã€‚
ã“ã‚Œã¯ã€ä¸‹ã¾ã§ã‚¹ã‚¯ãƒãƒ¼ãƒ«ã—ãŸã¨ãã«ã‚¤ãƒ™ãƒ³ãƒˆãŒç™ºç”Ÿã—ã€ãã®ã‚¤ãƒ™ãƒ³ãƒˆã§æ¬¡ã®ãƒšãƒ¼ã‚¸ã‚’表示ã™ã‚‹ã‚ˆã†å‡¦ç†ãŒè¡Œã‚ã‚Œã¦ã„ã¾ã™ã€‚
今回ã¯ã€ã“ã®ä¸‹ã¾ã§ã‚¹ã‚¯ãƒãƒ¼ãƒ«ã—ãŸã¨ãã«ã‚¤ãƒ™ãƒ³ãƒˆã‚’発生ã•ã›ã‚‹jQuery.Bottomプラグインを紹介ã—ã¾ã™ã€‚
jQuery_Bottomã‹ã‚‰ã€ŒDownload ZIPã€ã‚’クリックã—ã¦ãƒ€ã‚¦ãƒ³ãƒãƒ¼ãƒ‰ã‚’è¡Œã„ã¾ã™ã€‚
å–å¾—ã—ãŸãƒ•ã‚¡ã‚¤ãƒ«ã®ä¸ã«ã€ã€Œdemo.htmlã€ã¨ã„ã†ãƒ•ã‚¡ã‚¤ãƒ«ãŒã‚ã‚Šã¾ã™ã€‚
基本的ãªã“ã¨ã¯ã“ã®ãƒ•ã‚¡ã‚¤ãƒ«ã«æ›¸ã„ã¦ã‚ã‚Šã¾ã™ã€‚
ã¾ãšã¯ã€å–å¾—ã—ãŸjQueryã‚’èªè¾¼ã¿ã¾ã™ã€‚
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.bottom-1.0.js"></script>
コードã¯ã€ä»¥ä¸‹ã®ã‚ˆã†ãªã®ã‚’サンプルã¨ã—ã¦è¨˜è¿°ã—ã¦ã¿ã¾ã™ã€‚
<div id="wrap">
<ol>
<li>åˆã‚ã‹ã‚‰è¡¨ç¤ºã•ã‚Œã¦ã„るコンテンツ</li>
<li>åˆã‚ã‹ã‚‰è¡¨ç¤ºã•ã‚Œã¦ã„るコンテンツ</li>
<li>åˆã‚ã‹ã‚‰è¡¨ç¤ºã•ã‚Œã¦ã„るコンテンツ</li>
<li>åˆã‚ã‹ã‚‰è¡¨ç¤ºã•ã‚Œã¦ã„るコンテンツ</li>
<li>åˆã‚ã‹ã‚‰è¡¨ç¤ºã•ã‚Œã¦ã„るコンテンツ</li>
</ol>
</div>
見やã™ã„よã†ã«ã€é«˜ã•ã‚’150px程度ã«è¨å®šã—ã¦ã‚¹ã‚¯ãƒãƒ¼ãƒ«ã™ã‚‹ã‚ˆã†ã«ã—ã¾ã™ã€‚
#wrap { border: 1px solid #000; width: 612px; height: 150px; overflow: auto }
å…ˆã»ã©ä½œæˆã—ãŸHTMLã¨åˆã‚ã›ã¦ä»¥ä¸‹ã®ã‚ˆã†ã«è¨˜è¿°ã—ã¾ã™ã€‚
$(document).ready(function() {
$("#wrap").bottom({proximity: 0.05});
$("#wrap").bind("bottom", function() {
var obj = $(this);
if (!obj.data("loading")) {
obj.data("loading", true);
$('#wrap ol').append('<li>Loading...</li>');
setTimeout(function() {
$('#wrap ol li:last').remove();
$('#wrap ol').append('<li>è¿½åŠ ã•ã‚ŒãŸã‚³ãƒ³ãƒ†ãƒ³ãƒ„</li><li>è¿½åŠ ã•ã‚ŒãŸã‚³ãƒ³ãƒ†ãƒ³ãƒ„</li><li>è¿½åŠ ã•ã‚ŒãŸã‚³ãƒ³ãƒ†ãƒ³ãƒ„</li>');
obj.data("loading", false);
}, 1500);
}
});
});
ã¾ãšä¸€ç•ªåˆã‚ã«ã€bottomイベントを発生ã•ã›ã‚‹ä½ç½®ã‚’指定ã—ã¾ã™ã€‚
$("#wrap").bottom({proximity: 0.05});
ã“ã‚Œã¯ä¸‹ã‹ã‚‰0.05ã®è·é›¢ã«ãªã£ãŸã‚‰ã¨ã„ã†æ„味ã§ã™ã€‚
例ãˆã°ã“れを0.05ã§ã¯ãªã0.5ã«ã™ã‚‹ã¨ã€ç”»é¢ã®åŠåˆ†ã¾ã§ã‚¹ã‚¯ãƒãƒ¼ãƒ«ã•ã‚ŒãŸã‚‰ã‚¤ãƒ™ãƒ³ãƒˆãŒç™ºç”Ÿã—ã¾ã™ã€‚
次ã«bottomイベントã®å‡¦ç†ã‚’記述ã—ã¾ã™ã€‚
今回ã®ä¾‹ã§ã¯ã€ã¾ãšã€Œloadin...ã€ã¨è¡¨ç¤ºã—ã€1500ミリ秒後ã«ã€ã€Œ<li>è¿½åŠ ã•ã‚ŒãŸã‚³ãƒ³ãƒ†ãƒ³ãƒ„</li>ã€ã‚’3ã¤è¿½åŠ ã—ã¦ã„ã¾ã™ã€‚
ã“ã‚“ãªç°¡å˜ã«ã‚¹ã‚¯ãƒãƒ¼ãƒ«è‡ªå‹•ãƒšãƒ¼ã‚¸ãƒ³ã‚°æ©Ÿèƒ½ãŒç°¡å˜ã«ä½œã‚Œã‚‹ã‚“ã§ã™ã€‚