テキストエリアでTabの有効化

テキストエリアでTabの入力を有効にする。
script書いてID指定するだけで出来るみたい。


フォルダツリー表示の時にも使った、interface.jsを使用します。

使い方

---

jQueryとファイルの組込み
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script> <script src="interface.js" type="text/javascript"></script>

scriptの記述
<script type="text/javascript"> $(function() { // 適用するテキストエリアのid指定 $("#tabEnable").EnableTabs(); }); </script>

htmlの記述
<!-- 適用するテキストエリアにid属性をつけておく --> <textarea id="tabEnable" cols="50" rows="5">Tabキー入力有効です。</textarea>

サンプルはこちら

おわり。

連動プルダウンを選択した状態で表示

ページ遷移時に、連動プルダウンを選択された状態で表示する。
前回の連動プルダウンの応用。


こちらのサイトのコメント欄を参考にさせていただきました。

前回使ったConnectedSelect.jsにスクリプトを追加するだけ。


使い方

---

以下のようにConnectedSelect.jsにスクリプトを追加します。

4行目あたり
var obj = document.getElementById(selIdList[i]); obj.ConnectedSelectDefault = obj.options[obj.selectedIndex].value; if(i){

関数を追加
function ConnectedSelectDefault(selIdList){ for(var i=0;selIdList[i];i++) { if(i){ var obj = document.getElementById(selIdList[i]); obj.disabled = true; var oSel = document.getElementById(selIdList[i-1]) var oVal = oSel.ConnectedSelectDefault; for(var OG=obj.ConnectedSelect.node.firstChild;OG;OG=OG.nextSibling) { if(OG.label != oVal) { continue; } for(var OP=OG.firstChild;OP;OP=OP.nextSibling) obj.appendChild(OP.cloneNode(true)); obj.disabled = false; break; } } } }


プルダウン初期化前に追加した関数を呼び出す
<script type="text/javascript"> ConnectedSelect(['SEL1','SEL2','SEL3']); ConnectedSelectDefault(['SEL1','SEL2','SEL3']); </script>


おわり。

連動プルダウン

システムで連動プルダウンを使いたくなって、色々調べたので覚え書きを。

親カテゴリを選ぶと、対応した子カテゴリを表示し、さらに子カテゴリを選ぶと孫カテゴリが・・・
という風なプルダウン。

連動プルダウンのJavaScriptはいろいろあるようですが、個人的に使いやすそうなConnectedSelect.jsを使用します。

こちらのサイトを参考にさせていただきました。


使い方

---

jQueryとファイルの組込み


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script> <script type="text/javascript" src="ConnectedSelect.js"></script>

プルダウンメニューを作成 親カテゴリ<select id="SEL1"> <option value="">---</option> <option value="fruits">果物</option> <option value="vegetable">野菜</option> </select> 子カテゴリ<select id="SEL2"> <option value="">---</option> <optgroup label="fruits"> <option value="apple">りんご</option> <option value="melon">メロン</option> </optgroup> <optgroup label="vegetable"> <option value="tomato">トマト</option> <option value="cabbage">キャベツ</option> </optgroup> </select> 孫カテゴリ<select id="SEL3"> <option value="">---</option> <optgroup label="apple"> <option value="orin">王林</option> <option value="fuji">ふじ</option> <option value="kogyoku">紅玉</option> </optgroup> <optgroup label="melon"> <option value="andes">アンデスメロン</option> <option value="yubari">夕張メロン</option> <option value="musk">マスクメロン</option> </optgroup> <optgroup label="tomato"> <option value="momotaro">桃太郎</option> <option value="first">ファースト</option> <option value="furutica">フルティカ</option> </optgroup> <optgroup label="cabbage"> <option value="murasaki">ムラサキキャベツ</option> <option value="saboi">サボイキャベツ</option> <option value="ha">ハキャベツ</option> </optgroup> </select>
親カテゴリのoption valueと、子カテゴリのoptgroupのlabelを対応させておきます。

連動プルダウン初期化 <script type="text/javascript"> ConnectedSelect(['SEL1','SEL2','SEL3']); </script>

サンプルはこちら
valueとlabelを対応させるだけなので、DBとの連携も楽ですねー

おわり。

フォルダツリーの表示

フォルダツリーの表示をやってみた。

使用するファイルは3つです。
・interface.js
・treeview.js
・style.css


使い方

---

最初にjQueryとファイルの組込み <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script> <script src="interface.js" type="text/javascript"></script> <script src="treeview.js" type="text/javascript"></script>


あとはul/liを使ってリストを作るだけです。
<ul class="myTree"> <li class="treeItem"><img src="img/folder.png" class="folderImage" /> <span class="textHolder">フォルダ1</span> <ul> <li class="treeItem"><img src="img/folder.png" class="folderImage" /><span class="textHolder">サブフォルダ1-1</span></li> <li class="treeItem"><img src="img/folder.png" class="folderImage" /><span class="textHolder">サブフォルダ1-2</span> <ul style="display: none;"> <li class="treeItem"><img src="img/folder.png" class="folderImage" /><span class="textHolder">サブフォルダ1-2-1</span></li> <li class="treeItem"><img src="img/folder.png" class="folderImage" /><span class="textHolder">サブフォルダ1-2-2</span></li> <li class="treeItem"><img src="img/folder.png" class="folderImage" /><span class="textHolder">サブフォルダ1-2-3</span></li> </ul> </li> </ul> </li> <li class="treeItem"><img src="img/folder.png" class="folderImage" /> <span class="textHolder">フォルダ2</span> <ul> <li class="treeItem"><img src="img/folder.png" class="folderImage" /> <span class="textHolder">サブフォルダ2-1</span></li> <li class="treeItem"><img src="img/folder.png" class="folderImage" /> <span class="textHolder">サブフォルダ2-2</span></li> </ul> </li> </ul>

サンプルはこちら
ツリーの開閉も可能です。
組み込んでリスト構造を作るだけなので簡単。

おわり。

ドロップダウン型メニューを垂直に並べる

前回のドロップダウン型メニューのコードを、ちょっと変更するだけでメニューを垂直に出来るみたいなので、やってみました。

使用するファイルは前回と同じく以下の５つです。
・jquery.jdMenu.css
・jquery.bgiframe.js
・jquery.dimensions.js
・jquery.jdMenu.js
・jquery.positionBy.js


使い方

---

ソースコードは前回やった水平のドロップダウン型メニューとほとんど同じです。

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>

ul/li要素を使ってメニューを作る。
<ul class="jd_menu jd_menu_vertical"> <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>

前回のドロップダウンメニューとほぼ同じソースです。
異なる部分は、最上位のulタグの[class="jd_menu"]の部分が、[class="jd_menu jd_menu_vertical"]となっている点。

つまり、class要素を[class="jd_menu"]とすると水平に
[class="jd_menu jd_menu_vertical"]とすると垂直にメニューが並びます。

サンプルはこちら 水平/垂直の変更も簡単にできますね。

おわり。