2011年7月アーカイブ

ランキング、得点表、価格表、一覧表、、、
表形式に並べられる情報はさまざま有りますが、
数値で表される属性が複数ある場合、
各属性別に表を作りなおすのは得策ではありません。
ならば知りたい属性ごとにユーザーが並べ替えられるようにするのが得策です。

使用サンプル　→　並べ替え

参考サイト　→　tablesorter

css3で新たに出来るようになったことをWEBで検索すると、
これまでは画像を使って処理するしかなかった角丸表現が
css3のプロパティを使うだけで出来るようになったというコラムが氾濫しています。
確かにcss3には、使用出来るプロパティがいくつも追加されたため、
プロパティのみで角丸を実現できるようになったのは事実です。
しかし、css3はブラウザ最大手のIE8には対応しておらず、
Firefox、Safari、Chromeなどのユーザー向けにしか作れない現実もあります。
しかし、jQueryを使えば、IE8だけでなく、IE6やIE7にも適用できます。
jQuery.cornerプラグインは、角丸だけでなく、
プロパティを変えるだけで、各種デザインを実現できるすぐれものです。

使用サンプル　→　cornerプラグイン

参考サイト　→　corner

たくさんの写真をWEBに載せたいとき、カルーセルパネルを使って
写真を一枚ずつ省スペースにスライドショーさせる方法がかなり普及してきました。
写真を切り替えるとき、フェードや横スライドの方法をよく見かけますが、
ばらばらなパーツが組み上がって、大きな画像になる効果は他に例がありません。

使用サンプル　→　イメージギャラリー

参考サイト　⇒　Merging Image Boxes

CSSだけでツールチップを作るもうひとつのプラグインです。
qtipの場合、同一ページ内のツールチップのデザインは統一で、
同一ページ内で複数のカラーバリエーションを作ることはできませんでした。
今回のプラグインはClass名にスタイルを指定するため、
同一ページ内でツールチップのデザインを使い分けることが出来ます。

使用サンプル　→　ツールチップ

参考サイト　→　Colortip

言葉をクリックすると、詳細な説明のページへリンクしていることはよく見かけますが、
ツールチップにしてしまえば、クリックしなくてもマウスをかざすだけで表示されます。
このプラグインは、指定されたid属性のなかでリンクを張って、
title属性を入れておくだけでツールチップを作れます。
引数で指定するだけで6種類のカラーバリエーションを使えます。

1. cream
2. light
3. dark
4. red
5. green
6. blue

参考サイト　→　qtip