相信大家對 jQuery 的 resize 與 scroll 等事件並不陌生,近期在開發 jQuery Plugin 時 , 碰到一個問題 , 我需要在
resize 事件發生時 , 針對 視窗的 放大 與 縮小 , 執行不同的 method 與 event
這類的需求,其實是非常常見的,像是 scroll 事件中,只針對滾輪在 往上 滾動時,讓隱藏的選單出現於畫面中,
分類列表 在 Web 中非常的常見,而 WordPress 在針對 分類列表 處理上 , 提供了一個方法叫做 wp_list_categories()
[https://developer.wordpress.org/reference/functions/wp_list_categories/]
這是我在 WordPress 中第一次製作 分類列表 Google 關鍵字 wordpress categories list ,第一筆就找到的,
wp_
目的:
* 優化 jQuery scroll 與 resize 的事件觸發
* 大幅減少重複的代碼,達到效能優化
> 參考文章:delay-scroll-handlers-javascript
[https://dannyvankooten.com/delay-scroll-handlers-javascript/]
底下文章皆以 scroll 事件為例:
--------------------------------------------------------------------------------
情境:
我們在開發互動式網站時,通常 scroll 事件都是少不了的,現在很多 UI 的設計都會對 滾動 這個事件進行客制化,畢竟他是使用者與網站最主要的互動。
在程式端,如果你使用是
使用jQuery在 WordPress 中實做ajax無限捲軸:
參考文章:getting-loopy-ajax-powered-loops-with-jquery-and-wordpress–wp
[https://code.tutsplus.com/articles/getting-loopy-ajax-powered-loops-with-jquery-and-wordpress--wp-23232]
--------------------------------------------------------------------------------
一、前製準備:
* 在網站版型目錄下新增一個 .php 的 file (此以 loopHandler.php 為此 php 檔案做命名)
* 在網站版型目錄下新增一個 js 目錄以存放所需的 js 檔案
* 於 剛新增的 js
jQuery 套件:滾動事件發生時對當前畫面指定的元素加入對應的Class
--------------------------------------------------------------------------------
> GitHub [https://github.com/SkyRoxas/scrollClass]
Options :
NametypedefaultdescriptionclassNamestringnull指定需要加入的 class 名稱 (必填)delaynumber0
延遲加入class的時間 單位:微秒incrementBollinfalse延遲時間是否遞增
--------------------------------------------------------------------------------
Example :
Basic:
$('.article-wrapper.avatar').scrollClass({
'className': 'animate_