Category: jQuery

前幾天分享了我的私房「網頁新手提示」懶人工具,得到不少回饋,其中有幾則是這麼說的: 這兩天,我越想越不對勁... 原本好意提醒使用者有哪些功能可用,但如果使用者不是新手,只是換電腦或清掉瀏覽器記錄,也得全程看完才能開始操作,心裡一定很賭爛吧? 我無法定義何謂「好的操作介面」,但剝奪使用者自主權的一...

寫網頁的人總夢想著自己寫的介面夠簡單夠直覺,不需說明文件,使用者模索兩下就能上手。但事與願違,網頁上一些自以為夠明顯一定會被使用者發現的得意設計,上線半年還乏人問津,常令設計者一陣鼻酸。 手機 App 有一種不錯的設計概念可供借鏡,做法是第一次開啟 App 時先跳出一段動畫展示,簡要提示新功能或操作...

如何使用 JavaScript 模擬 <input type="file"> 選取檔案上傳操作,一直是我寫網頁自動測試的最大障礙。 基於安全考量,瀏覽器禁止 JavaScript 代替使用者為 <input type="file"> 的...

非同步邏輯是寫 JavaScript 逃不掉的複雜課題,古早流行的做法是傳入 Callback 函式當參數,待特定作業完成再呼叫,缺點是串接程序一旦變多,就會出現波動拳式排版,寫到渾然不知身處夢境第幾層: asyncJob1(function() { //Callback 函式: asy...

CSS 的 text-overflow: ellipsis 刪節號效果可讓長度不一的文字等寬顯示,遇到版面空間有限又必須整齊排列時很好用,但套用刪節號樣式後看不到完整文字,尤其遇上文字前半截相同時更是難以區別,是一大困擾。為此,我的慣用解法是為套用 ellipsis 的文字元素加上 title ...

寫這篇的動機是常在專案看到「古典式」JavaScript陣列處理,例如:跑迴圈將物件陣列的某個字串屬取出轉成字串陣列、篩選物件陣列取得特定類別的集合。用for迴圈處理沒什麼不對,但既然專案已經用了jQuery,能一行搞定卻寫成三五行不免可惜(程式又不按行數計酬,寫愈多手愈酸咩 XD)。感覺上還有...

最近在寫的元件有個「彈出對話框經使用者確認再刪除」的需求,原本是小事一椿,但之前介紹過使用自訂確認對話框取代window.confirm的技巧已廣泛應用在專案裡,某些時候也可能只用window.confirm就打發,問題就變複雜了。 二者最大的差異是前者($.kendoConfirm)為非同步...

雖然按 Tab 切換輸入焦點已是Windows操作的普遍慣例,但每回在寫作業平台網站時,規格中總少不了"要能直接按 Enter 切換到下一個輸入欄位"的要求。網路上已經有很多在網頁上用 Enter 取代 Tab 移動焦點的 jQuery Plugin,但很可惜沒有一個100%滿足我的需求,所以,...

【前情提要】利用File API與XHR2 onprogress事件,我們成功做出檔案上傳進度條。但我在工作上常遇到另一種情境 -- 內部系統的上傳轉檔作業。營運資料檔案一般不大,加上在Intranet裡傳輸,上傳只在彈指間,Server端解析資料、塞入資料庫才是重頭戲,常得耗上幾十秒到幾分鐘。...

在傳統網頁上傳大檔案,得等到全部傳完才會有回應,等待期間沒消沒息,搞不清楚是沒傳完還是當掉常為人詬病,也嚴重破壞使用者體驗。想在傳輸過程回報上傳進度,過去有些Flash、Java Applet或ActiveX的解決方案,但依賴外掛元件有部署及無法跨平台的疑慮。當HTML5規格漸成主流,長久以來的...