Browse by Tags

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

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

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

Filed under: jQuery, CODE

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

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

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

Filed under: jQuery, CODE

CODE-以jQuery實現Table相同欄位的上下合併

寫給同事看的jQuery範例，整理後也跟網友們分享。 在<table>呈現資料庫查詢結果，例如: SELECT S.No, U.Name, S.Date, S.Score FROM Score S JOIN User U ON S.No = U.No ORDER BY S.No 由於每個No可能有多筆Score資料，而Name是以No JOIN所得會與No一致，所以No相同時Name也相同。於是Table呈現如下例: (No=1, Name=Jeffrey有三筆，No=3, Name...

Posted 24 June 2011 06:51 AM 由 Jeffrey | 2 comment(s) 17,570

Filed under: jQuery, CODE

CODE-以jQuery實現可編輯<td>

跟同事討論到以下的UI應用情境: 網頁以<table>方式呈現數據矩陣，希望能做到在某一格(<td>)點兩下可以直接編輯格子文字內容，按Enter或點選其他格子結束編輯狀態，並將該格內容更新為剛才輸入結果。 介面如下圖所示，在<td>V11</td>上點兩下，V11就變成<input value=”V11”>，使用者可將<input>的值改成ZZZ，當按Enter或點其他<td>，該格內容就變成<td>ZZZ<...

Posted 23 June 2011 06:31 AM 由 Jeffrey | 4 comment(s) 18,256

Filed under: jQuery, CODE

以jQuery AJAX方式在表單送出前進行資料檢核

今天同事剛好問到如何透過AJAX方式在表單送出前進行資料檢核，索性把我的做法整理一下，供大家參考指教。 先用一個非AJAX，純Javascript的範例開始說明。 假設有一個ASP.NET網頁，txtCode輸入文字，btnSubmit送出表單，用jQuery在btnSubmit掛上onClick事件，檢查txtCode是否為"Darkthread": 若否就alert("Invalid!")；若是則return true允許送出表單。程式很單簡單，在此就不再多做說明...

Posted 27 November 2010 12:01 AM 由 Jeffrey | 2 comment(s) 24,282

Filed under: jQuery, CODE

筆記-讓ASP.NET TreeView可以透過Javascript新增節點

同事在網頁上用了 ASP.NET TreeView控件 ，但專案規格中需要由Javascript端完成新增節點的動作，很不幸地，這不是ASP.NET TreeView內建支援的功能。 如果時間充裕的話，我會建議改用jQuery TreeView Plugin，較符合大量Client端客製的需求，但因時程迫在眉睫，且只差這個小功能，所以大家不要考究"破解"ASP.NET TreeView前端設計的意義，把它想像成打破水缸救人就好。 寫完這段程式，等同於小小地破解ASP.NET TreeView前端HTML與Script設計...

Posted 16 July 2010 09:13 PM 由 Jeffrey | 2 comment(s) 24,339

Filed under: Javascript, ASP.NET, jQuery, CODE

CODE-以jQuery實作側邊滑入選單

今天接到的挑戰是做一個側滑入鏡的選單，點選其中的項目後會關閉選單並執行指定的動作。 花了十來分鐘用jQuery的animate()功能完成粗坯，為了怕未來移交時自己忘光光，索性PO文做個記錄: < html xmlns ="http://www.w3.org/1999/xhtml" > < head > < title > Simple Slide Menu </ title > < script src ="http...

Posted 05 July 2010 09:22 PM 由 Jeffrey | 5 comment(s) 26,993

Filed under: jQuery, CODE

CODE-鎖定有掛onchange事件的欄位停用自動完成

上回提過因使用IE自動完成 造成onchange事件不被觸發 的問題，著實帶來一些困擾，不少User抱怨系統掛在onchange事件的欄位連動功能失效。雖然User漸漸都已學會在這些欄位使用手工輸入，不要依賴IE自動完成帶入結果就可以避開問題，抱怨日少。不過我想從網頁設定上去停用autocomplete還是比較根本的解決之道。 當然，我們可以抱著寧可錯殺一百，不可錯放一個的精神來個$("input:text").attr("autocomplete", "off"...

Posted 05 March 2010 03:56 PM 由 Jeffrey | 2 comment(s) 9,840

Filed under: IE, jQuery, CODE

POC-以jQuery實作會議室登記狀況顯示

專案有個需求，要在網頁上呈現多間會議室一天的使用登記狀況。'傳統思維"可能會傾向用Table <td>模擬出時段區塊，然後將預約起迄時間範圍內的<td>用colspan併成一塊。不過如果要做到登記時間以10分鐘為單位，意味著每個小時要切割成6個<td>，即便沒有任何預約也是，讓Table充滿一堆無用又囉嗦的廢物Tag。加上計算哪幾個<td>要併在一起，得找出第一個<td>加colspan，並將後面<td>省略...

Posted 25 February 2010 03:56 PM 由 Jeffrey | 3 comment(s) 11,743

Filed under: jQuery, CODE

黑暗jQuery工具包1-動態加入預設Style設定

對我來說，Javascript在處理CSS上一直有一個小困擾... 一般在習慣上，為了方便開發人員修改，多半會將Style設定獨立放在.css檔案裡，應用者可視需要覆寫或修改之。但有蠻多時候，應用者根本不打算更動CSS內容，只想直接沿用預設CSS設定，但部署時還是少不了要Copy相對應的.css檔案，網頁也必須多加上<style src="...">宣告。 我總覺得，最理想的方式是將預設css與js融和在一個檔案裡。當開發者想自行定義CSS樣式，可將其寫在.css中加以引用...

Posted 25 February 2010 06:07 PM 由 Jeffrey | with no comments 9,404

Filed under: jQuery, CODE

CODE-列舉元素已掛載的jQuery事件

開發程式時偵錯的需求，想確認預期的事件函數是否已正確bind到元素上? 直覺想法是去查詢jQuery內部物件，列出已經掛載的事件函數。追了一下原始程式，發現jQuery會把各元素的事件保存在jQuery.data(elem, "events")，而events裡又會為不同事件(例如: click, dblclick, load)各宣告一個handlers，放入events[eventType]；由於我們可以對同一事件宣告多個事件函數，因此handlers中會以handlers...

Posted 23 January 2010 10:37 AM 由 Jeffrey | 2 comment(s) 12,394

Filed under: jQuery, CODE

CODE-滲透式jQuery.live()

手上有個需求，要掌握網頁裡所有連結被點擊的狀況。 對jQuery來說這是小菜一碟，利用$("a").live("click", function() { ... });就可在使用者點擊連結時加入自訂邏輯。不過，有挑戰性的部分在於網頁中可能穿插IFrame內嵌其他網頁，原本這個手腳只想動在MasterPage，就打算一口氣將網站所有網頁一網打盡，但$("a")的範圍只限於jQuery所在的window物件範圍，如果連內嵌網頁都要涵蓋，感覺上得在內嵌網頁裡也加上jQuery...

Posted 04 January 2010 08:40 PM 由 Jeffrey | 12 comment(s) 27,804

Filed under: Javascript, jQuery, CODE

CODE-用jQuery實作<select>選項上下移動(複選版)

91哥在留言裡出了個 jQuery考題 : 清單的項目有1,2,3,4,5，單選上下都沒問題了。 多選OK的情況： (A) 選了2,3，按上，清單會變成2,3,1,4,5。 (B) 選了1,3，按上，清單會變成1,3,2,4,5。 (C) 選了2,5，按上，清單會變成2,1,3,5,4。 小的現在碰到的情況是: 選了1,2，按上，清單會變成2,1,3,4,5。原因是因為 each會從依序從最前面開始判斷，當1不做事時，下一個2則會跟1換位置，需求應該是「選了1,2，按上，清單仍維持1,2,3,4...

Posted 22 November 2009 08:46 AM 由 Jeffrey | 8 comment(s) 19,033

Filed under: jQuery, CODE

MEMO-網頁列印強迫分頁

專案裡有個網頁列印的需求，在一份清單中，每個項目以Table方式呈現，而列印時不希望項目Table跨頁。以下是我搞出來的解決方案: < style type ="text/css" > .cPrintOnly { page-break-before: always; display: none; } </ style > < script type ="text/javascript" > $( function () ...

Posted 04 November 2009 07:24 PM 由 Jeffrey | 2 comment(s) 24,558

Filed under: Javascript, jQuery, CODE

jQuery-將網頁元素名稱標示出來

不知有沒有人跟我有一樣的困擾? 步入中年後，腦容量似有變小趨勢，每次寫網頁Client Script時，<input>, <select>的欄位名稱老記不住，要用時總是要回HTML Source或用 IE Dev Tools 去查，查完了一轉頭又忘了，再不然就是切換回Script Editor時搞不清楚剛才寫到哪裡。幾番折騰下來，效率很差，心情很糟。(老了，不中用了~~ 不中用了~~ 不~中~用~了了了了~~~) 於是我寫了以下的jQuery Plugin，試圖把所有的輸入元素id直接顯示在網頁上...

Posted 13 October 2009 09:49 AM 由 Jeffrey | 9 comment(s) 14,017

Filed under: jQuery, CODE

搜尋