無聊的宅男沒事又改起這個Live Writer的外掛程式了。原本的版本還不錯用，不過就是覺的少了點什麼... 除了加個框之外，跟網站版本也沒什麼差別嘛。用了一陣子，又加了兩個小功能上去...

COPY CODE

這個功能是從MSDN學來的，MSDN文章的範例程式碼，都會附個鈕讓讀者按，按一下程式碼就會被覆製到簡貼簿... 這個功能還蠻實用的，因為我常常這樣貼... 哈哈，不曉得看我 BLOG 的人有沒有這習慣? 不管了，我的BLOG，我寫的PLUGINS，我說好用的東西當然要加上去... 底下是改版後的外掛程式，張貼程式碼的樣子:

----------------[以下開始]------------------

        //        // 不重要的程式碼... 拿來當 Model 用的...        //        private int CountLeadingSpaces(string line)        {            int count = 0;            foreach (char ch in line)            {                if (ch == ' ')                {                    count++;                }                else                {                    break;                }            }            return count;        }

   1:  //

   2:  // 不重要的程式碼... 拿來當 Model 用的...

   3:  //

   4:  private int CountLeadingSpaces(string line)

   5:  {

   6:      int count = 0;

   7:      foreach (char ch in line)

   8:      {

   9:          if (ch == ' ')

  10:          {

  11:              count++;

  12:          }

  13:          else

  14:          {

  15:              break;

  16:          }

  17:      }

  18:      return count;

  19:  }

----------------[結束]-----------------------

HTML PREVIEW

另一個無聊的功能，是過去在寫些HTML相關的文章，常常要做這樣的動作: 一方面要想辦法把HTML秀到網頁上，就得用這種外掛來處理，不過另一方面又要讓讀者直接看一下HTML顯示出來的效果，一樣的CODE又要切到HTML編輯模式貼一次... 這次就是要省掉這個懶人工夫... 一次到位。來試一下這個功能:

----------------[以下開始]------------------

<H3>這是H3的效果</H3><H3>這是H3的效果</H3><H3>這是H3的效果</H3><H3>這是H3的效果</H3><H3>這是H3的效果</H3>

   1:  <H3>這是H3的效果</H3>

   2:  <H3>這是H3的效果</H3>

   3:  <H3>這是H3的效果</H3>

   4:  <H3>這是H3的效果</H3>

   5:  <H3>這是H3的效果</H3>

----------------[結束]-----------------------

好，展示完畢，沒什麼突破的進展，純粹自己好用而以[H]。我也不曉得有沒有人在用，懶的打包放網站了，需要的人再跟我要...

之前在小熊子朋友 DarkThread 的網頁看到一篇, 可以不用裝 IE7 / Firefox 等就可以有縮放網頁的功能.. 不過有個限制是要在網頁加上一段 html code, 逛的網頁不是自己能改的就頭痛了...

之前這篇講到用 css 可以把所有的網頁縮放大小, 不過縮放比例是寫死在 css 裡的... 看到 DarkThread 的那篇, 就手癢了起來, 試試用 htc + css 的方式, 看看能不能藉著這個技巧把縮放網頁的功能散佈到所有的網站上...

htc (Html Component) 是從 IE5.0 開始的 "新技術", 基本上它的目的就像 asp.net 的 server control, 你可以透過它創造自己的 html tag, 只不過 htc 是 client side 的技術, 而 server control 是 server side 的技術, 用法很像, 技巧完全不一樣...

htc 在 IE5.0 只是很基本的 support, 它是從 css 裡的 behavior 延伸出來的, 因為它是靠 css 的 behavior 把 html element 跟 htc 綁在一起, 因此可以透過 css 直接把功能散佈到整個網站,  就變成它最擅長的地方了, 下次貼一篇把整個網站的右鍵選單停用的例子, 超簡單...

原理大概是這樣, 因為 IE 提供了 user 自訂 css 的功能, 你可以把你自訂的 css 檔套用在所有你的 ie 開啟的網頁, 加上 htc (html component) 可以藉著 css 套用到網頁上, 這次就來試試這兩者的組合...

1. 在 c:\ 放了三個檔案: zoom.htc / zoom.css / zoom.html (點這裡下載)

2. 打開 IE, 工具 -> 網際網路 -> 存取設定 -> 樣式表 -> 指定 c:\zoom.css

3. 開網頁, c:\zoom.html

4. 按住 ALT, 同時點一下滑鼠左鍵, 不錯, 底下跳出 select 來了, 選百分比就可以直接改變網頁放大率...

看起來好像很不錯, html 裡完全跟我自訂的 css / htc 沒關係, 但是效果卻出來了 (y). 不過在早期的 IE 這樣就大功告成了, 現在的 IE 可沒那麼簡單... :'(

接著再打開 google 首頁看看...

Orz, 因為 c:\zoom.htc 跟 http://www.google.com.tw 在兩個不同的 security zone, 而且 domain 也不同, 兩者的 cross talk 被 IE 給檔了下來... ouch... 看來就差這個該死的安全機制... 不然一切就太完美了... 這個限制還沒有找到很簡單的解法, 有點子的人就提供一下吧... :'(

