Browse by Tags

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

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

公佈在黑暗執行緒 (Weblog) 由 Jeffrey 發表於 07-16-2010
CODE-以jQuery實作側邊滑入選單

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

公佈在黑暗執行緒 (Weblog) 由 Jeffrey 發表於 07-05-2010
CODE-鎖定有掛onchange事件的欄位停用自動完成

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

公佈在黑暗執行緒 (Weblog) 由 Jeffrey 發表於 03-05-2010
POC-以jQuery實作會議室登記狀況顯示

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

公佈在黑暗執行緒 (Weblog) 由 Jeffrey 發表於 02-25-2010
黑暗jQuery工具包1-動態加入預設Style設定

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

公佈在黑暗執行緒 (Weblog) 由 Jeffrey 發表於 02-25-2010
CODE-列舉元素已掛載的jQuery事件

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

公佈在黑暗執行緒 (Weblog) 由 Jeffrey 發表於 01-22-2010
CODE-滲透式jQuery.live()

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

公佈在黑暗執行緒 (Weblog) 由 Jeffrey 發表於 01-04-2010
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,5」。不曉得針對這樣的需求，黑大有沒建議的作法？好一個難易適中的挑戰題，忍不住手癢，就試解如下...

公佈在黑暗執行緒 (Weblog) 由 Jeffrey 發表於 11-21-2009
MEMO-網頁列印強迫分頁

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

公佈在黑暗執行緒 (Weblog) 由 Jeffrey 發表於 11-04-2009
jQuery-將網頁元素名稱標示出來

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

公佈在黑暗執行緒 (Weblog) 由 Jeffrey 發表於 10-12-2009

第1頁，共2頁 (19個項目) 1 2 下一頁 >