2011年1月27日木曜日

jqueryでvisibilityを切り替えるプラグインを作る

こちらのフォームを改良している際、要素のvisibility:visiblevisibility:hiddenの切り替えが必要になりました。

display:blockdisplay:noneの切り替えならshow()hide()が使えますが、visibilityの場合はそれがありません。
もちろんcss()メソッドを使えば切り替え可能ですが、いちいち書くのが面倒ですし、見た目もあまりきれいじゃありません。

というわけで、ちょうど良い機会だと思って、visibilityを切り替えるjqueryプラグインを作ってみました。

jquery.vtoggle.js

(function($){
$.fn.vtoggle = function(config){
var $this = $(this);

switch ($this.css("visibility")){
case "visible":
$this.css("visibility","hidden");
break;
case "hidden":
$this.css("visibility","visible");
break;
default:
//何もしない
break;
}

return $this; //メソッドチェーン用にreturn
};
})(jQuery);


見ての通り、本当に単純な関数です。

それでも、自分が作ったプラグインがメソッドチェーンの輪のひとつとして動いているのを見ると、ちょっと嬉しくなりますね。

まあ初めてのプラグインとしてはこのくらいでちょうど良かったと思います。

0 件のコメント:

コメントを投稿