2009 年 11 月 のアーカイブ

テキストボックスに透かし文字を入れるJS

2009.11.27 金曜日

最近多い気がする。
テキストボックスが空の時に初期値で警告文とか入っていて、フォーカスすると消えるアレ。
textbox

ここんとこ出番が多かったのでjQueryのプラグインにしてみた。
未入力のままフォームがsubmitされると初期値が送信されちゃうので、親のformオブジェクトを探してsubmitの際に空にするようにしてみた。

サンプル

サンプル

使い方

<br />
$("#text01").setDefaultValue("値を入力してください");<br />
$("#text02").setDefaultValue("値を入力してください", "gray");<br />

第一引数に初期値になるメッセージ
第二引数にクラス名を入れると、初期値を表示している際に適用される。
グレー文字で出したいとか、背景を赤にしたいとかありそうだったので。

ソース

Download: textbox.js
  1. <br />
  2. (function($) {<br />
  3.     $.extend({<br />
  4.         textarea : new function(){<br />
  5.             var TA = this;<br />
  6.             TA.set = function(o, m, c){<br />
  7.                 if (Object.prototype.toString.call(m) != "[object String]")return false;<br />
  8.                 var parent;<br />
  9.                 var p = o.parents();<br />
  10.                 for(var i=0;i</p>
  11. <p.length;i++){<br />
  12.                     if (typeof p[i].elements != "undefined"){<br />
  13.                         $(p[i]).submit(function(){<br />
  14.                             if (o.val() == m){<br />
  15.                                 o.val('');<br />
  16.                             }<br />
  17.                         });<br />
  18.                         break;<br />
  19.                     }<br />
  20.                 }<br />
  21.                 if (o.val() == "" || o.val() == m){<br />
  22.                     o.val(m);<br />
  23.                     if (c) o.addClass(c);<br />
  24.                 }<br />
  25.                 o.focus(function(){<br />
  26.                     if (o.val() == m){<br />
  27.                         o.val('');<br />
  28.                         if (c) o.removeClass(c);<br />
  29.                     }<br />
  30.                 });<br />
  31.                 o.blur(function(){<br />
  32.                     if (o.val() == ""){<br />
  33.                         o.val(m);<br />
  34.                         if (c) o.addClass(c);<br />
  35.                     }<br />
  36.                 });<br />
  37.             }<br />
  38.         }<br />
  39.     });<br />
  40.     $.fn.extend({<br />
  41.         setDefaultValue: function(m, c){<br />
  42.             $.textarea.set($(this), m, c);<br />
  43.         }<br />
  44.     });<br />
  45. })(jQuery);<br />

タグ: | カテゴリー: Javascript | コメント(0) »

jQueryと再起関数でツリーメニュー

2009.11.17 火曜日

任意の数の多段に対応したツリーメニュー。
リクエストに、階層単位での処理(開く際に同階層の他のメニューを閉じる)があったんで再起関数を使ったんだけど、jQueryのセレクタでちょっと戸惑った。

再起で1階層づつ処理したかったんで、上手いことやる方法ないかと探してたんだけど、

parent > child　
(親子関係を指定して要素を選択する。)

これって、parentを省略して

$(">child", elem)

って書き方でいけるのね。メモメモ。

サンプル

サンプル

ソース

HTML

  1. <script language="javascript" type="text/javascript" src="jquery.js"></script>
  2. <script language="javascript" type="text/javascript" src="treeMenu.js"></script>
  3.  
  4. <ul id="sample01" class="sample_ul treeMenu">
  5.   <li><span>Menu1</span>
  6.     <ul>
  7.       <li><a href="#">Menu1.1</a></li>
  8.       <li><a href="#">Menu1.2</a></li>
  9.       <li><a href="#">Menu1.3</a></li>
  10.     </ul>
  11.   </li>
  12. </ul>

 
JS

Download: treeMenu.js
  1. $(document).ready(function(){
  2.     $(".treeMenu ul").hide();
  3.     $(".treeMenu").each(function(){
  4.         TM_init($(this));
  5.     });
  6.     function TM_init(elem, sp, so){
  7.         if (!sp) sp = 400;
  8.         if (!so) so = false;
  9.         $(">li:has(ul)", elem).each(function() {
  10.             var myTree = this;
  11.             $(">:first-child", myTree).click(function(e){
  12.                 var target = this;
  13.                 $(">li:has(ul)", elem).each(function(){
  14.                     if ($(">:first-child", this).get()[0] == target){
  15.                         $(">ul:first", this).slideToggle(sp);
  16.                     }else if (so == true){
  17.                         $(">ul:first", this).slideUp(sp);
  18.                     }
  19.                 });
  20.             });
  21.             TM_init($(">ul:first", myTree), sp, so);
  22.         });
  23.     }
  24. });

とりあえずデフォルト状態で、class=”treeMenu”と入っているエレメントに対して自動で設定されるようになってるけど、
速度と挙動(メニューを開いた際に同階層の他のメニューを閉じるか残すか)が変更出来るようにしてあるので、
3～5行目を編集して

//--　速度と挙動を任意で指定
$(".treeMenu").each(function(){
    TM_init($(this), 300, true);
});

 

//-- IDを指定して個別設定
TM_init($("#sample01"));
TM_init($("#sample02"), 500, true);

といった感じでも。

時間もないのでとにかくシンプルにって感じで書いたんだけど、
メニューを開くトリガーに画像を使いたいって事だったので、開閉に応じた画像のスワップとかのリクエストもありそう。
コールバック関数とか渡せるようにしといたら便利になるかなぁ。

タグ: | カテゴリー: Javascript | コメント(0) »