pCloud Partner Program

線上幸運抽獎-手機版

程式技術/Javascript 2016/11/11 11:38
views: 80707 times
之前一直要找時間做一個手機用的版本, 終於昨天花點時間寫好了, 有需要的朋友們歡迎多加利用, 網址如下:

http://sample.diary.tw/lucky-draw/m

功能與原來的版本相同, 只是介面用了 jQuery mobile 的方式呈現, 分別將說明、名單、獎項與抽獎放在4個分開的介面上, 利用下方的切換功能來進行切換, 一樣可以隨時加碼. 抽獎結果的部分, 考慮手機介面較小, 所以最後抽出的放在最上面, 而且上方會出現目前待抽的獎項與剩餘人數, 剩餘獎項與已得獎組數等資訊.

最後還是希望大家能多多利用, 也提供建議, 謝謝.

原來的電腦版介紹: http://diary.tw/tim/991
top

可愛的ClockPicker-用時鐘方式來選取時間

程式技術/Javascript 2015/07/07 11:56
views: 80364 times
這個專案組件很可愛, 是一個時間選取器, 呈現的介面就是一個時鐘, 操作起來還蠻方便的, 另外也在手機上測試操作看看, 也是一樣方便順手, 蠻有意思的.

用戶插入圖片


有需要使用到 timepicker 的場合, 可以試看看這組 clockpicker , 很不錯.

有 bootstrap版本: http://weareoutman.github.io/clockpicker/
還有 jQuery 版本: http://weareoutman.github.io/clockpicker/jquery.html



top

雙斜線的使用方式

程式技術 2014/10/31 15:01
views: 242560 times
今天在幫一個網站處理加上 SSL 時, 發現有個使用 jQuery 的效果消失了, 經檢查後, 發現其實是因為該網頁使用了 http://code.jquery.com/jquery-latest.min.js 的 jQuery library.

為了解決這個問題, 當然就是再加上 https 就可以了. 不過有沒有更好的方式呢? 答案是有的, 使用 // 雙斜線來處理.

//code.jquery.com/jquery-latest.min.js

這樣的語法, 是告訴瀏覽器, 使用"繼承"的 protocol, 也就是說, 主 url 上使用是 http, 這裡就用 http, 而原本是走 https , 這裡就用 https.

簡單來說, 一種方式就是 library 就都用 https 的方式, (當然原本的 library 網站要有支援 https, 目前絕大部分的 cdn library 都有), 否則使用這種 double forward slash 也是很不錯的方式, 解決開發環境只用 http, 而 production 環境使用 https 的狀況.

top

強迫jQuery Mobile換頁不用ajax

程式技術/Javascript 2013/05/23 16:07
views: 285878 times
同事因為一個使用 jQuery Mobile 的網頁, 因為 login 頁面後的重導頁內容, 無法正常顯示而苦惱, 正在 debug 時, 我和他說明, jQM 預設會使用 ajax 來將網頁內容替代, 包含了 form submit 也都會這樣, 而不需要整頁 refresh, 所以會有這種特殊的狀況.

然而他想做到的功能是 login --submit--> login (check) --redirect--> index 這樣的方式, 所以簡單地說, 就是要將 login page上的 form submit 後的頁面, 不要使用 ajax 即可, 查了一下網路資料, 在 form 表單上, 多加入 data-ajax="false" 即可, 請同事加上後, 測試果然無誤.

所以若有這樣需求的應用, 可以加入 data-ajax="false" 來取消這個預設的功能.

參考資料:
http://stackoverflow.com/questions/7739183/jquery-mobile-how-do-i-submit-forms-to-a-url-and-transit-to-another-page-insid
http://dev.chetankjain.net/2011/12/jquery-mobile-page-transitions-with.html
http://tim-fly.iteye.com/blog/1453766

官方資料:
http://jquerymobile.com/demos/1.0/docs/pages/page-links.html
top

讓jQuery UI支援Touch device

程式技術/Javascript 2013/03/25 17:36
views: 366847 times
在 jQuery UI 中, 使用像是 drag drop, slider 等, 在 iPhone/iPad/Android 上這種 touch 的設備, 可能會有不順或不支援的狀況, 這裡有個工具可以讓這樣的狀況改善, 並正常使用:

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

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

可以比較之前的一個範例: (原文: http://diary.tw/tim/1041 )

無使用 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/
top

Masonry自動排版介面與InfiniteScroll無限捲動介面

程式技術/Javascript 2012/05/09 15:57
views: 223723 times
Masonry 和 InfiniteScroll 都是 jQuery 上的 plugin!

Masonry 是利用 css 方式, 將介面重新排版, 使得畫面不會因為不規則區塊排起來而不好看, 可以看一下 Masonry 官網上的說一看就知道這樣的排版方式的感覺:

http://masonry.desandro.com/

而 InfiniteScroll 則是利用 jQuery 背後 ajax 方式, 將一頁一頁的網頁, 透過不換頁, 直接 append 到目前的頁面上, 達成向下捲動而看更多內容的功能. 像是 facebook 動態牆, 就是這樣的應用情境. 官方網站:

http://www.infinite-scroll.com/

這兩個功能結合就變成了這樣: http://sample.diary.tw/flickrsearch/?q=rainbow (利用了 flickr api 與 Masonry 和 InfiniteScroll 做出的效果. (記得要向下捲動, 才會出現看完了繼續產出內容的效果), 其中後面的 q 可以自行替代其他的英文單字, 因為對該文字沒有特別處理, 所以只能使用一個英文單字.

來看看怎麼做這個效果吧.

InfiniteScroll 是利用了 jQuery 在背景取出下一頁的內容, 並將指定的 selector 資料 append 到目前的網頁上, 所以最小的程式碼是這樣:



就是將本頁的容器, 利用 infinitescroll 函式呼叫, 並傳入 3個重要參數, 分別為 navSelector, 這個是指當 page 瀏覽到這個 selector 指定物件時, 進行 load 下一頁內容, 而要 load 的內容, 就是 nextSelector 的物件中的 url, 至於第三個參數 itemSelector 則是 load 到網頁後, 要帶出來放到目前頁面上的內容項目.

以上面的例子來看, 網頁的介面會是如下:


這樣一來, 當本頁被瀏覽最下面的 <div class='navigation'> 時, 就會被觸發去 load page-2.htm 中的內容,並找出 <div class='post'>...</div> 將內容放到 <div id='content'>..</div> 中最後一個 post, 如此重覆下去, 就會有往下捲而一直往後看的內容, 記得每頁下面都要放對應的下一頁, 就會被 infinitescroll 偵測到, 並往下疊代下去.

再來看看 Masonry 的效果, 用法也很單純, 最小程式碼如下:


只需要指定要排版的容器 container, 呼叫 masonry 傳入 itemSelector 就是內容元素, 就可以自動排版, 多種效果可以參考官方網站的 demo.

比較特別的是兩者結合的這個 demo: http://masonry.desandro.com/demos/infinite-scroll.html , 參考這個 demo 可以做出又達成自動排版, 又達成無限捲動的功能, 效果就參考上面的 sample: http://sample.diary.tw/flickrsearch/?q=rainbow

幾個點要注意:
1. navSelector 一定是要找最下面的物件, 效果才會好, 記得.
2. 若是排版內容有圖, 可以參考 Masonry 的 sample: http://masonry.desandro.com/demos/images.html 將排版呼叫寫在 container 的 imagesLoaded 事件後, 如下:

才不會有位置算不準的狀況.
3. 若要有動畫排版效果, 可以在 Masonry 參數中多加上 isAnimated: true;
4. 排版若要美觀, 要盡量統一內容物寬度, 就不會排得2266 (可以利用 css 自行安排)
5. InfiniteScroll 的 loading 的 css 是 #infscr-loading 這個, 可自行設計.

忘了說, 這次 sample 使用的 flickr api 是 photo search: http://www.flickr.com/services/api/flickr.photos.search.html

這種 layout 流行和 fb 及最近火紅的 pinterest 網站可能有很大的關係呢.
top

線上幸運抽獎(Lucky draw)

程式技術/Javascript 2012/03/20 12:10
views: 519439 times
繼上次的線上賓果產生器(http://diary.tw/tim/990)後, 再來補個線上幸運抽獎, 這個適合尾牙活動或是隨機抽獎時使用.

網址: 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, 如下:

more..



top

web版線上測試javascript-JSFIDDLE

程式技術/Javascript 2010/11/11 14:11
views: 234108 times
這個 JSFIDDLE: http://jsfiddle.net/ 是一個線上版本, 進行 javascript 測試及除錯使用的方便工具, 包含了大量的 javascript frame, 有 MooTools, jQuery, Prototype, YUI, Glow, Dojo, Processing, ExtJS, Raphael, RightJS 及不使用 framework 多種選擇.

不僅如此, html, css 更是能分區編輯, 方便測試, 而且實作的程式結果也可以存下來, 方便日後再拿出來看, 或是進行 share 討論, 還能分支開發 (fork) 下去, 真的是十分方便實用的 javascript 工具.

例如這個測試的程式, 功能就是一直累加而已, 可以玩看看: http://jsfiddle.net/Ej4rC/

還可以直接 embed (透過 iframe ) 放到外站, 如下:



可以分享到外站, 一邊看程式, 而且可以馬上玩, 真是很不錯的工具, 快來玩看看吧!
top

jQuery Mobile版本

手機大未來 2010/10/07 13:34
views: 353673 times
從阿維筆記本這裡 (http://blog.hsdn.net/1465.html) 看來的, 原來 jQuery 也有 mobile 的版本! 官方網址在這裡: http://jquerymobile.com/

隨著手機的效能愈高, 能支援的網頁複雜度及相容性, 也隨著在手機上的行動瀏覽器而提升, 一般早期在做手機網站大多是單純化, 減少不相的 css 及簡單呈現的方式為主, 不過有了 jQuery for Mobile, 相信又有更多的可能.

這個列表是用來說明目前 jQuery Mobile 支援各型手機 os 及瀏覽器的相容狀況, 共分成了 A, B, C, F 4級, A 為品質最好, B 為次之, C 為較差, 而 F 則是無法相容, 圖片引用自: http://jquerymobile.com/gbs/
用戶插入圖片

看起來相容性最好的是 android 方面的瀏覽器.

有 jQuery for Mobile 對於行動網頁開發者來說, 可以節省不少工夫在實作網頁程式上, 不過行動網頁的要求是更精簡, 更容易地操作, 利用這樣的開發工具, 的確也能減低不少負擔. 來看看 ui 上的狀況: http://jquerymobile.com/designs/

相信對於已經上手 jQuery 的 Developer 們, 這個是一個不錯的好工具!


top

jQuery traverse元件屬件

程式技術/Javascript 2009/03/19 18:54
views: 92582 times
traverse 是程式寫作上一個還算蠻重要的 runtime information. 尤其在 web 上, jQuery 的概念整個就是建立在這樣概念上. 利用 selector 將要找的東西找出來, 再進行更動或讀取這樣的狀況.

現在利用一個小案例來說明這個 case. 我要找出頁面上所有有 onclick 屬性的 anchor, 並加以標註出來, 語法是這樣的:

$("a[onclick]").addClass("highlight1");

是的, 你沒看錯, 就是這樣一句而已. 這句語法的解釋是這樣的:

1. $("a") 是找出所有的 anchor
2. $("a[onclick]") 是找出所有的 anchor 而且有 onclick 屬性的
3. addClass 就是加上一個 css class

就只是這樣而已. 我們來看看範例吧: http://sample.diary.tw/17/j1.html 其中的 button: [find anchor with onclick attr.] 按下後, 會將有 onclick 屬性的 anchor 用 highlight1 的 lightgreen 的背景色加上, 就很清楚了. 其中只有 f1(), f2() 會呈現出來效果, 而其他的 anchor 沒有下 onclick 屬性的, 都不會被影響.

接下來找出 anchor 的連結屬性, 開頭是 http://www 的, 這個也很有趣, 語法如下:

$("a[href^='http://www']").addClass("highlight2");

也是一樣, 一行搞定, 語法說明如下:

1. $("a[href^='http://www']")是指 anchor 中, href 屬性開頭為 http://www 的.
2. addClass 就是加上一個 css class
(在1.2版時, 還可以使用 @在 href 前, 也就是 @href^='xxx' 這樣, 不過在 1.2 已不推薦使用, 1.3 時已不支援了, 要特別注意 @ 這個符號囉)

一樣來看範例, http://sample.diary.tw/17/j1.html 其中的 button: [find anchor start with http://www] 按下後, 其中開頭為 http://www 的 anchor 會套用 lightblue 的背景色, 是不是很方便呢?

其中的 ^= 是開頭為, 而 $= 是結束為, 而 *= 是含有, 所以若是要找連結為 .pdf 結尾的, 可以使用:

$("a[href$='.pdf']")

再來就是談 traverse 的語法, 其實也很單純, 是利用 each 這個方法, 再利用匿名函數取得陣列代號, 就可以將符合條件的元素陣列逐一列舉出來, 如下:


程式碼說明如下:
1. 先將符合條件的 objects 都放入 elements 陣列
2. 再利用 each 方法, 配合匿名函數, 將 elements 陣列內的 object 的 href 屬性結合成產生的字串訊息
3. 最後再將訊息秀出

參考範例: http://sample.diary.tw/17/j1.html 其中的 button: [traverse anchor start with http://www] 就會將所有開頭為 http://www 的 object 的 href 屬性 alert 出來囉.

相信對於使用 jQuery 的朋友們, 能更清楚整個運作的邏輯..



top




Nextbit Robin 5.2吋六核心智慧型手機 Microsoft Office 365 中文家用版PKC (無光碟)
ASUS華碩 AC1900 雙頻無線路由器 RT-AC68U 美國 VORNADO 533 渦流空氣循環機 (黑色)
御茶園 每朝健康綠茶(650mlx24入) 每朝健康 雙纖綠茶(650mlx24入)


 Waiting...