Infinite Scroll.js的使用
最近Infinite Scroll全翻新到Infinite Scroll V3，
感覺function的叫用方式又更直覺了，真是高興。
Infinite Scroll.js是用來做「滾動無限載入網頁內容」效果，
就像使用者在閱讀臉書一樣，手指往下划內容就會依序地無限載入，
Infinite Scroll.js裡最重要的部份就是path屬性，
path屬性用法有四種方式，我依序舉四個範例。
使用Infinite Scroll.js必會用到path屬性，
而其他屬性、API、Events、Extras的延伸應用都可以選用搭配，
可直接參考Infinite Scroll官網就行。
範例一、
首先準備四個頁面，頁面名稱分別為Index.html、page2.html、page3.html、page4.html，
Index.html頁面為內容的第一頁，裡面還包含Infinite Scroll.js所規定的html架構，
與叫用Infinite Scroll.js的javascript程式碼；而page2.html、page3.html、page4.html就是
做無限載入效果的填充內容。
page2.html的填充內容只有如下，至於page3.html、page4.html的填充內容也是一樣的
<article class="myArticle"> <div class="article__content"> <p>page2</p> <p>參考資料：</p> <p><a href="http://blog.darkthread.net/post-2012-10-23-iqueryable-experiment.aspx">關於IQueryable<T>特性的小實驗</a></p> <p><a href="https://dotblogs.com.tw/wasichris/archive/2015/03/04/150633.aspx">[Entity Framework][LINQ] IEnumerable與IQueryable差異比較</a></p> <p><a href="https://dotblogs.com.tw/wasichris/2014/11/24/147410">[Entity Framework][LINQ] IQueryable擴充方法Include的使用時機</a></p> <p><a href="https://msdn.microsoft.com/zh-tw/library/bb351562(v=vs.110).aspx">IQueryable<T> 介面</a></p> <p><a href="https://msdn.microsoft.com/zh-tw/library/system.data.entity.queryableextensions(v=vs.113).aspx">QueryableExtensions 類別</a></p> </div> </article>
再來看Index.html內容
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> .jumbotron { height: 500px; border: solid 1px red; } </style> <script src="https://code.jquery.com/jquery-3.1.1.js"></script> <script src="infinite-scroll.pkgd.min.js"></script> </head> <body> <div class="jumbotron"> <h1>ASP.NET</h1> <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p> <p><a href="https://asp.net" class="btn btn-primary btn-lg">Learn more »</a></p> </div> <div class="jumbotron"> <h1>ASP.NET</h1> <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p> <p><a href="https://asp.net" class="btn btn-primary btn-lg">Learn more »</a></p> </div> <div class="jumbotron"> <h1>ASP.NET</h1> <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p> <p><a href="https://asp.net" class="btn btn-primary btn-lg">Learn more »</a></p> </div> <hr /> <div class="article-feed"> <!--<article class="myArticle">...</article>--> </div> <script> $('.article-feed').infiniteScroll({ path: '/page{{#}}.html', append: '.myArticle' }); </script> </body> </html>
說明：
1、使用Infinite Scroll.js時需於頁面先Include jQuery.js，再來當然是Include Infinite Scroll.js
方能正常使用Infinite Scroll.js功能。
2、黃色框框為Infinite Scroll.js所規定的html架構，其page2.html的內容會被放進
「<div class="article-feed"></div>」裡面，並生成「<article class="myArticle">page2.html的內容</article>」架構，
隨著browser捲軸往下捲動，「<article class="myArticle">page3.html的內容</article>」架構將會append到
「<article class="myArticle">page2.html的內容</article>」架構的下面；而
「<article class="myArticle">page4.html的內容</article>」架構將會append到
「<article class="myArticle">page3.html的內容</article>」架構的下面。
3、綠色框框為叫用infiniteScroll功能的主程式，裡面path參數為必需指定的，
用法就多達四種，會依序舉例。「path: '/page{{#}}.html'」的#字號代表變動的數字，
整個意思為載入內容路徑的找尋會從page2.html開始遞增找到page3.html、、、依序下去，
如果我記得沒錯的話，除了#字號代表變動的數字之外，其他都是固定的，
也就是說infiniteScroll.js只認定「path: '/page{{#}}.html'」路徑，檔名不符合該path參數命名規範者將會出錯。
4、append屬性所指定的參數值(本例子值為myArticle)表示在路徑「path: '/page{{#}}.html'」裡的填充內容(如page2.html)
找尋符合append參數值的元素，並將其內容附加到「<div class="article-feed"></div>」裡面
範例二、
承上例，page2.html、page3.html、page4.html的填充內容不動，
只改動Index.html內容，如底下的綠色部份
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> .jumbotron { height: 500px; border: solid 1px red; } </style> <script src="https://code.jquery.com/jquery-3.1.1.js"></script> <script src="infinite-scroll.pkgd.min.js"></script> </head> <body> <div class="jumbotron"> <h1>ASP.NET</h1> <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p> <p><a href="https://asp.net" class="btn btn-primary btn-lg">Learn more »</a></p> </div> <div class="jumbotron"> <h1>ASP.NET</h1> <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p> <p><a href="https://asp.net" class="btn btn-primary btn-lg">Learn more »</a></p> </div> <div class="jumbotron"> <h1>ASP.NET</h1> <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p> <p><a href="https://asp.net" class="btn btn-primary btn-lg">Learn more »</a></p> </div> <hr /> <div class="article-feed"> <!--<article class="myArticle">...</article>--> </div> <script> var nextPages = [ 'page2', 'page3', 'page4' ]; $('.article-feed').infiniteScroll({ path: function () { return nextPages[this.loadCount] + '.html'; }, append: '.myArticle' }); </script> </body> </html>
說明：
path屬性也可以餵function給他，如上例利用陣列的方式，
一個個取出來兜成路徑，至於this.loadCount屬性作用為，
每當填充內容被讀取一次，loadCount屬性就會自動加1。
範例三、
假設填充內容的檔名改成page20.html、page30.html、page40.html，
並改動Index.html內容，如底下的綠色部份
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> .jumbotron { height: 500px; border: solid 1px red; } </style> <script src="https://code.jquery.com/jquery-3.1.1.js"></script> <script src="infinite-scroll.pkgd.min.js"></script> </head> <body> <div class="jumbotron"> <h1>ASP.NET</h1> <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p> <p><a href="https://asp.net" class="btn btn-primary btn-lg">Learn more »</a></p> </div> <div class="jumbotron"> <h1>ASP.NET</h1> <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p> <p><a href="https://asp.net" class="btn btn-primary btn-lg">Learn more »</a></p> </div> <div class="jumbotron"> <h1>ASP.NET</h1> <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p> <p><a href="https://asp.net" class="btn btn-primary btn-lg">Learn more »</a></p> </div> <hr /> <div class="article-feed"> <!--<article class="myArticle">...</article>--> </div> <script> $('.article-feed').infiniteScroll({ path: function () { var pageNumber = (this.loadCount + 2) * 10; return 'page' + pageNumber + '.html'; }, append: '.myArticle' }); </script> </body> </html>
說明：
此path屬性也是餵function給他，由於this.loadCount是從零開始數，
所以要先加2才能湊出page20.html、page30.html、page40.html路徑。
範例四、
最後一個比較複雜，重新調整範例，準備填充內容
page1.html、page2.html、page3.html、page4.html，
page1.html的內容為
<article class="myArticle"> <div class="article__content"> <p>page1</p> <p>參考資料：</p> <p><a href="http://blog.darkthread.net/post-2012-10-23-iqueryable-experiment.aspx">關於IQueryable<T>特性的小實驗</a></p> <p><a href="https://dotblogs.com.tw/wasichris/archive/2015/03/04/150633.aspx">[Entity Framework][LINQ] IEnumerable與IQueryable差異比較</a></p> <p><a href="https://dotblogs.com.tw/wasichris/2014/11/24/147410">[Entity Framework][LINQ] IQueryable擴充方法Include的使用時機</a></p> <p><a href="https://msdn.microsoft.com/zh-tw/library/bb351562(v=vs.110).aspx">IQueryable<T> 介面</a></p> <p><a href="https://msdn.microsoft.com/zh-tw/library/system.data.entity.queryableextensions(v=vs.113).aspx">QueryableExtensions 類別</a></p> </div> </article> <a class="pagination_next" href="/page2.html">Next page</a>
page2.html的內容為
<article class="myArticle"> <div class="article__content"> <p>page2</p> <p>參考資料：</p> <p><a href="http://blog.darkthread.net/post-2012-10-23-iqueryable-experiment.aspx">關於IQueryable<T>特性的小實驗</a></p> <p><a href="https://dotblogs.com.tw/wasichris/archive/2015/03/04/150633.aspx">[Entity Framework][LINQ] IEnumerable與IQueryable差異比較</a></p> <p><a href="https://dotblogs.com.tw/wasichris/2014/11/24/147410">[Entity Framework][LINQ] IQueryable擴充方法Include的使用時機</a></p> <p><a href="https://msdn.microsoft.com/zh-tw/library/bb351562(v=vs.110).aspx">IQueryable<T> 介面</a></p> <p><a href="https://msdn.microsoft.com/zh-tw/library/system.data.entity.queryableextensions(v=vs.113).aspx">QueryableExtensions 類別</a></p> </div> </article> <a class="pagination_next" href="/page3.html">Next page</a>
以此類推，但注意page4.html的內容則沒有
<a class="pagination_next" href="/page5.html">Next page</a>
page4.html的內容為
<article class="myArticle"> <div class="article__content"> <p>page4</p> <p>參考資料：</p> <p><a href="http://blog.darkthread.net/post-2012-10-23-iqueryable-experiment.aspx">關於IQueryable<T>特性的小實驗</a></p> <p><a href="https://dotblogs.com.tw/wasichris/archive/2015/03/04/150633.aspx">[Entity Framework][LINQ] IEnumerable與IQueryable差異比較</a></p> <p><a href="https://dotblogs.com.tw/wasichris/2014/11/24/147410">[Entity Framework][LINQ] IQueryable擴充方法Include的使用時機</a></p> <p><a href="https://msdn.microsoft.com/zh-tw/library/bb351562(v=vs.110).aspx">IQueryable<T> 介面</a></p> <p><a href="https://msdn.microsoft.com/zh-tw/library/system.data.entity.queryableextensions(v=vs.113).aspx">QueryableExtensions 類別</a></p> </div> </article>
而Index.html的內容為，綠色為改動部份，黃色為新增部份
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> .jumbotron { height: 500px; border: solid 1px red; } </style> <script src="https://code.jquery.com/jquery-3.1.1.js"></script> <script src="infinite-scroll.pkgd.min.js"></script> </head> <body> <div class="jumbotron"> <h1>ASP.NET</h1> <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p> <p><a href="https://asp.net" class="btn btn-primary btn-lg">Learn more »</a></p> </div> <div class="jumbotron"> <h1>ASP.NET</h1> <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p> <p><a href="https://asp.net" class="btn btn-primary btn-lg">Learn more »</a></p> </div> <div class="jumbotron"> <h1>ASP.NET</h1> <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p> <p><a href="https://asp.net" class="btn btn-primary btn-lg">Learn more »</a></p> </div> <hr /> <div class="article-feed"> <!--<article class="myArticle">...</article>--> </div> <!-- pagination has path --> <p class="pagination"> <a class="pagination_next" href="/page1.html">Next page</a> </p> <script> $('.article-feed').infiniteScroll({ path: '.pagination_next', append: '.myArticle', hideNav: '.pagination' }); </script> </body> </html>
說明：
1、可以看到path屬性值已經改為「'.pagination_next'」，其代表的意思為
路徑的找尋將只認得類別名稱「pagination_next」所指到的路徑，
如Index.html頁面的
<a class="pagination_next" href="/page1.html">Next page</a>
當路徑找尋從Index.html找到page1.html後，接下來又會從page1.html內容裡找到
<a class="pagination_next" href="/page2.html">Next page</a>
意指路徑的找尋，page1.html將會指到page2.html，依此類推直到
所指的內容沒有類別名稱「pagination_next」為止，如page4.html。
另外我實測的結果，除了Index.html要確實指到特定啟始頁面之外，
之後路徑的找尋會根據特定「page{#}」檔名一路遞增去找，
如Index.html -> page1.html -> page2.html -> page3.html -> page4.html，
至於page1~page3頁面中只認得是否有加「class="pagination_next"」表示願意參加路徑的找尋就好，
而href值的指定與否並不重要了。
2、hideNav屬性值的指定，表示頁面呈現時將會把被指定的元素區塊做隱藏，如上例的黃色區塊。
參考資料：