エフェクトの豊富なタブパネルを実装する（フェード切り替えなど）【jQuery連載05】 | HTML5でサイトをつくろう

今回は、ベーシックでよく見るタブパネルの実装を行ってみます。切替時のアニメーションやマウスクリックやロールオーバーなどでの切り替えなどいくつかのバリエーションも作成してみました。また汎用性を考えてjQueryプラグインとして作成してみました。 少ないスペースを利用して多くの情報を掲載する際によく使われるタブパネルは、更新情報などでカテゴリー毎に掲載したり、複数の商品の紹介などに使うことができます。 今回作成したサンプル サンプル1ではタブパネルの幅をテキストの量によって変わるものと幅を固定して一定のサイズにするサンプルを作り、サンプル2では切り替えをクリックとマウスオーバーによって切り替わるパターンと内容部分をフェオードアニメーションにしました。 【サンプル1】 タブパネルの幅をテキストのサイズによってと一定に固定させるサンプル 【サンプル2】 クリックやマウスオーバーでの切り替えやフェー

[JHashimoto]

“切替時のアニメーションやマウスクリックやロールオーバーなどでの切り替えなどいくつかのバリエーションも作成してみました。また汎用性を考えてjQueryプラグインとして作成してみました。”