標籤: jQuery UI

分類
Javascript

讓jQuery UI支援Touch device

在 jQuery UI 中, 使用像是 drag drop, slider 等, 在 iPhone/iPad/Android 上這種 touch 的設備, 可能會有不順或不支援的狀況, 這裡有個工具可以讓這樣的狀況改善, 並正常使用:

jQuery UI Touch Punch – http://touchpunch.furf.com/

這個只需要在引入 jQuery, jQuery UI 後, 再引入這個 jQuery UI Touch Punch 即可.

可以比較之前的一個範例: (原文: https://diary.tw/archives/1292 )

無使用 jQuery UI Touch Punch – http://sample.diary.tw/33/1.htm
有使用 jQuery UI Touch Punch – http://sample.diary.tw/33/2.htm

無使用 jQuery UI Touch Punch – http://sample.diary.tw/33/1-1.htm
有使用 jQuery UI Touch Punch – http://sample.diary.tw/33/2-1.htm

使用桌上型瀏覽器沒有差別, 不過使用 touch device 就有很明顯的差異了!

另外其實 jQuery Mobile 也有完整的功能, 若是直接要做 mobile 的網頁, 應該就直接使用 jQuery Mobile 的 framework 就有完整支援 touch 了:

jQuery Mobile 的 slider: http://view.jquerymobile.com/1.3.0/docs/widgets/sliders/

分類
Javascript

線上幸運抽獎(Lucky draw)

繼上次的線上賓果產生器( https://diary.tw/archives/1185 )後, 再來補個線上幸運抽獎, 這個適合尾牙活動或是隨機抽獎時使用.

網址: http://sample.diary.tw/lucky-draw/

一樣是使用 jQuery, 純 client 執行的程式, 不過這次多配合了 jQuery UI 中的 dialog, 以方便快速編輯 html 中的 select 物件.

工作方式很簡單, 第一動是先輸入流水號, 例如預設的 1~100, 按下產生後, 生成 1~100 號在抽獎名單中, 若有跳號或是不規則號, 都可以藉由雙擊抽獎名單的 select 元件進行編輯, 利用 textarea 進行編輯, 一行一項, 空行會自行避開, 自行貼入或編輯清單.

再來就是輸入獎項了, 一般應該是由小到大排(通常的抽獎順序啦), 當然也可以隨興輸入, 一樣雙擊獎項的 select 會跳出編輯的 dialog.

最後就是令人期待的抽獎了, 抽獎鈕按下時, 若在獎項有被選取的項目, 會先抽該項目的得獎者, 若沒有則從最上面的獎項開始抽起. 每次抽都會隨機排序抽獎名單中的號碼, 所以很隨機, 抽出來的獎項及得獎者會填入最下方的抽獎結果.

隨時都可以再加入獎項(直接再進行編輯即可), 例如加碼, 紅包等, 再繼續抽獎, 而最後的抽獎結果是可以雙擊跳出 dialog 中有 textarea 供複製出來應用, 不過是不能編輯的(才不會被修改), 這樣就完成了這個線上幸運抽獎.

其中編輯 select 及列出 select 內容的 function 是共用的, 都是將其 dblclick 呼叫 editSelect, 如下:

閱讀全文 “線上幸運抽獎(Lucky draw)”