jQuery – 透過元素 template 製作模板

HTML5 有一個元素叫做 <template>,在使用 jQuery 取得內容並複製成為模板,除了使用 clone() 之外,記得搭配 outerHTML 使用。以下範例

詳細程式碼如下

jQuery – 可觸控、RWD、可旋轉的旋轉木馬(carousels)套件:Flickity

看起來效能非常好!這個套件是當初掀起流行的 Masonry 的開發團隊製作的。

安裝方式


使用 CDN

透過 NPM 下載

如果需要完整套件(選用),可以另外下載

預設是 vanilla JavaScript (我們常說的原生 JS),若要給 jQuery 使用還需要透過橋接

 

使用方式


可以直接使用 <link><script> 載入,如果使用 webpack 參考以下

HTML 的部分

許多範例,官方講解得很清楚,可以去逛逛

 

 

jQuery – plugin – period – 批次讓元素間隔時間執行

jquery.period.js

如果想要「將指定的元素集合,批次間隔固定時間去做一些事情」那麼可以用這支非常簡單的 plugin。

安裝

前往 Github 下載 或是使用 npm 下載

載入方式

 

範例

這個範例是讓所有的 .item 間距 200 毫秒,批次動畫的增加高度。

我們看實際範例:

 

jQuery – 在移動裝置中無法 focus() 如 input 的元素問題 (jQuery UI Touch Punch 造成)

為了在行動裝置上能夠啟用 jQuery UI 的拖曳行為如 Draggable , 我們通常會添加外掛 jQuery UI Touch Punch來支援。

不過一旦添加以後,在指定的拖曳區塊中如果含有 <input> <textarea> <select> 卻會造成無法 forcus() 的困擾。其實只要添加這段就可以繞過這個問題

參考

jQuery – 好用的外掛 select2。介紹AJAX方法。

安裝

可以使用 NPM 安裝,用 Webpack 執行。以下介紹簡單傳統用法。

加入 jQuery 與 select2

 

npm

 

基本用法

<option> 外層不一定要使用 <optgroup> 做分類

 

動態定義 option

data 的部分可以透過 AJAX 取得以後,再渲染 <option>。

上面示範有使用 <optgroup> 的作法,如果不需要分類就直接

要給 <option> 的格式,務必要包含 id, text 兩個參數。

AJAX

當搜尋的時候,才開始向伺服器要資料,並呈現再 <option>

processResults 從伺服器取得的結果,因為 return.results 要產生 <option> ,所以記得格式務必為

 

複選

<select> 改為複選之外,select2 也要添加 tags: true。

 

AJAX 預選

從遠端取得資料後,只需要對綁定的元素使用 jQuery 的 apeend() 與 trigger() 觸發就可以了。

 

Select2 相關設定可以參考官方