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 相關設定可以參考官方

jQuery – TouchSwipe 簡單支援 Swipe 滑動手勢的偵測

現在做 WebAPP 簡直是家常便飯的時候了,要把 Web 做成更高的易用性,jQuery 在今天還是非常好懂得工具而且超方便,尤其是這種滑動的套件,真的是太簡單了。如果要在手機拖曳的話,請看這篇

使用套件:TouchSwipe-Jquery-Plugin

或是使用 npm 裝到開發環境裡

使用方式

swipe() 回傳的參數

  • event 事件
  • direction 滑動的方向,如果是點擊的話,會是 null
  • distance 滑動的距離
  • duration 滑動持續的時間
  • fingerCount 使用的手指頭數量
  • fingerData 在事件中手指頭的座標
  • currentDirection 使用者正在滑動的當前方向,目前看起來與 distance 一樣,不知道差別在哪….

選用的參數與支援的方法可以參考官方的設定

通常我會把 threshold 設定為 0。這樣當滑動大於 0px 的時候,就會觸發事件,預設的滑動要大於 75px 才會觸發。

 

jQuery – 在行動裝置上使用 Draggable 的方法

jQuery UI 的 Draggable 或任何滑鼠拖曳事件,在手機或是平板上都無法作用。我們可以加入 jQuery UI Touch Punch 的外掛事件,就能流暢的在手機上使用囉。

下載到電腦後,加入

之後什麼都不用寫,依照原本的 jQuery UI 拖曳事件如 Draggable 或 Sortable 等等事件,就能順利的支援在手機了。

 

php – Joomla! – 取得 menu 的列表與預選項目

可以指定你的 menutype 位置

 

當點選進入以後,若要知道目前的項目,可以使用

 

MySQL – 開啟 Query Log 的方式

預設關閉,所以在 SQL 的地方下指令,指定我們要存檔 Log 的名稱為 my_log.log

如果在 Windows XAMPP 的話,那就能在 C:/xampp/mysql/data/my_log.log 找到了。

參考資料