パンチカード(ソーシャルブックマーク版)

説明補足説明コード分割コード関連書籍コメント投稿

このサンプルは、jQueryのpunchcard()プラグインを利用してソーシャルブックマークのリンクをパンチカードのレイアウトでを表示します。マウスをパンチカードのホールに移動するとソーシャルブックマークサイトのツールチップが表示されます。ホールをクリックするとソーシャルブックマークのサイトが新規ウィンドウに表示されます。このプラグインは少ない表示領域に沢山のリンクを表示するときに便利です。 ソーシャルブックマークに登録するとパンチカードのホールの色が変わります。 つまり、すでにソーシャルブックマークに登録したどうかが分かります。

このサンプルは、jQueryのpunchcard()プラグインを利用してソーシャルブックマークのリンクをパンチカードのレイアウトでを表示します。マウスをパンチカードのホールに移動するとソーシャルブックマークサイトのツールチップが表示されます。ホールをクリックするとソーシャルブックマークのサイトが新規ウィンドウに表示されます。このプラグインは少ない表示領域に沢山のリンクを表示するときに便利です。 ソーシャルブックマークに登録するとパンチカードのホールの色が変わります。 つまり、すでにソーシャルブックマークに登録したどうかが分かります。

パンチカードに表示するソーシャルブックマークのサイトをカスタマイズするには、punchcard-1.3.jsファイルを編集してください。

※punchcard()のプラグインを利用するときは、jquery-1.1.2.jsを使用してください。 

PunchCard = {
 icons: ""     //path of the icons
 , styles: "" //path of the stylesheets
 , holes : [  //array of definitions
 { title: "Backflip", img: "backflip"        
 , url: "http://www.backflip.com/add_page_pop.ihtml?url=|URL|&title=|TITLE|" 
 }