jQuery UI を利用したタブ切り替え機能

当ブログ2008年3月8日のアーティクル 外部jQueryテスト に続きAll Aboutは高橋登史朗氏による「Ajaxを使おう」にての記事は jQuery UI タブ を参考にさせていただきました。
近年はYahoo!やiGoogle、Livedoor、goo抔、 各ポータルにより挙って採用されているとなれば、 其のインターフェースの有効性抔、 実証済みとも云えるタブ切り替え機能です。

jQuery UI の概要については一つ前2007年12月18日の記事 jQuery UI アコーディオン より引用させていただけば
jQueryでは、誰もが作れるプラグインの他に、タブやカレンダー、ドラッグやドロップなどある程度まとまったwidgetsやツールがjQuery UIとしてまとめられています。プラグインとの大きな違いは、ネームスペースがプラグインのjQuery.fnではなくjQuery.uiで記述されていることですが、使い方はほぼ変わりません。
とあり、jQueryに於いてはデフォルトではありませんが、 プラグインよりは一段とデフォルトに近い形の実装であるようで、 他機能とのコンフリクトも多少安全性が高いのではないかと思われます。

jQuery UI タブ サンプル でもいくつかサンプルが実装されており、 .tabs({・・・}) に与えるパラメータによりタブの切り替えの視覚効果が変化するのですが、 今回当アーティクルでは .tabs({ fx: { height: 'toggle', opacity: 'toggle' } }) としてみました。
[続きを読む]をクリックするとサンプルをご覧いただけますが、 ブラウザによってはうまく動作しない場合もあるようです。
投稿日:
カテゴリー: jQuery

jQuery カラーピッカー プラグイン

下記カラーピッカーについては説明するよりも、 実際に使用いただいた方が素晴らしさを実感していただけるのではないかと思い、 作者 Steven Wittens さんがGPLで公開されていましたので 当ブログに実装してみました。
当ブログの他機能と衝突してトップページではうまく動作しないため、 追記部分に表示させるようにしています。 「続きを読む」をクリックしてみてください。
またFirefoxでもチャートがうまく表示されないようです。

以前3月15日のアーティクルでも「 背景色と文字色を投稿前に確認 」をご紹介しましたけれど、ブログ記事を投稿する際、 文字や背景の色選定に悩まれている方は多いのではないか、と云うより、 誰より私がHTMLエディターを態々色確認の為だけに立ち上げたりするものですから、 ブログのことならブログに任せろと許り具具ってみれば、 jQueryのプラグインで作成された当スクリプトを見つけたのです。
サイト Acko.net には、ダウンロードファイルは勿論、 プロパティ抔、実装上の更に詳しい説明がありますので、 興味のある方はご利用されてみては如何でしょうか。
投稿日:
カテゴリー: jQuery

映画風タイトルズームアップ

ブログ環境設定でトップに20記事表示することにしているので、 タイトルの拡大機能を含んだ記事が次ページへ移動してしまい、 このままではトップ頁を閲覧者の方に開いていただいてもタイトル表示に変化がなくなってしまうと云うことで、 当機能が消えてしまうと少し未だ淋しいのでこの記事をエントリーします。

このアーティクルが存在する間はブログタイトルがトップ頁表示と同時に大きくなり始める筈です。
スピードも以前の3割増しにして躍動感を出してみました。

タイトルもタイトル表示が段々とクローズアップしていくのだから、 映画風タイトルズームアップに変更しました。 次のページへをクリックして頁遷移しても以前の記事 映画風タイトル・クローズアップ がありますからタイトル拡大機能は失われることはありません。

加えて、トップページから消え去ることを好いことに、もとの記事 映画風タイトル・クローズアップ では、アクセスするとタイトル文字と色が変わることにしました。 アーティクル 外部jQueryテスト での別機能の応用です。 こちらのスピードは以前の7割増しですので、よりダイナミックになっています。

---2008/4/22追記--- 当記事が2008年4月2に 映画風タイトル・クローズアップ をトップページから追い出したと同様、 ブログタイトルズームアップ によりトップページから追い出された為、 トップページのタイトル拡大機能は追い出した張本人に譲り、 当記事では、アクセスするとタイトル文字と色が変わることにしました。 2008年3月8日記事、 外部jQueryテスト での別機能の応用です。

映画風タイトル・クローズアップ

一つ前のアーティクル「外部jQueryテスト」をH1タグにアニメーション適用しました。
このアーティクルが存在する間はブログタイトルが表示と同時に大きくなり始める筈です。
ブラウザがファイアーフォックスかオペラだと上手く動いたのですが、 IE6だと最初、何故か拡大の拡大から設定した拡大値へ縮小してしまう感じになりました。 これはCSSテンプレートで
.blogtitle{font-size:150%;}
と指定してある部分が影響してしまったようです。
上記部分を削除して、尚且つアーティクル内でフォントサイズを小さなものに指定するとIEでもアーティクルのタイトルに偽り無く済むようです。
いつも乍マイクロソフトの唯我独尊には泣かされます。
IE8のベータ版は2008年前半に登場、標準準拠と互換性確保に注力」というニュースも穿って見てしまい勝ちになります。

参照サイト:高橋登史朗さん:jQueryの魔法

---2008/4/2追記--- 当記事がトップページからはみ出したため、 トップページのタイトル拡大機能は20箇遅れの記事 映画風タイトルズームアップ に譲り、当記事では、アクセスするとタイトル文字と色が変わることにしました。 前記事、 外部jQueryテスト での別機能の応用です。 こちらのスピードは以前の7割増しですので、よりダイナミックになっています。

外部jQueryテスト

DIVでtestClassです
DIVでtestClassです
DIVでtestClassです
DIVでnoTestClassです

PでtestClassです

ネタ元は高橋登史朗さんの「jQueryの魔法」です。
ブログ内にjQueryソースを置けないので外部においたソースを読み込めるか確かめました。
実際に駆動されるのでソース自体を外部ドメインにおくことによる支障は無いようです。
IEだと枠に収まり切らない大きさから段々枠の中に納まるように文字が縮小されるように表示されるかもしれませんが、本来の動きは普通の大きさの文字が段々大きくなるように想定しています。ファイアーフォックス、オペラでは想定通り表示されますが、一部IEは他部分でのフォント設定を拾ってしますようです。jQueryの試験運用自体には問題無い為、放置しました。
投稿日:
カテゴリー: jQuery