Browse by Tags

多想兩分鐘，你可以不用 validateRequest="false"

先來看以下的程式，網頁上放了一個<textarea>及<input type="button">，按鈕後以$.post()方式將<textarea>的內容送至ASP.NET Server端程式，在Page_Load中讀取Request["data"]並顯示出來，另外並透過$.ajaxSetup()指定error錯誤事件函數，捕捉並顯示伺服器端的錯誤資訊。 <%@ Page Language="C#"...

Posted 01 February 2012 08:21 AM 由 Jeffrey | 1 comment(s)

Filed under: ASP.NET, Security, jQuery

【茶包射手日記】使用IE Dev Tools追查Javascript效能問題

同事回報某個網頁出現" 在IE8下，使用jquery.blockUI遮蔽某個div後，<input type="text">輸入時，每打一個字都要等1-2秒字元才會顯示 "的問題。 開啟VM使用IE8可重現問題；而同樣網頁在IE9下則運作正常。針對此一IE下的JavaScript茶包，決定交由 JavaScript效能茶包一哥 --IE Dev Tools Profiler工具進行獵殺! 使用IE8開啟問題網頁，按下F12啟用IE Dev Tools...

Posted 18 January 2012 11:44 PM 由 Jeffrey | 1 comment(s)

Filed under: Trouble-Shooting, IE, jQuery

使用方向鍵切換INPUT焦點之左右鍵補遺

兩年前曾在一個小專案實作過" 利用方向鍵切換<INPUT>輸入焦點 "，當時留了一個小尾巴: 若直接攔截左、右鍵切換焦點，輸入文字時會喪失用左右鍵移動游標的功能，有違使用者的操作預期，因此實際上線時只保留了上下切換，左右移動部分仍得依賴Tab及Shift-Tab。 最近又有機會處理該專案的功能擴充需求，翻寫到同一支js。為了證明自己並非馬齒徒長，兩年來技術上還是有一丁點小長進，就順手把左右鍵切換焦點的功能也補起來囉~~ 聽起來好像很厲害，其實我只是沾了 jCaret...

Posted 23 November 2011 05:49 AM 由 Jeffrey | with no comments

Filed under: jQuery, CODE

jQuery 1.7筆記

