2008年12月26日

seekAttention - 注目させたい部分を強調させるスクリプト

このブログでは、拡大画像をポップアップして目立たせるlightbox2というスクリプトを使っています。

これはこれで見た目もいいし目立たせるのに便利なのですが、
画像以外でも、

・入力フォーム内での未入力のテキストボックスを目立たせたい
・規約等どうしても読んで欲しい文章を目立たせたい

といったこともありますよね。

そんな時に使えそうなスクリプトを紹介します。




seekAttentionというスクリプトです。

実践ページはこちらになります。
【jQuery】ページ内で注目させたい部分を強調するスクリプトを試してみた

前回同様jQueryを利用したスクリプトです。

簡単に説明しますと、あらかじめ強調させたい部分にidを付けておき何かアクションを起こした際にある条件に合致したら強調させたいidを呼んで強調させる(id以外の部分を暗転させるイメージ)という感じです。



sa_t.gif



1.利用できるオプションの一覧

このスクリプトでは以下のオプションを指定する事が出来ます。

【container】
コンテナ名で囲まれた部分を強調します。
例:
コンテナ部分を強調

【color】
非強調部の色を変更する事が出来ます。
例:
非強調部分の色を変える

【opacity】
非強調部の暗転の濃さを設定できます。
例:
$('#elem').seekAttention({
opacity: 0.4
});

【fade】
フェードイン・アウトの有無を設定できます。
例:
$('#elem').seekAttention({
fade: false
});

【fadeSpeed】
フェードイン・アウトの速度を設定できます。
例:
$('#elem').seekAttention({
fadeSpeed: 800
});

【hideOnClick】
強調後、画面クリックでは強調解除しないように設定できます。
例:
$('#elem').seekAttention({
hideOnClick: false
});

【hideOnHover】
強調後、強調部へのオンマウスでは強調解除しないように設定できます。
例:
$('#elem').seekAttention({
hideOnHover: false
});

【pulse】
強調部の点滅の有無を設定できます。
例:
コンテナ部分を強調(点滅無し)

【blur】
非強調部の暗転時にぼかすかぼかさないかの設定ができます。
例:
$('#elem').seekAttention({
blur: false
});

【pulseSpeed】
強調部の点滅速度を変更できます。
例:
点滅のスピードを変える

【paddingTop】
【paddingRight】
【paddingBottom】
【paddingLeft】

強調部のpaddingを設定できます。
例:
リンクを強調


2.jQueryのダウンロード&設置

jQueryのjsファイルはこちらからダウンロード。
ダウンロードしたファイルは任意のディレクトリへアップロードしてください。


3.seekAttention.jquery.jsのダウンロード&設置

seekAttention.jquery.jsはこちらからダウンロード。
jQuery同様、ダウンロードしたファイルは任意のディレクトリへアップロードしてください。


4.効果を設置する

テキストボックスならinputタグの中、コンテナならdivの中、といった部分にid="hoge"を記述し、ボタン押下などのアクション時にそのidに対してseekAttentionを通してあげるという具合です。
基本は
$('#hoge').seekAttention()
でオプションを利用する場合のみ括弧内に
{オプション名: 値}
としてやります。


5.最後に

今回のスクリプトは実際の入力フォーム作成時に利用させていただきました^^
未入力テキストフィールドや未選択チェックボックスなどが一目瞭然なのでかなり使えると思います。

ただ、prototypeとjQueryを同時に使う際には、prototype、jQueryのどちらでも使われる
$('id名')
の動作がそれぞれ違う解釈になるようなのでそのまま使うとまともに動いてくれません。

jQuery と prototype.js を同時に使う。($(); のコンフリクト回避)

こちらを参考にしてjQuery側の$()をj$()等に置き換えて利用してください。

何かしら参考になりましたらクリックをよろしくお願いします
にほんブログ村 IT技術ブログへ   人気ブログランキング    
この記事へのコメント
トモヒロさんの記事で拡大画像をポップアップしてるのを見て、いいなぁ〜。
なんて思ってました^^
勉強になります♪
Posted by 愛美 at 2008年12月26日

こんばんは、トモヒロさん。^^

技術的な事は難しくて・・・
勉強しても分かるようになるとは
思えません・・・<(*_ _)>

しかしいつまでもこれではダメですね。
く( ̄△ ̄)ノガンバレェェェ!!私。(笑)
Posted by 朱夏 at 2008年12月26日
>> 愛美さん
lightbox2、愛美さんも導入してみてはいかがですか^^
IEでは少し動きがぎこちないですがFirefoxではすごく滑らかに動きます。

>> 朱夏さん
こんばんは^^
ウェブの技術については好奇心で試しているので勉強しているという感覚は全くないですよ。
思い通りに動くのが楽しくて色々試したくなってしまいます。


Posted by トモヒロ at 2008年12月27日
こんばんは
いい感じの拡大方法ですね。
これなら、記事も長くならず
スッキリしていいなと
思います。
Posted by 葵 at 2008年12月27日
トモヒロ様の記事を読んで
いつも自分のサイトに応用したいと
あこがれ続けて数ヶ月…

挫折しまくり!
最近はただただ感心するばかりのミミオでございます。

今回のは、ユーザビリティの向上にいいですよね!年末年始休暇に挑戦してみます。
Posted by ミミオ at 2008年12月28日
>> 葵さん
そうですね。
余計な注意書きも必要なくなるかもしれません^^

>> ミミオさん
文字ではなく視覚的に注意を促すというのはビジュアル的にもありかなと思います。
ぜひ試してみてください^^
Posted by トモヒロ at 2008年12月28日
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/111735729

この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。