水平ドロップダウン型メニューの表示

水平方向のドロップダウン型メニュー表示が出来るプラグインを試してみました。

サンプルコード＆ダウンロードは以下から。
jdMenu公式ページ

使用するファイルは
・jquery.jdMenu.css
・jquery.bgiframe.js
・jquery.dimensions.js
・jquery.jdMenu.js
・jquery.positionBy.js
以上の5つです。


使い方

---

jQuery本体とjdMenu一式を組み込む
<link rel="stylesheet" href="jquery.jdMenu.css" type="text/css"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script> <script type="text/javascript" src="jquery.bgiframe.js"></script> <script type="text/javascript" src="jquery.dimensions.js"></script> <script type="text/javascript" src="jquery.jdMenu.js"></script> <script type="text/javascript" src="jquery.positionBy.js"></script>

後はHTML部分でul/liを使ってメニューを作るだけです。
最上位のul要素には[class="jd_menu"]を記述します。
<ul class="jd_menu"> <li><a href="">Home</a></li> <li><a href="#">検索エンジン »</a> <ul> <li><a href="http://www.google.co.jp" target="_blank">Google</a></li> <li><a href="http://www.yahoo.co.jp" target="_blank">Yahoo!</a></li> <li><a href="http://jp.msn.com/" target="_blank">MSN</a></li> </ul> </li> <li><a href="#">Google »</a> <ul> <li><a href="#">検索項目 »</a> <ul> <li><a href="http://www.google.co.jp" target="_blank">Google 検索</a></li> <li><a href="http://images.google.com" target="_blank">Google 画像検索</a></li> </ul> </li> <li><a href="http://maps.google.co.jp" target="_blank">Google マップ</a></li> <li><a href="http://mail.google.com" target="_blank">Gmail</a></li> </ul> </li> </ul>

サンプルはこちら
簡単にドロップダウンメニューが作れて便利です。

おわり。

validateでフォーム入力チェック

簡単にフォームの入力チェックができるjquery.validate.jsプラグインです。

コードのダウンロードは下記サイトから。

bassistance.de » jQuery plugin: Validation

使うファイルは
・jquery.validate.min.js
・messages_ja.js
の2つ。


使い方

---

jQueryとダウンロードしたjquery.validateを組み込む
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script> <script type="text/javascript" src="jquery.validate.min.js"></script> <script type="text/javascript" src="messages_ja.js"></script>

HTML部分はこんな風に <form id="form"> 名前： <input id="name" name="name" size="25" class="required" minlength="4"><br> ニックネーム： <input id="Nname" name="Nname" size="25" class="required" rangelength="5 10"><br> URL： <input type="text" id="url" name="url" size="25" class="url"><br> E-Mail： <input id="email" name="email" size="25" class="required email"><br> <input type="submit" class="submit" id="form-host-submit" value="登録"> </form>

必須項目にはclass="required"
URLとして入力させたいならclass="url"
E-Mailとし入力させたいならclass="email"
E-Mailで必須入力ならclass="required email"
という風に記述するだけです。

また、minlenght="4"で最小値設定
rangelength="5 10"で入力文字数設定など、細かい設定もできます。

で、スクリプト部分でIDを指定。 <script type="text/javascript"> $(document).ready(function(){ $("#form").validate(); }); </script>

簡単に入力チェックが出来て便利です。
サンプルはこんな感じ

おわり。

モーダルダイアログの表示

モーダルダイアログを表示するjqModalを使ってみました。
ソースコードのダウンロードはこちら

使い方

---

まずはjQueryとjqModalを組み込む
<link rel="stylesheet" href="jquery.powertip.css" type="text/css"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script> <script src="jqModal.js" type="text/javascript"></script>

JavaScriptの記述 <script type="text/javascript"> $().ready(function() { $('#dialog').jqm(); }); </script>

HTML部分の記述 <a href="#" class="jqModal">ダイアログ</a> <div class="jqmWindow" id="dialog"> <a href="#" class="jqmClose">Close</a> <hr> <em>使い方</em> --> 左上のCloseをクリックすると、ダイアログを閉じます。 </div>


