發現一個 jQuery 的簡單應用: 圖片動畫按鈕

剛剛發現一個 jQuery 的簡單應用: 圖片動畫按鈕。
使用很簡單，在 a 加上 class=”js_uniButton”，然後裡面包 img ，這個圖檔有兩個，檔名加上 _hover 的，就表示滑鼠在上面時的圖。
http://www.patrickhansen.com/blog/2010/05/13/jquery-image-based-buttons/

值得注意的是， a 的 href 沒設好，或是給的圖檔名不對，都會造成游標閃爍或不會變手指。

HTML 隱藏欄位在 ASP.NET 的使用問題

HTML 的 input type="hidden"

• 在 jQuery 用 $('#hidden_id').val('your_value'); 可以寫入，用 $('#hidden_id').val(); 可以讀取
• 在 ASP.NET C# 用 Request.Form["hidden_name"] 可以讀到 your_value

因此 id 與 name 都很重要!!

另外，ASP.NET  控件 Hidden Field 行為不像上述 HTML 的 input，就算找到實際的 ID，用 jQuery 改變 value 也沒用，無法觸發事件，也沒辦法在ASP.NET讀值?

CSS 也得有個 Framework ?

最早是接觸 reset.css，ie7-js 這一類，他們都是為了縮小瀏覽器的差異而設計的，
不過要大到 "Framework" 規模，倒是引起我的好奇。

下列是比較新的兩篇介紹:
http://midashuang.wordpress.com/2010/12/15/css-framework%E6%95%B4%E7%90%86-1/
http://midashuang.wordpress.com/2010/12/17/css-framework%E6%95%B4%E7%90%86-2/

( 這篇是伺服器端的 CSS Framework 介紹: http://www.netatlantis.com/?p=1864 )

其中 52Framework 的 HTML5 功能還滿吸引我的。
不過菜鳥還是飛慢一點，試試 Blueprint 或 960 Gride System 好了。

那就從 BlueTrip 開始吧...

---

2011.3.12
BlueTrip 的官網發展在 2010 五月似乎停住了。
52Framework 也差不多在 2010 十一月。
這些都是用 CSS Float ，然後指定預先訂好的幾組寬度來定位。用起來很不習慣...對於美工人員更不利，因為在 DW 不能直接拖曳。

再試試 YUI 或 Extjs 吧...
jQuery 也有 jQuery UI，jQuery Tools... 不過這已經偏離 CSS Framework

---

2011.10.9
曾試過 52Framework 的 class 定位，寫程式很方便，指定 class 即可定位，概念上，是把整個畫面像表格一樣切割，藉由指定 div 的 class 來定位，可是美工還是喜歡拖曳式的吧。

另外發現有編譯型的 compass 。
連 HTML 也有編譯型的 HAML。
這一類的雖然好用，可是距離美工的慣用工具越來越遠...不太妙。

Excel 保護工作表問題

選單 "工具>保護>允許使用者可編輯區" 選好可編輯範圍，然後設密碼後，卻發生有只有部分儲存格的可以編輯，無法完全按照設定。

建議清除所有可編輯範圍設定，單純去認定儲存格的 "鎖定"狀態。
按右鍵選單有 "儲存格格式(F)...>保護"  ，裡面可以看出 "鎖定" 的狀態。
如果工具列有相關工具，那麼從鎖頭 ICON 可以更快看出這個儲存格是否被鎖。

如果可編輯儲存格比較少 ，可以用下列步驟:

1. 全選所有儲存格
2. 按右鍵選單有 "儲存格格式(F)...>保護"，確認把鎖定的勾勾好。
3. 把可編輯的儲存格選好， 用上述步驟把鎖定的勾勾取消。
4. 可以去設定密碼了， 選單 "工具>保護>保護儲存格"。

最後還是要強調 "清除所有可編輯範圍設定"，因為這容易造成 "鎖定" 狀態的混亂，導致無法預期的保護設定。

我們可愛的美工兩度在 Excel2003 氣急敗壞，浪費不少時間。
唉~說不定用 Open office 就能避免呢!?

CSS 垂直置中問題

CSS 垂直置中，如果需考慮萬惡的 IE6 ，那麼頭就大了!!
我們只能祈求 XP 電腦漸漸淘汰，大家買新電腦就不會再用它上網。

如果以美工在 DW 的操作方便性，用 apDiv 包 table 可能是目前較方便的作法。
至於 "避免用 table 排版" 的爭議，可以參考這篇 http://goliimage.pixnet.net/blog/post/26437445
我覺得大的基礎版型避免用 table 切圖即可，其他就盡量不要搞到 table 套 table 的複雜處境...原則上，就是要為日後修改的人著想，因為那個人常常是自己 Orz。。。

• table 寬度需要固定，可用 table-layout:fixed;

• 垂直置中常用 vertical-align 這篇有詳細解說 http://www.flag.com.tw/book/cento-5105.asp?bokno=F6462&id=224
• 垂直置中 DIV 內的圖片 img ，可參考 http://www.minwt.com/?p=2049，這比用 table 簡單。
• DIV 單列文字垂直置中，可以利用 vertical-align:middle;line-height: div高度; 也不用 table

div 包 table 可以利用下列 CSS

vamDiv{
}
.vamDiv table{
    table-layout:fixed;
    width:100%;
    height:100%;
}
.vamDiv table tr td{
    text-align:center;
    vertical-align:middle;
}

使用時：<div class="vamDiv"><table><tr><td>...</td></tr></div>
這時...就上下左右都置中了，不用再對 table 與 td 個別作 CSS。

ie7-js 使用 IE9.js 時出問題

在 IE6，IE8 試過，IE9.js 出現錯誤訊息。
大概 Try 了一個多小時，只好到官網找...運氣不錯，找 "inherit font"  就能找到...
http://code.google.com/p/ie7-js/issues/detail?id=275&q=inherit%20font

結果是把 IE9.js 的 943-946 mark 掉即可。
2011.03.04 後記:
上述改法有後遺症，可能導致 IE6 png 透明背景失效。
所以還是 mark 2079 列，比較安全一些。

這 ie7-js 是彌補 IE 瀏覽器不符合標準的好工具，請參考這篇文章
http://blog.yam.com/visioncan/article/13704215

HTML 表格關於排版的問題

表格預設css是 table-layout:auto ，常常導致寬度超出預期設計。解決方式如下...

• 英文字左右要加上半型空白或符號，避免直接連接中文字，或是中文全型符號。
• <table>加上 table-layout:fixed ，能固定寬度，而且有加速顯示的效果: http://blog.miniasp.com/post/2009/04/20/Use-CSS-table-layout-property-to-speed-up-table-rendering.aspx
• 固定高度: 如果需要避免換行而造成高度變化: <td width=25% style="overflow:hidden" nowrap><div>文字</div></td>。至於不用px 而用%，這又是 IE6 造成的。請參考 http://www.yici.net/content/text_all/text_0/311_1.html

如果搞到每個 td 裡面要有個 div，那麼乾脆就用這篇 http://uiop7890.pixnet.net/blog/post/22445273
.tdDiv {
overflow: auto;
height: 100px; width: 200px;
clip: rect( ); }
這樣一來就不用另外設定 table 與 td 了。只是苦了美工，在 DW 無法直覺的拖拉。