HTML5 標籤雲 - TagCloud
中文環境裡的搜尋結果幾乎是標籤雲分析器. 以前已介紹過這個 標籤雲分析器. 擴大搜尋找到的HTML5 TagCloud只支援WordPress或是付費插件; 雖然有權重分析的標籤雲看起來很專業.
我應該以Html5的思維來找, 猜想會不會是採用 "Canvas" 當作關鍵字? 果然找到了! Graham Breach 寫了以jQuery技術支援的 HTML5 Canvas TagCloud .
這位大方的好心人分享了他的設計.
雖然HTML5尚在醞釀中, 你可能會擔心換掉了Flash的標籤雲, TagCanvas會不會因為HTML5的發展變化而忽然失效?! 其實 "canvas" 這個元素已經是定案, 不會有問題. 雖然它是基於WebKit開發出來的, 在Firefox跟Opera運行一樣順暢.
比較有問題的是IE9以下的版本．．． 作者有找到相容的修正碼, 加載到CSS裡即可. 不過我看在IE7效果不好. (幸好, 2012-7月統計,全球IE7市占率僅1.9%. 台灣約4%, 台灣的IE用戶加油,好嗎?)
ㄟ．．介紹至此, 很想結束收工. Canvas TagCloud網站裡已經詳述.
如果你看完裝設的方法, 就能了解使用的程式碼都是一樣的. 但區分了支援IE9以下版本的語法, 跟IE9以下用戶不管他死活的語法.
(沒有啦~ 有附加提示的區塊給不支援的網路客
)使用HTML5技術有個好處, 對於不支援的瀏覽器, 它可以自動被省略(非法文檔的處理默契). 頂多那個位置變成空位, 就像是沒有裝設Flash Player的系統, 會看到元件提示圖. 現在的瀏覽器都能更新版本, 大多數的網路用戶可以呈現出效果.我只示範其中一種jQuery的語法, 在Blogger加裝HTML5標籤雲的方法. 因為你只需要載入一支jQuery程式庫就可以支援周遭衍生的眾多UI及各種插件.
♦ Step 1. 先確認你的部落格裡有沒有使用 jQuery ?
通常jquery.min.js被置入CSS的 <head> 與 </head> 之間, 如下：
<head> ．．．．． <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
Blogger好用之處就是你不一定要將jquery放在<head>裡面, javascript另外放在<body>裡面. 你可以全部裝進Html/Javascript模組裡. * 已經有使用jquery.min.js就不必重複申裝.
♦ Step 2. 在 HTML5 Canvas TagCloud 下載 " jquery.tagcanvas.min.js" , "excanvas.js" 這兩個檔案. excanvas.js 是讓IE9以下版本可以使用標籤雲, 你的讀者不會使用這麼舊的IE版本可省略. 將這兩個檔案上傳至網路空間取得有效網址. 推薦空間：Dropbox申裝方法.
♦ Step 3. 將以下語法貼入Html/Javascript模組裡.
<!--[if lt IE 9]><script src="excanvas.js網址"></script><![endif]--> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="jquery.tagcanvas.min.js網址"></script> <script> $(document).ready(function() { if(!$('#myCanvas').tagcanvas({ textColour: '#ff0000', outlineColour: '#ff00ff', reverse: true, depth: 0.8, maxSpeed: 0.05 },'tags')) { $('#myCanvasContainer').hide(); } }); </script> <div id="myCanvasContainer"> <canvas width="300" height="300" id="myCanvas"> <p>當瀏覽器不支援時的提示語</p> </canvas> </div> <div id="tags"> <ul> <li><a href="http://xxx.blogspot.com/search/label/第1個標籤">第1個標籤</a></li> <li><a href="http://xxx.blogspot.com/search/label/第2個標籤" target="_blank">第2個標籤</a></li> <li><a href="http://xxx.blogspot.com/search/label/第3個標籤"><img src="圖示網址"/></a></li> ．．．．． </ul> </div>
❶ 原本有使用 jquery.min.js 不必重複.
❷ 顏色相同的ID屬性配對, 命名時一定要相同.
❸ 當瀏覽器不支援時的提示語, 在可支援的瀏覽器上是被隱藏的. 你可以編輯圖示, 轉接連結等等html語法, 甚至可以將原有的flash標籤雲內嵌進去.
❹ 第1個標籤示範是基本連結. 第2個標籤示範是另開新視窗. 第3個標籤示範是以圖示取代連結的語法.
❺ textColour 是標籤文字色碼.
❻ outlineColour 是框取線的色碼.
❼ textFont 指定字型.
❽ 你也可以將 href="連結" 指向任何網址或影音網址.
他的網站裡還有很多參數可使用. 例如換成垂直捲動或是水平捲動. 不同標籤群使用不同顏色, 字型等效果. 而且你還能同時使用多個標籤雲. 最方便的是：使用中文標籤不需要考慮內嵌字型的問題. 雖然不像Flash標籤雲可以自動抓取data裡的labels, 但是增加新標籤連結是很簡單的事.
嗯, 我應該沒有漏掉重要的情報吧! 對了, 滑鼠滾輪可控制縮放. * 如果你採用他所分享的源碼, 好歹在他的網站上推薦+1或按讚, 這才是優質網路客.
範例：