「ダイアログ」のリンクをクリックすると、id属性が"dialog"のdiv要素の内容がモーダルダイアログで表示されます。

サンプルはこちら

おわり。

PowerTipでツールチップを実装

簡単にツールチップを実装できるらしいPowerTipを使ってみました。
オプションでいろいろ弄れるようなので、自分好みのものを作れるみたいです。

ソースのダウンロードはこちら。

使い方

---

まずはjQueryと上記サイトからダウンロードしたPowerTipのjsとcssを読み込む。 <link rel="stylesheet" href="jquery.powertip.css" type="text/css"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script> <script type="text/javascript" src="jquery.powertip.js"></script>

JavaScriptの記述 <script type="text/javascript"> $(function() { $('#north').powerTip({placement: 'n'}); $('#south').powerTip({placement: 's'}); $('#west').powerTip({placement: 'w'}); $('#east').powerTip({placement: 'e'}); $('#north-west').powerTip({placement: 'nw'}); $('#north-east').powerTip({placement: 'ne'}); $('#south-west').powerTip({placement: 'sw'}); $('#south-east').powerTip({placement: 'se'}); $('#input').powerTip({placement: 'e'}); }); </script>

HTML部分はこんな感じ。titleにツールチップで表示させるテキストを記述します。 <div id="north" class="btn" title="サンプルメッセージ（北）">north</div> <div id="south" class="btn" title="サンプルメッセージ（南）">south</div> <div id="west" class="btn" title="サンプルメッセージ（西）">west</div> <div id="east" class="btn" title="サンプルメッセージ（東）">east</div> <div id="north-west" class="btn" title="サンプルメッセージ（北西）">north-west</div> <div id="north-east" class="btn" title="サンプルメッセージ（北東）">north-east</div> <div id="south-west" class="btn" title="サンプルメッセージ（南西）">south-west</div> <div id="south-east" class="btn" title="サンプルメッセージ（南東）">south-east</div>

こんな感じになります→サンプル

最初のほうで触れたオプションを設定する場合は以下のような感じ。 $('#north').powerTip({ placement: 'n', // ツールチップの位置を指定（方角で指定） followMouse: false, // マウス追従の有無 mouseOnToPopup: false, // ツールチップにポインタを合わせても消えない offset: 10, // 表示させるツールチップの距離（要素からの距離） fadeInTime: 200, // フェードイン速度 fadeOutTime: 100 // フェードアウト速度 });

そのままでも十分使えますが、いろいろ弄ってみるのも面白いかもしれません。

おわり。

アコーディオン式スライダー

ウェブサイトによくあるアコーディオン型のスライダーを使ってみる。
ソース配布先はこちら。Click here to download the source code.からダウンロード出来ます。
サイト内のダウンロードリンクはこちら。

基本的にはダウンロードしたaccordion.zipを解凍した中にあるindex.htmlと同じように組み込んでいけば同じように使えます。

<head>にjsファイルとcssファイルの呼び出しを記述
<link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="script.js"></script>

<body>部分にdiv,dl,dt,ddでリスト作成
<div id="accordion"> <dl id="slider" class="accordion"> <dt>List1</dt> <dd>List1です。</dd> <dt>List2</dt> <dd>List2です。</dd> <dt>List3</dt> <dd>List3です。</dd> </dl> </div>


最後にJavascriptの記述を。
記述の仕方でページを開いた時にリストを閉じておくか、どれかを開いた状態で表示するかを変更できます。

すべて閉じる場合
<script type="text/javascript"> var slider1 = new accordion.slider("slider1"); slider1.init("slider"); </script>

どれかを開いておく場合
<script type="text/javascript"> var slider1 = new accordion.slider("slider1"); slider1.init("slider",0); </script>

slider1.initの第2引数にどこを開いておくかを記述します。
0だと1番目、1だと2番目を開く、といった感じ。
サンプルはこちら
cssを編集すればいろいろアレンジ出来そう？

おわり。