Browse by Tags

使用方向鍵切換INPUT焦點之左右鍵補遺
兩年前曾在一個小專案實作過" 利用方向鍵切換<INPUT>輸入焦點 ",當時留了一個小尾巴: 若直接攔截左、右鍵切換焦點,輸入文字時會喪失用左右鍵移動游標的功能,有違使用者的操作預期,因此實際上線時只保留了上下切換,左右移動部分仍得依賴Tab及Shift-Tab。 最近又有機會處理該專案的功能擴充需求,翻寫到同一支js。為了證明自己並非馬齒徒長,兩年來技術上還是有一丁點小長進,就順手把左右鍵切換焦點的功能也補起來囉~~ 聽起來好像很厲害,其實我只是沾了 jCaret...
Posted 23 November 2011 05:49 AMJeffrey | with no comments 9,320
Filed under: ,
CODE-網頁密碼欄位的大寫鎖定鍵提醒
收到需求: 針對大小寫有別的網頁密碼欄,因使用者無法看到其所輸入字元,希望操作介面能比照Windows,在使用者按下大寫鎖定鍵(Caps Lock)時發出提醒,減少誤按導致大小寫相反的狀況。 JavaScript的按鍵事件並未提供大寫鍵資訊,要判斷得繞點路,我想到的簡便做法是透過Shift鍵旗標與輸入字母大小寫間的矛盾性加以推測(例如: 按了Shift卻輸入a-z或未按Shift卻輸入A-Z),雖無法100%掌握大寫鎖定鍵的切換時點精確反應,但多少能發揮提醒作用,勉強算是解決方案。 程式範例如下...
Posted 25 October 2011 07:06 AMJeffrey | 4 comment(s) 9,348
Filed under: ,
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 AMJeffrey | 2 comment(s) 14,476
Filed under: ,
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 AMJeffrey | 4 comment(s) 14,713
Filed under: ,
以jQuery AJAX方式在表單送出前進行資料檢核
今天同事剛好問到如何透過AJAX方式在表單送出前進行資料檢核,索性把我的做法整理一下,供大家參考指教。 先用一個非AJAX,純Javascript的範例開始說明。 假設有一個ASP.NET網頁,txtCode輸入文字,btnSubmit送出表單,用jQuery在btnSubmit掛上onClick事件,檢查txtCode是否為"Darkthread": 若否就alert("Invalid!");若是則return true允許送出表單。程式很單簡單,在此就不再多做說明...
Posted 27 November 2010 12:01 AMJeffrey | 2 comment(s) 20,961
Filed under: ,
筆記-讓ASP.NET TreeView可以透過Javascript新增節點
同事在網頁上用了 ASP.NET TreeView控件 ,但專案規格中需要由Javascript端完成新增節點的動作,很不幸地,這不是ASP.NET TreeView內建支援的功能。 如果時間充裕的話,我會建議改用jQuery TreeView Plugin,較符合大量Client端客製的需求,但因時程迫在眉睫,且只差這個小功能,所以大家不要考究"破解"ASP.NET TreeView前端設計的意義,把它想像成打破水缸救人就好。 寫完這段程式,等同於小小地破解ASP.NET TreeView前端HTML與Script設計...
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 PMJeffrey | 5 comment(s) 23,538
Filed under: ,
CODE-鎖定有掛onchange事件的欄位停用自動完成
上回提過因使用IE自動完成 造成onchange事件不被觸發 的問題,著實帶來一些困擾,不少User抱怨系統掛在onchange事件的欄位連動功能失效。雖然User漸漸都已學會在這些欄位使用手工輸入,不要依賴IE自動完成帶入結果就可以避開問題,抱怨日少。不過我想從網頁設定上去停用autocomplete還是比較根本的解決之道。 當然,我們可以抱著寧可錯殺一百,不可錯放一個的精神來個$("input:text").attr("autocomplete", "off"...
Posted 05 March 2010 03:56 PMJeffrey | 2 comment(s) 7,746
Filed under: , ,
POC-以jQuery實作會議室登記狀況顯示
專案有個需求,要在網頁上呈現多間會議室一天的使用登記狀況。'傳統思維"可能會傾向用Table <td>模擬出時段區塊,然後將預約起迄時間範圍內的<td>用colspan併成一塊。不過如果要做到登記時間以10分鐘為單位,意味著每個小時要切割成6個<td>,即便沒有任何預約也是,讓Table充滿一堆無用又囉嗦的廢物Tag。加上計算哪幾個<td>要併在一起,得找出第一個<td>加colspan,並將後面<td>省略...
Posted 25 February 2010 03:56 PMJeffrey | 3 comment(s) 9,029
Filed under: ,
黑暗jQuery工具包1-動態加入預設Style設定
對我來說,Javascript在處理CSS上一直有一個小困擾... 一般在習慣上,為了方便開發人員修改,多半會將Style設定獨立放在.css檔案裡,應用者可視需要覆寫或修改之。但有蠻多時候,應用者根本不打算更動CSS內容,只想直接沿用預設CSS設定,但部署時還是少不了要Copy相對應的.css檔案,網頁也必須多加上<style src="...">宣告。 我總覺得,最理想的方式是將預設css與js融和在一個檔案裡。當開發者想自行定義CSS樣式,可將其寫在.css中加以引用...
Posted 25 February 2010 06:07 PMJeffrey | with no comments 8,026
Filed under: ,
CODE-列舉元素已掛載的jQuery事件
開發程式時偵錯的需求,想確認預期的事件函數是否已正確bind到元素上? 直覺想法是去查詢jQuery內部物件,列出已經掛載的事件函數。追了一下原始程式,發現jQuery會把各元素的事件保存在jQuery.data(elem, "events"),而events裡又會為不同事件(例如: click, dblclick, load)各宣告一個handlers,放入events[eventType];由於我們可以對同一事件宣告多個事件函數,因此handlers中會以handlers...
Posted 23 January 2010 10:37 AMJeffrey | 2 comment(s) 9,692
Filed under: ,
CODE-滲透式jQuery.live()
手上有個需求,要掌握網頁裡所有連結被點擊的狀況。 對jQuery來說這是小菜一碟,利用$("a").live("click", function() { ... });就可在使用者點擊連結時加入自訂邏輯。不過,有挑戰性的部分在於網頁中可能穿插IFrame內嵌其他網頁,原本這個手腳只想動在MasterPage,就打算一口氣將網站所有網頁一網打盡,但$("a")的範圍只限於jQuery所在的window物件範圍,如果連內嵌網頁都要涵蓋,感覺上得在內嵌網頁裡也加上jQuery...
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 AMJeffrey | 8 comment(s) 15,698
Filed under: ,
MEMO-網頁列印強迫分頁
專案裡有個網頁列印的需求,在一份清單中,每個項目以Table方式呈現,而列印時不希望項目Table跨頁。以下是我搞出來的解決方案: < style type ="text/css" > .cPrintOnly { page-break-before: always; display: none; } </ style > < script type ="text/javascript" > $( function () ...
jQuery-將網頁元素名稱標示出來
不知有沒有人跟我有一樣的困擾? 步入中年後,腦容量似有變小趨勢,每次寫網頁Client Script時,<input>, <select>的欄位名稱老記不住,要用時總是要回HTML Source或用 IE Dev Tools 去查,查完了一轉頭又忘了,再不然就是切換回Script Editor時搞不清楚剛才寫到哪裡。幾番折騰下來,效率很差,心情很糟。(老了,不中用了~~ 不中用了~~ 不~中~用~了了了了~~~) 於是我寫了以下的jQuery Plugin,試圖把所有的輸入元素id直接顯示在網頁上...
Posted 13 October 2009 09:49 AMJeffrey | 9 comment(s) 10,673
Filed under: ,
更多文章 下一頁 »

搜尋

Go

<November 2017>
SunMonTueWedThuFriSat
2930311234
567891011
12131415161718
19202122232425
262728293012
3456789
 
RSS
創用 CC 授權條款
【廣告】
twMVC
最新回應

Tags 分類檢視
關於作者

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

文章典藏
其他功能

這個部落格


Syndication