第七次上課心得

今日繼績使用materialize來製作網頁，

在網頁封面可能需要會讓用戶選擇不同的功能，有些可能會用九宮格的頁面，也有可能是使用集合的方式顯示。

所以materialize提供一個Collection的功能，可以把我們所需要的功能列表顯示出來。

另外，現在不少APP會有快速的選單，所以網頁也可以增加側欄選單，materialize也有SideNav的程式碼，而它需要用到jQuery，而且jQuery的程式碼要放在html碼後面，不然會出現問題。

把程式碼放到html檔後，就可以修改程式碼，把side nav改成適合自己網頁的風格。

SideNav跟navbar一樣，也是使用<li></li>的元素，透過修改<li>...</li>的程式碼，把裡面的元素改成自己想要的功能。

要在網頁中顯示側欄選單，就需要用到<i>...</i>。而且不一定會在全屏幕的網頁版顯示出來，可能要縮少頁面的大小才會顯示。如果要在網頁版顯示側欄選單，就要在class裡面加上show-on-large。

另外，我們也會使用collapsible來顯示內容，這個功能也是使用<li>...</li>，而動態的效果需要javaScript來支持。值得注意的是，靜態顯示可以不用javaScript，但如果是需要寫取其他資料，是動態顯示資料的話就需要用到javaScript。

網頁也會用到頁數，因此，materialize有頁數顯示的功能。如果我們需要讀取大量資料，就會需要這個功能，但這個功能是不會寫死的，會根據資料庫資料的數目來動態計算需要多少頁數，再顯示在網頁上。

有時候，我們需要讀取資料庫的資料，但需要一些時間，所以一開始要Preload，當資料拿到手，到達網頁的時候，便可以把preload的程式碼覆蓋，顯示所需的資料，這個功能便可以提示使用者先等一下，資料會馬上顯示出來。

使用以上跟之前的功能就可以完成一個行動式網頁，也可以用其他方法把網頁包成APP，就可以為不同東西進行開發。