先講在前面, 我是很不喜歡這種無聊的網站... 擋右鍵幹嘛? 也許站長真的覺的他的內容很了不起大家都想偷... 不過右鍵按下去一堆功能, 又不是每個人點右鍵都是要偷內容... 被當小偷看待的感覺真的挺不爽.. 真的要看, fillder 開下去什麼都看的到..

好, 牢騷發完了 (H), 今天不是要講這個.. 因為工作的關係, 開發的系統是處理企業內部的 web content, 免不了有這種檔右鍵的需求, 這種 code 大家或多或少都寫過, 不過都寫的很煩吧...

"什麼!!! 每一頁都要檔?"

"每一頁都加 code 要加到什麼時後..."

接到這種需求大概都想扁人吧, 咳咳... 我就是因為懶所以想到一招省事的... 先來看一下這個網頁, 看看大家追不追的到右鍵是怎麼擋的...

test html page (full source)

看出來為什麼右鍵被停用了嗎? 沒有 script tag, 也沒有 include 啥鬼東西, 開這個 page 的 link 也沒動啥手腳... 開 page 時 ie 也沒要求下載啥奇怪的軟體...

不過, 右鍵的確是被 disable 了, 秘密就在這段 css ..

body { behavior:url('context-menu-blocker.htc'); }

這是 M$ 在 IE5 之後就引進的 DHTML Behaviors. CSS 是為了樣式而設計出來的, 目的就是希望一組網頁只要有共通的樣式, 就不用每一頁去調字型顏色等等... 只要透過 CSS 就可以把整個網站的每一頁, 在特定 tag 套用特定的樣式...

"只能套用外觀嗎? 如果程式也可以這樣撒出去就好了"

沒錯, behavior 就是這個目的, 把你想怎樣 "改造" 這個 tag 的 script 寫在 .htc 裡, 再用 css 把它綁到 tag 上, 一切就完成了.

這個例子的 htc 只有去攔捷 oncontextmenu 事件, 攔下來後只有做取消事件的動作而以. 藉著 css 就可以把這功能套用到 page 上了... 當然, 你的網站有 css 的話, 這個功能馬上就套用到你所有的網頁了.

這些技巧果然說穿了就不值錢... 咳咳, 不過 HTC 還有很多其它更讚的應用, 因為它很精巧的把 code 跟 tag binding 處理的很好, 很可惜這技術好像不大登的上抬面, 用過的人似乎不多, IE5.0 推出後, IE5.5 對 htc 有些改進, 之後就沒有啥新的進展了..

不知道 IE7 對 htc 有啥改進? 有空再來試試了 :D

繼上次 CSS 可以放大縮小網頁的文章後, 這次再來一篇, 就是如何用一樣的方式去掉討人厭的廣告...

我最討厭的廣告就是那種會上下跑的, 或是直接跳出來 (不是 popup window) 檔在網頁正中央的.. 碰到這種網頁, 也是可以用 CSS 來對付它啦!

本來 http://www.yahoo.com.tw, http://www.pchome.com.tw 都有這種廣告, 不過突然不見了 :@, 只好換 UDN.com 來示範.

原理很簡單, 只要能找到廣告的那個 DIV element 的 ID 就好了. 接下來就可以在 CSS, 先用 selector 挑到指定的 element, 再把這個 element 的 display 樣式設定為 none 就大功告成了!

以 http://www.udn.com 為例, 右邊跟著跑的小廣告, 它的 HTML code 為:

<SPAN id=logo style="LEFT: 870px; WIDTH: 90px; POSITION: absolute; TOP: 1195px; HEIGHT: 160px"><A href="http://ad4.udn.com/RealMedia/ads/click_nx.ads/udn.com/watermark-top@Top" target=_blank><IMG alt=CLICK src="http://ad4.udn.com/RealMedia/ads/adstream_nx.ads/udn.com/watermark-top@Top" border=0></A></SPAN>

因此, 要用 bookmark 的方式除掉這個廣告就太簡單了, 只要把下面的 link 放在我的最愛, 逛到這個網頁後再點這個 link 就可以.

javascript:document.all.logo.style.display="none";void(0);

如果想要跟上篇一樣直接寫在 CSS file 裡, 不要每次逛網頁再點 link, 就可以把這段 css 內容寫到檔案:

#logo {display:none;}

哇哈哈, 真過癮, 一點下去廣告就不見了... 旁邊那條直的 flash 也一起拿掉好了... link 改成:

javascript:document.all.logo.style.display="none";document.all.banner.style.display="none";void(0);

用 CSS 方式的話, 只要加入這兩行:

#logo {display:none;}
#banner {display:none;}

就這樣簡單而以, 不要懷疑.. 其實 CSS 還有很多有趣的應用, 想到再貼上來

平時工作時, 常上 MSDN 查資料, 無意間剛好看到一個很有趣的 CSS Attribute: ZOOM

一般網頁都只能針對字體, 或是圖片等分別指定大小, 但是當你想把某個區塊整個一起放大或縮小, 就不是那麼簡單. 這個 CSS 正好可以解決這個問題. 只要在任何 html element 加上這個 style 就可以達成目的. 如: