Browse by Tags

檢測localStorage容量上限

在處理localStorage問題時，在 stackoverflow 發現好用的網頁工具 -- Test of localStorage limits/quota 使用方法很簡單，連上 該網頁 ，網頁裡的JavaScript會嘗試在瀏覽器localStorage塞資料，並持續增加儲存資料的長度，直到放不下為止，即可得到localStorage的容量上限。簡單測試手邊有的瀏覽器: IE 9 = 7100K IE 8 = 4200K IE 10 = 7000K Chrome 26 = 2600K Safari...

Posted 11 April 2013 07:49 AM 由 Jeffrey | 3 comment(s)

Filed under: HTML5

為網頁加入多點觸控功能(IE10版)

之前曾以iPad為對象寫過 為網頁加入多點觸控功能 範例，如今支援觸控的Windows 8筆電在手，不改寫成IE10版怎能止癢? 經過 簡單研究 ，大致整理IE10與Safari/Chrome觸控事件差異如下: 事件名稱不同，IE使用的不是touchstart、touchmove、touchend等名稱，而是 MSPointerDown , MSPointerMove , MSPointerUp , MSPointerOver , MSPointerOut , MSPointerHover .....

Posted 19 November 2012 10:51 PM 由 Jeffrey | with no comments

Filed under: IE, HTML5

瀏覽器在回上頁時不會觸發網頁onLoad事件

最近參與的一個ASP.NET MVC行動網站專案，其中有項操作是由清單頁面按連結跳往編輯網頁，編輯完成後，透過jQuery Mobile內建的回上頁功能回到清單頁面。而清單頁面中透過$(function() { ajaxLoadListData() });的做法，預期每次網頁載入後[ jQuery.ready()事件 ]都會以AJAX方式重新取得最新清單資料，因此回上頁到清單，使用者就可立即看到剛才儲存的變更。 使用IE及Chrome測試功能正常，但進一步使用iPhone/iPad Safari瀏覽時...

Posted 02 August 2012 07:19 AM 由 Jeffrey | 2 comment(s)

Filed under: jQuery, HTML5

網頁介面開發-拖拉元素調整排序

各位老師、各位同學，我今天要示範的網頁介面開發技巧是--拖拉元素調整排序，(停頓兩秒)，拖拉元素調整排序... 開始前，請大家先看 示範網頁 ，網頁上會顯示五個<span>方塊，假設其排序有特定意義(例如: 出場順序，決定先用皮卡丘之後再派妙蛙種子之類的)，使用者可用滑鼠或手指直接拖曳方塊改變其排列順序，當某個方塊被拖到另一個方塊上，就對調兩個方塊的位置，藉此自由調整所有方塊的排列順序。 另外，網頁還很 騷包地 貼心地加上兩個方塊交換位置的動畫效果，更直覺地呈現"位置對調"的操作感受...

Posted 27 July 2012 07:04 AM 由 Jeffrey | with no comments

Filed under: jQuery, HTML5, Kendo UI, knockoutjs

瀏覽器HTML5/CSS3支援度速查工具

