jQuery-將網頁元素名稱標示出來
不知有沒有人跟我有一樣的困擾? 步入中年後，腦容量似有變小趨勢，每次寫網頁Client Script時，<input>, <select>的欄位名稱老記不住，要用時總是要回HTML Source或用IE Dev Tools去查，查完了一轉頭又忘了，再不然就是切換回Script Editor時搞不清楚剛才寫到哪裡。幾番折騰下來，效率很差，心情很糟。(老了，不中用了~~ 不中用了~~ 不~中~用~了了了了~~~)
於是我寫了以下的jQuery Plugin，試圖把所有的輸入元素id直接顯示在網頁上，方便對照，也試圖挽救我岌岌可危的事業。
$.fn.showElemId = function(bgc, fc) { return this.each(function() { var $elem = $(this);
//if (!$elem.is(":visible")) return; var pos = $elem.offset();
var html = "<span style='position: absolute; z-index: 999; top: " +
(pos.top - 15) + "px; left: " + pos.left +
"px; background-color: " + (bgc || "red") + "; color: " +
(fc || "white") + "; font-size: 11px; line-height: 12px; padding: 1px;'>" +
(this.id || "----") +
"</span>";
$("body").append(html); });
};
/* 使用範例: $(":text,select").showElemId(); */
用Hotmail的註冊畫面做個示範(只查:text,select，不包含:button,:password)，如下圖所示，輸入欄位元素名稱一目瞭然，列印出來，就不用每次去HTML Source裡找半天了，真是中年程式開發人員的福音呀~~~