jQuery又推出新版本囉! 1.7版已於11/3 正式發佈 ~ 又到了該整理新版筆記的時候: PS: 從上週五就有"好多人"提醒我(只差走在路上沒被人拍肩): 嘿! jQuery出1.7了耶~~ 雖然遲了幾天，但我還是很自愛地再當一下值日生... XD .on()及.off() 要了解這兩個新事件函數前，得先從.delegate()講起。簡單來說，.delegate()的做法是在父元素掛載事件函數，用以處理其下子元素(甚至是稍後才要建立的子元素)的事件邏輯。例如: $("#someTable"...

Posted 07 November 2011 07:09 AM 由 Jeffrey | 4 comment(s)

Filed under: jQuery

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 | 12 comment(s)

Filed under: jQuery, HTML5

jQuery筆記-IFrame .load()事件

很久前討論過ready()與load()的 差異 ，今天處理IFrame load()事件時，又有新發現。 依jQuery文件: The load event is sent to an element when it and all sub-elements have been completely loaded. This event can be sent to any element associated with a URL: images, scripts, frames, iframes...

Posted 27 October 2011 07:30 AM 由 Jeffrey | with no comments

Filed under: jQuery

jQuery .data()與.attr()筆記兩則

這兩天寫程式遇到兩則jQuery議題，花了點時間才釐清，特筆記備忘。 第一個問題出現在 $("#boo”).data(“foo”, fooObject).addClass(“bar”); ，其於特定情況下會彈出" Error: Unable to get value of the property 'addClass': object is null or undefined "錯誤。 第二個問題，則是發現 $("<div />...

Posted 25 October 2011 11:04 PM 由 Jeffrey | with no comments

Filed under: jQuery

CODE-網頁密碼欄位的大寫鎖定鍵提醒

收到需求: 針對大小寫有別的網頁密碼欄，因使用者無法看到其所輸入字元，希望操作介面能比照Windows，在使用者按下大寫鎖定鍵(Caps Lock)時發出提醒，減少誤按導致大小寫相反的狀況。 JavaScript的按鍵事件並未提供大寫鍵資訊，要判斷得繞點路，我想到的簡便做法是透過Shift鍵旗標與輸入字母大小寫間的矛盾性加以推測(例如: 按了Shift卻輸入a-z或未按Shift卻輸入A-Z)，雖無法100%掌握大寫鎖定鍵的切換時點精確反應，但多少能發揮提醒作用，勉強算是解決方案。 程式範例如下...

Posted 25 October 2011 07:06 AM 由 Jeffrey | 4 comment(s)

Filed under: jQuery, CODE

謙卑式jQuery檢核-動態訊息

在先前介紹過的Unobtrusive Validation(謙卑式檢核)寫法，我們都是用data-val-ruleName="檢核失敗訊息"的方式指定檢核失敗時要顯示的訊息文字。但在實務情境下，檢核訊息常需依使用者選擇或輸入的內容不同而顯示不同的訊息，以提高介面親和力。(例如: "您輸入的字串過長，請刪去5個字元"、"12345不是一個有效的使用者名稱"、 "2011/99/31是哪門子鬼日期，再亂搞信不信老子劈死你!"...

Posted 21 October 2011 12:27 AM 由 Jeffrey | 2 comment(s)

Filed under: jQuery, Unobtrusive Validation

jQuery .delegate() vs .live()

.live() 與 .delegate() 都是藉重DOM事件會由子元素一路向父元素Bubble Up的特性，在document或特定元素統一掛上事件函數，事件被觸發時再透過選擇器比對事件目標元素是否吻合，決定要不要執行事件邏輯，藉此提升效率，同時還能將"未來才會建立的元素"也納入事件的涵蓋範圍。(細節可參考 舊文 ) 不過，.live()與.delegate()做的事幾乎一模一樣，依江湖上的說法，1.4版推出的.delegate()又比1.3版誕生的.live()來得有效率...

Posted 14 October 2011 12:15 AM 由 Jeffrey | 5 comment(s)

Filed under: jQuery

謙卑式jQuery檢核: 複合式欄位

先講一個好消息，不讓ASP.NET MVC專美於前，謙卑式檢核(Unobtrusive Validation)在ASP.NET 4.5 WebForm將成為 內建功能 囉! 聽到這消息讓我格外振奮，它意味著: 1) 現在已投入的研究心得及開發出來的擴充模組，將來肯定能更廣泛應用，2) 未來寫ASP.NET 4.5 WebForm時，不用額外手工加掛檢核，更加省事 3) 我又押對寶了 ^__^。 這篇要談一個常見問題: 謙卑式檢核的寫法主要透過在特定欄位元素(INPUT、SELECT)加上data...

Posted 30 September 2011 07:21 AM 由 Jeffrey | with no comments

Filed under: jQuery, Unobtrusive Validation

Multiple-Selection Field With jQuery Unobtrusive Validation

ASP.NET MVC 3 comes with jQuery unobtrusive validation (if you are not familiar with jQuery unobtrusive validation, Brad Wilson has a good article ), an elegant way to implement client-side validation. After learning it, I start to use it widely in my...

Posted 28 September 2011 07:28 AM 由 Jeffrey | with no comments

Filed under: English, jQuery, ASP.NET MVC, Unobtrusive Validation

讓AJAX動態內容支援瀏覽器回上頁功能

隨著AJAX動態更新技術的普及，手邊專案有愈來愈多網頁開始實現"無PostBack"的設計風格，透過jQuery $.post(), $.get()與ASP.NET程式溝通，執行查詢、更新作業並取得結果，再動態改變HTML DOM回應使用者。(註: 對ASP.NET開發者來說，UpdatePanel是另一個無痛實現AJAX化的選項，但有些 副作用 ) 由使用者的回饋來看，減少網頁PostBack與網頁重新導向次數，確實大幅提高操作回應速度，提供更好的操作體驗，不過倒有一個常被垢病之處...

Posted 22 September 2011 07:49 AM 由 Jeffrey | 4 comment(s)

Filed under: AJAX, jQuery

謙卑式jQuery檢核: 勾選欄位必填檢查

網頁介面有時會有"使用者必須勾選某個CheckBox"的檢核要求，例如: 要求使用者確認已閱讀過並同意授權聲明或免責條款。若要使用 謙卑式jQuery檢核 實現，直覺想到的就是為<inpu type="checkbox">加上data-val=”true”及data-val-required="請勾選"，理論上應該可行。 <! DOCTYPE html >   < html > < head...

Posted 02 September 2011 06:57 AM 由 Jeffrey | 2 comment(s)

Filed under: jQuery, Unobtrusive Validation

搜尋