相信身處" 跨瀏覽器無間地獄 "的網頁開發朋友們，在動用HTML5/CSS3新語法前，常需要確認該語法在目標瀏覽器版本上的支援狀況才會放心吧? 今天發現一個超方便的查詢工具: When can I use… ( http://caniuse.com ) 好工具不需多費唇舌推銷，實際用一下，即使身處無間地獄也能馬上感受佛光萬丈所帶來的溫暖... 網站作者 累積的功德大概有扶老太太過街兩百次那麼多吧! 幾項不能錯過的特色: Index頁籤列舉了CSS、HTML5、JavaScrip...

Posted 12 July 2012 07:44 PM 由 Jeffrey | with no comments

Filed under: CSS, HTML5

答客問-使用google.maps.Geocoder()轉換地址

前幾天談了 Google Maps API地址轉換 ，Ammon 提醒 其實Google Maps API也有提供 從Javascript端進行地理編碼 的做法，可以全部在Client端處理完成，不需動用ashx。另外，chester 希望 能有使用純Javascript進行地址轉換的範例，所以，範例來了! 本次的程式幾乎跟 上次 完全相同，只改寫了geocodeAjax()函數而已。原本的做法是呼叫ashx，這次則改用goole.maps.Geocoder()，透過Geocoder.geocode...

Posted 21 June 2012 07:59 AM 由 Jeffrey | 6 comment(s)

Filed under: HTML5

利用行動裝置GPS定位尋找臨近地點

早先已展示過， 在網頁內嵌Google地圖 、 將地址轉換為經緯度座標 、 在地圖上顯示自訂地標圖示 等技巧，最後來個綜合應用當作期末考。本次的練習題是"依使用者所在位置，找出距離最近的五個台北市消防分隊"。 簡單整理值得留意的技術細節: 在網頁嵌入Google地圖並放上自訂標示點(Marker)的做法，可參考 筆記-網頁內嵌Google地圖與地理位置模擬 一文。 由市政府網站取得台北市消防分隊地址，透過地理編碼算出經緯度座標，可參考 Google Maps API地址轉換 一文...

Posted 19 June 2012 06:45 AM 由 Jeffrey | 4 comment(s)

Filed under: HTML5

利用HTML5 Canvas動態產生文字圖示

前幾篇Google Map API文章，一直有用到Google地圖 加上Marker 的做法。(即下圖的紅色大頭針圖案) 不過，若全部的標示點用一樣的圖示，會顯得無趣且容易混淆(如下圖所示)，雖然將滑鼠移到標示圖案上方會顯示名稱，在使用者體驗上總覺得還有改善空間。 事實上，Google Maps API在新增地標時，是可以自訂圖示的。 MarkerOptions 提供icon參數可指定圖檔URL，另外有shadow參點可指定陰影圖檔的URL，以取代預設的黑點紅色大頭針圖示。 只是有個小問題，在 消防分隊位置顯示範例...

Posted 16 June 2012 02:54 PM 由 Jeffrey | 7 comment(s)

Filed under: HTML5

Google Maps API地址轉換

將地址轉換成地理座標的程序被稱為 地理編碼 (Geocoding)，Google Maps API亦支援地理編碼服務(注意: 有每天查詢次數不可超過2,500次的限制，申請Google Maps API Premier可以提高到100,000次)，呼叫方法很簡單，使用URL "http: //maps.googleapis.com/maps/api/geocode/json?address=要轉換的地址&sensor=ture或false"，便可得到一份JSON格式的地址座標資訊...

Posted 15 June 2012 08:09 AM 由 Jeffrey | 8 comment(s)

Filed under: jQuery, HTML5

筆記-網頁內嵌Google地圖與地理位置模擬

終於有機會開始玩HTML5中行動裝置GPS整合應用。 我的第一步是希望能在網頁整合Google地圖，即便實際需求不一定需要顯示地圖，但在開發測試階段，要求開發人員直接由25.1234, 121.5678之類數字判斷結果是否正確未免太不人道，因此用地圖方式呈現特定經緯度資料是絕對必要的。第一個練習題就來試試在網頁中顯示特定經緯度的地圖吧! Google地圖Javascript API已經發展到了V3，整合應用起來相當方便省事，而官方的 說明文件 寫得頗為詳細(甚至有中文)，要上手一點也不困難。以下便是我寫的超簡單的入門範例...

Posted 13 June 2012 07:22 AM 由 Jeffrey | 1 comment(s)

Filed under: HTML5

小心IMG SRC空字串效應

在點部落看到一篇有趣的文章: IMG SRC為空字串，可能會造成Session不見 引發我的好奇心，<img src="" />會與Session發生關聯實在是件吊詭的事，於是查了點資料，學會些新東西。 原來，<img src="" />在較早期瀏覽器版本上會觸發不同的反應: IE6-IE8會將src視為指向網頁所在目錄的URL、較舊版的Safari/Chrome/Firefox會將src指向網頁本身，新版本瀏覽器(IE要到IE9,...

Posted 16 November 2011 06:57 AM 由 Jeffrey | 3 comment(s)

Filed under: ASP.NET, HTML5

HTML5 Canvas的Origin-Clean安全原則

前幾天介紹了 如何利用 toDataURL()將canvas繪製結果轉為圖檔的做法，但實際應用時，卻發現常常會冒出奇怪的錯誤: 在IE, Chrome或Safari上出現: SECURITY_ERR: DOM Exception 18 在FireFox則是冒出: 0x805303e8 (NS_ERROR_DOM_SECURITY_ERR) 原來，跟Cross-Site Scripting的限制一樣，HTML canvas也有其 安全原則 ! 簡單來說，可想成每個canvas有個origin-clean旗標...

Posted 02 November 2011 06:47 AM 由 Jeffrey | with no comments

Filed under: ASP.NET, ASP.NET保安, HTML5

CODE-Canvas.toDataURL()另存檔案

在 HTML5 Canvas塗鴉板 裡，雖然提供了匯出圖檔功能，卻必須由使用者自行在網頁的圖檔上按右鍵另存檔案，只能算半自助的服務。理想做法應比照一般網頁下載操作，在按鈕後直接跳出存檔提示，讓使用者決定存檔位置及檔名等，較符合一般使用者期望。 我在網路上找到Jacob Seidelin實作的 cavas2imgage.js程式庫 ，追了一下程式碼發現是透過location.href = DataURI字串實現由Javascript觸發瀏覽器直接下載檔案，但我發現它有一些缺點: 一來無法指定檔案名...

Posted 01 November 2011 06:39 AM 由 Jeffrey | with no comments

Filed under: ASP.NET, jQuery, HTML5

用100行實現HTML5可存檔塗鴉版

這是開發工具程式時的副產品，整理成使用HTML5 Canvas實做手繪塗鴉板的範例(可適用IE9)。 程式結構分成四個主要部分: 第一部分在網頁加入八個不同背景顏色的20x20<div>，掛上click()事件當作點選後指定畫筆顏色的調色盤；第二部分則用同樣概念加入八個20x20的<div>，中央分別放入1x1, 2x2, 3x3, …, 8x8大小的具背景色<div>小方塊，供使用者點選指定畫筆粗細，當調色盤切換顏色時，也會連動變換筆劃粗細小方塊的顏色。 第三部分建立一個300x300的<canvas>物件...

Posted 30 October 2011 11:51 PM 由 Jeffrey | 21 comment(s)

Filed under: jQuery, HTML5

為網頁加入多點觸控功能

相信大家應該看過不少用HTML5做的繪圖板範例(例如: 這個 、 這個 、 這個 和 這個 )，事實上，只要一個canvas元素配合mousedown, mousemove, mouseup事件，加上幾行Code我們就可以自己寫一個陽春手繪板。不過，這種陽春寫法在iPad、iPhone、Android等觸控平台瀏覽器就吃不開了。 在觸控操作時，自然不會有mousedown、mousemove、mouseup這些事件(難道得抓一隻黃金鼠在螢幕上磨蹭嗎?)，而是另外定義了touchstart、touchmove...

Posted 02 October 2011 10:20 AM 由 Jeffrey | 6 comment(s)

Filed under: Mobile, HTML5

搜尋