Browse by Tags

HTML5上傳作業進度條-SignalR進階版
【前情提要】 利用File API與XHR2 onprogress事件,我們成功做出 檔案上傳進度條 。但我在工作上常遇到另一種情境 -- 內部系統的上傳轉檔作業。營運資料檔案一般不大,加上在Intranet裡傳輸,上傳只在彈指間,Server端解析資料、塞入資料庫才是重頭戲,常得耗上幾十秒到幾分鐘。這種狀況下,用XHR2做進度條的意義不大,咻! 一秒不到就從0%到100%,但上傳資料何時能處理完只有天知道? 使用者終究又陷入無法得知系統還在跑或者已經當掉的焦慮。我想起了"SignalR"...
HTML5檔案上傳進度條
在傳統網頁上傳大檔案,得等到全部傳完才會有回應,等待期間沒消沒息,搞不清楚是沒傳完還是當掉常為人詬病,也嚴重破壞使用者體驗。想在傳輸過程回報上傳進度,過去有些Flash、Java Applet或ActiveX的解決方案,但依賴外掛元件有部署及無法跨平台的疑慮。當HTML5規格漸成主流,長久以來的問題總算有了簡潔有效的解法。 要掌握上傳進度有一個關鍵: Client Script必須掌握檔案大小以及已上傳資料量,才可能計算上傳百分比回報狀態。傳統使用<input type="file">選取檔案配合<input...
HTML5練習-從桌面拖拉檔案到網頁
這年頭,網頁如果不支援從桌面或檔案總管直接拖拉檔案,想自稱HTML5都心虛,只能稱作HTML4.5(誤),老闆客戶還會不時打你臉: "Gmail、OneDrive(SkyDrive)、DropBox幾百年前就有了! 為什麼你到現在還做不出來?" (網頁攻城獅內心的OS: 你有給我Google或Microsoft等級的薪水嗎?) 搞網頁好辛苦,客戶老闆上網胡亂逛,不小心看到酷炫網站,馬上把規格放進專案,還說什麼瀏覽器打開HTML、CSS、JavaScript都能看,快點抄一抄給我做出來...
Posted 08 March 2014 12:13 PMJeffrey | 6 comment(s) 22,718
Filed under: , ,
瀏覽器在回上頁時不會觸發網頁onLoad事件
最近參與的一個ASP.NET MVC行動網站專案,其中有項操作是由清單頁面按連結跳往編輯網頁,編輯完成後,透過jQuery Mobile內建的回上頁功能回到清單頁面。而清單頁面中透過$(function() { ajaxLoadListData() });的做法,預期每次網頁載入後[ jQuery.ready()事件 ]都會以AJAX方式重新取得最新清單資料,因此回上頁到清單,使用者就可立即看到剛才儲存的變更。 使用IE及Chrome測試功能正常,但進一步使用iPhone/iPad Safari瀏覽時...
Posted 02 August 2012 07:19 AMJeffrey | 3 comment(s) 34,856
Filed under: ,
網頁介面開發-拖拉元素調整排序
各位老師、各位同學,我今天要示範的網頁介面開發技巧是--拖拉元素調整排序,(停頓兩秒),拖拉元素調整排序... 開始前,請大家先看 示範網頁 ,網頁上會顯示五個<span>方塊,假設其排序有特定意義(例如: 出場順序,決定先用皮卡丘之後再派妙蛙種子之類的),使用者可用滑鼠或手指直接拖曳方塊改變其排列順序,當某個方塊被拖到另一個方塊上,就對調兩個方塊的位置,藉此自由調整所有方塊的排列順序。 另外,網頁還很 騷包地 貼心地加上兩個方塊交換位置的動畫效果,更直覺地呈現"位置對調"的操作感受...
Posted 27 July 2012 07:04 AMJeffrey | with no comments 21,261
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 AMJeffrey | 8 comment(s) 87,491
Filed under: ,
CODE-Canvas.toDataURL()另存檔案
在 HTML5 Canvas塗鴉板 裡,雖然提供了匯出圖檔功能,卻必須由使用者自行在網頁的圖檔上按右鍵另存檔案,只能算半自助的服務。理想做法應比照一般網頁下載操作,在按鈕後直接跳出存檔提示,讓使用者決定存檔位置及檔名等,較符合一般使用者期望。 我在網路上找到Jacob Seidelin實作的 cavas2imgage.js程式庫 ,追了一下程式碼發現是透過location.href = DataURI字串實現由Javascript觸發瀏覽器直接下載檔案,但我發現它有一些缺點: 一來無法指定檔案名...
Posted 01 November 2011 06:39 AMJeffrey | 3 comment(s) 22,795
Filed under: , ,
用100行實現HTML5可存檔塗鴉版
這是開發工具程式時的副產品,整理成使用HTML5 Canvas實做手繪塗鴉板的範例(可適用IE9)。 程式結構分成四個主要部分: 第一部分在網頁加入八個不同背景顏色的20x20<div>,掛上click()事件當作點選後指定畫筆顏色的調色盤;第二部分則用同樣概念加入八個20x20的<div>,中央分別放入1x1, 2x2, 3x3, …, 8x8大小的具背景色<div>小方塊,供使用者點選指定畫筆粗細,當調色盤切換顏色時,也會連動變換筆劃粗細小方塊的顏色。 第三部分建立一個300x300的<canvas>物件...
Posted 30 October 2011 11:51 PMJeffrey | 29 comment(s) 62,385
Filed under: ,

搜尋

Go

<January 2018>
SunMonTueWedThuFriSat
31123456
78910111213
14151617181920
21222324252627
28293031123
45678910
 
RSS
創用 CC 授權條款
【廣告】
twMVC
最新回應

Tags 分類檢視
關於作者

一個醉心技術又酷愛分享的Coding魔人,十年的IT職場生涯,寫過系統、管過專案, 也帶過團隊,最後還是無怨無悔地選擇了技術鑽研這條路,近年來則以做一個"有為的中年人"自許。

文章典藏
其他功能

這個部落格


Syndication