作者: tim

分類
Javascript

強迫jQuery Mobile換頁不用ajax

同事因為一個使用 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

分類
懶得分類

好用的隱藏視窗執行console程式

一般在 windows 環境下, 起排程工作執行 console 應用程式或指令, 若是執行身份和目前登入的使用者身份一樣時, 就會出現一個 console 視窗, 為了要隱藏這個視窗, 有一種方式是使用不同的身份來執行該排程工作, 另一種方式可以應用這個小程式: Hidden Star

這個小程式可以讓執行的視窗不出現, 而且還有一個自帶的 UI 設定器, 方便使用者自行定義一個執令或是多個指令的執行, 而且不會出現干擾目前使用者的 console 視窗, 十分方便, 若有這樣需求的朋友們可以多加利用.

參考資料: http://www.howtogeek.com/howto/windows/hide-flashing-command-line-and-batch-file-windows-on-startup/

Hidden Star 網站: http://www.ntwind.com/software/hstart.html

分類
好用軟體

skydrive上的簡便問卷

SKYDRIVE也推出了好用的簡便問卷功能了. 如同之前的 Google Docs 上的問卷功能, 是建立在線上的 EXCEL 上. (參考之前的文章: https://diary.tw/archives/684 )

利用 SKYDRIVE 上的 EXCEL, 可以方便地建立問題, 不過功能還蠻簡便陽春, 但做一般性的統計應用是很足夠了.

有興趣的朋友可以參考這裡的介紹:
http://blogs.windows.com/international/b/taiwan/archive/2013/04/19/excel-surveys-now-available.aspx

另外也做了一個測試用的問卷, 大家可以玩看看:
http://sdrv.ms/13rUwOX

(這個 sdrv.ms 是利用 skydrive 的縮網址產生的.)

分類
懶得分類

MSN移轉到Skype了

繼 Google Reader 要停後, MSN於今日要正式停止服務了.

死忠派, 最後還是得要換, 不過就是依原本預期的做法, 原 skype 帳號還是 skype 帳號, msn 轉過來的, 也就是獨立的, 不合併.

因為知道群組不會移轉過去, 所以用了這個暗黑執行緒大大的工具來做移轉: http://www.darkthread.net/MSNCatgTool/MSNCatgToolv125.htm

過程順利無痛, 有痛的地方就是沒有 msn 了….

沒有 msn了….
沒有 msn了….
沒有 msn了….

算了, 沒有就沒有了, 繼續用 skype 吧.

不過, 真的很不習慣的介面, 很不習慣的操作, 文字聊天就 msn 最好用, 語音聊天就 skype 最好用, 手機通訊就 line 最好用, 以上純個人感覺啦!

PS. Google talk 咧…. 呃, 很少用耶…

分類
好用軟體

Firefox升級到20.0版本了

Firefox 升級到 20.0 版了.

真是個新的里程碑啊, 來看看新增的功能:
http://moztw.org/firefox/releases/#whatsnew

  • 個別視窗的隱私瀏覽功能。
  • 新的下載體驗。
  • 單獨關閉停止回應的外掛程式，而不是整個瀏覽器停止回應。
  • 持續改善一般瀏覽工作的效能（網頁載入、下載、關閉等）。
  • 持續實作 ECMAScript 6 草案—— clear() 和 Math.imul。
  • 新的 JavaScript Profiler 工具。
  • 實作 getUserMedia 讓網路存取使用者的攝影機和麥克風（需使用者授權）。
  • <canvas> 的 blend mode 支援。
  • 各種 <audio> 和 <video> 改善。

有在使用 Firefox 的朋友們快更新吧!

分類
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/

分類
程式技術

網頁排版文字排不下的略語語法

在網頁排版上, 有個很麻煩的地方, 就是在固定寬度的文字走文, 若字數太多時, 需要隱藏, 但又希望在介面上看起來理想, 作法可以利用一個 css 的語法:

text-overflow: ellipsis;

這個語法可以應用在限制一定寬度時, 文字走文若有隱藏的部分, 則會出現 … 這種略縮語的方式, 讓看到的訪客可以理解後面還有文字, 只是被略縮掉了, 這是透過 css 的部分來進行, 而不是限制字數輸出(從server端的作法), 而且可以配合文字的字型(有些字型是調合字, 就是有寬有窄), 不是用字數來設限的方式, 會更有彈性的多了.

來看看效果吧:

http://sample.diary.tw/33/1.htm

這個範例利用了一個 slider (jQuery UI) 來進行寬度限制, 方便大家在測試時, 可以看到不同寬度對於略縮語的應用, 有不同的呈現效果.

這裡用的 css 語法如下:

.style1{
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  backgroud: #eeffee;
  width: 240px;
  height: 30px;
}

其中, overflow: hidden; 是超出的部分就不要出現, 而 white-space: nowrap; 是不要換行.

繼續閱續:
http://ant4css.blogspot.tw/2009/03/text-overflow.html

[2013/3/22 12:33]
overflow: hidden; 及 white-space: nowrap; 和這兩個條件併用是必需的, 所以基本上是應用在標題比較適合, 若用在內文走文就沒有辦法利用這個方式來進行了.

可以參考這篇:
http://leeiio.me/text-overflow-ellipsis/

另外也實作了測試: http://sample.diary.tw/33/2.htm 是無法有這個效果的.

分類
程式技術

flickr的相片尺寸

上傳到 flickr 的相片會轉出數種尺寸, 一共有哪些尺寸呢? 以這張圖為例:

http://farm9.staticflickr.com/8423/7675009574_9053807c52_b.jpg

上面看到的尺寸分別為:

Square 75, Square 150, Thumbnail, Small 240, Small 320, Medium 500, Medium 640, Medium 800, Large 1024, Large 1600, Large 2048, Original 共計 12 種尺寸, 其中的 Medium 800, Large 1600, Large 2048 這 3種是要在 2012/3/1 後上傳才新增的尺寸.

尺寸說明如下:
Square 75 為 75×75, Square 150 為 150×150, Thumbnail 為長邊100, Small 240 為長邊240, Small 320 為長邊320, Medium 500為長邊 500, Medium 800為長邊 800, Large 1024為長邊 1024, Large 1600 為長邊 1600, Large 2048為長邊 2048, Original 則為原圖.

上面的範例圖來看, 網址為:

http://farm9.staticflickr.com/8423/7675009574_9053807c52_b.jpg

其中最後的 _b 就是他的尺寸代碼, 尺寸代碼共計以下:
Square 75 為 _s, Square 150 為 _q, Thumbnail 為 _t, Small 240 為 _m, Small 320 為 _n, Medium 500為預設無代碼, Medium 800為 _c, Large 1024為 _b, Large 1600 為 _h, Large 2048為_k, Original 則為 _o.

所以上面的 _b 就是 Large 1024了.

調整一下由 flickr setid 取出相簿功能的程式, 將相片尺寸也列入功能, 於是增加了可以選擇相片尺寸的版本:

http://sample.diary.tw/flickrset/

大家可以用看看!

ps. 由於 _o 必須是有 flickr pro 帳號才有的功能, 所以不把這個尺寸加到可選的功能內.

官方資料: http://www.flickr.com/help/photos/#18

分類
程式技術

table分行分色方式

在 HTML 中, 寫表格做報表是再平常不過的事了.

不過若是要分行分色, 一般可以設一個 class出來, 用個淺色的底色來放在奇數行或是偶數行來呈現, 效果就會出來了.

現在要利用 CSS3 的 selector 來進行這個操作, 也就是 nth-child 的語法. 來看看怎麼用吧!

基本上這個 selector 寫在 tr 後, 如:

tr:nth-child(odd)

這樣自然就會是在奇數行應用對應的 css, 可以參考 http://sample.diary.tw/32/1.htm 的 List1.

List1 用的 css 如下:

tbody.sample1 tr:nth-child(odd){ 
    background: #efefef;
}

當然若是需要選擇偶數行, 則可以使用 nth-child(even) 即可.

下面介紹選擇若是需要每 3行一次, 則可以利用以下語法:

tr:nth-child(3n)

自然就會是每 3行為選擇到的, 可以參考 http://sample.diary.tw/32/1.htm 的 List2.

List2 用的 css 如下:

tbody.sample1 tr:nth-child(3n){ 
    background: #efefef;
}

所以這裡出個題目, odd 及 even 等同於什麼呢? 分別為 2n+1 及 2n, 有興趣的朋友們可以自行試看看.

另外再來看一個更複雜的, 3行, 但用兩色, css 就會多一點:

tbody.sample3 tr:nth-child(3n){
    background: #efefef;
}
tbody.sample3 tr:nth-child(3n+1){
    background: #ffefef;
}

效果請參考 http://sample.diary.tw/32/1.htm 的 List3.

這個”第n個小孩”選擇器用的法, 可以參考這裡: http://www.qianduan.net/useful-nth-child-recipies.html , 其實就是數學的代數式, n從 0 開始, 1次加 1, 所以以下為幾種可能:

n+5 代表著第 5, 6, 7, 8, 9….
-n+3 代表著第 3, 2, 1
2n 代表著 2, 4, 6, 8… (因為沒有第 0個, 也等同於 even)
2n+1 代表著 1, 3, 5, 7… (也等同於 odd)
3n 代表著 3, 6, 9 …

這樣就容易看懂了!

分類
WebTrend

Google Reader將吹熄燈號

哇, 真是要命…. 今天打開 Google Reader 時…

對我來說幾乎和 Gmail 使用率幾乎差不多的 Google Reader 要停止服務了. 這個非常好用的 Google Reader, 無論是用在各種媒體, blog, video, 論壇等, 都十分方便, 而且也是目前很重要的一個媒體資訊來源, 居然要停掉了, 真的很可惜!

上面的 Learn more 連結是到這裡: http://support.google.com/reader/answer/3028851 說明如何下載自己的 Google Reader 資料, 利用 takeout service 可以將在 Google Reader 的資料取回, 裡面最重要的就是 subscriptions.xml 也就是訂閱的資料來源, 方便之後再匯入到其他的閱讀器中.

不知道大家有沒有什麼好的閱讀器可以分享介紹一下呢?

Google 停掉這個服務的原因是什麼? 看起來比較不像是成本問題, 而是使用率吧, 會使用閱讀器的用戶可能都是重度使用者, 一般用戶應該比較少在用, 而透過其他管道來取得資訊吧.

Farewell, Google Reader!

相關新聞:
http://chinese.engadget.com/2013/03/13/google-reader-shut-down-spring-cleaning/
http://mag.udn.com/mag/digital/storypage.jsp?f_MAIN_ID=319&f_SUB_ID=2941&f_ART_ID=445600
http://news.cnyes.com/Content/20130314/KH6OXRHLGUJ33.shtml
這篇寫得較深入: http://tech.qq.com/a/20130314/000085.htm