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

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

display:blockとdisplay: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);

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

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

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

jqueryでformタグのonsubmit属性を削除する

Pear::HTML_QuickFormで出力したフォームには

<form action="/path/to/somewhere" method="post" name="testForm" id="testForm" onsubmit="try { var myValidator = validate_testForm; } catch(e) { return true; } return myValidator(this);">

という具合に、もれなくonsubmit属性がついてきます。

今回はこのonsubmitを消すという処理をしました。

$('#test_form').attr("onsubmit");

でさくっと消せるかな～、と思ってたのですが、消えません。

ググってみたところ、

$('#test_form').removeAttr("onsubmit");

で消せることが分かりました。

http://joshuaclayton.github.com/code/2009/06/08/handling-jquery-and-onsubmit.html


ちなみにonsubmitより利用頻度の高いonclickで検索すると、やはり属性が削除できず困っているというページが何件かヒットしました。

参考：onclick属性の操作
http://d.hatena.ne.jp/ftsh/20100729/1280396560
http://stackoverflow.com/questions/249074/how-to-change-onclick-handler-dynamically


それからこちらは「nameやidに"submit"という名前を付けるとjqueryの動作が怪しくなる」という件について。
属性の削除とは別の問題ですが、今回同様の問題に遭遇して、解決の糸口になりました。
http://www.takenoshin.com/web/blog/page/6.html

jQuery逆引きマニュアル Webデザインの現場で役立つ基本と実践

ざっと立ち読みしてなかなか良さそうだったので、買って読んでみました。

いちおうセレクタとかイベントの解説もありますが、あくまで気持ち程度。
「初級から上級まで」と銘打ってはいますが、それなりにjqueryの知識と経験があったほうが良いと思います。

ほとんどの項は１～２ページと短く簡潔にまとめられています。深く理解したい人にはもの足りないと思いますが、jqueryを使ってどんなことができるのかを広く浅く知るにはちょうど良いです。

あと自分用メモとして、サンプルのURL貼っておきます。
http://home.impress.co.jp/books/2961/

Web制作の現場で使う jQueryデザイン入門

会社の本棚に置いてあったので読んでみました。

セレクタやイベントなど、基本部分の解説がわかりやすいのが良かったです。
自分の場合、セレクタの使い方の復習として参考になりました。

とりあえずjqueryをはじめてみたい、という人向け。入門にピッタリの一冊だと思います。

jqueryで、inputフィールドにデフォルト値を入れておいてfocusしたら消す

というのをやりました。

こんな感じになります。

サンプル：jqueryでinputフィールドにデフォルト値を入れておいてfocusしたら消す

あとで知りましたが、こういうのをプレースホルダーと言うようです。ググるときはこのキーワードを使うといいと思います。

なお今回特に勉強になったのはdefaultValueの存在。

DOMで定義されている属性で、

$(this).attr('defaultValue')

という感じで取得できます。
フォームにアクセスした時にvalueがあると、この属性に値が保持されています。

参考：http://txqz.net/blog/2009/05/16/2312

jqueryで、要素をゆっくりhide()してからremove()する

というのをやるために、このようなコードを書きました。

$target.hide("slow").remove();

が、hideが終わる前にremoveされてしまうので、アニメーションの意味がなくなってしまいました。

少し悩んで、このページを見て解決しました。

http://stackoverflow.com/questions/1807187/how-to-remove-an-element-slowly-with-jquery

コールバック関数でremoveすればいいんですね。なるほど。

というわけで、コードをこのように修正してうまく動きました。

$target.hide('slow', function(){ $target.remove(); });

jqueryで指定要素"以外"のクリックイベントを実装するouterClickプラグイン

指定要素"以外"のクリックで発動するイベントを実装することになりました。
具体的には、特定のaタグをクリックすると小窓が開き、その小窓以外の、ページ内のどこかをクリックしたら小窓を閉じる、という処理です。

サンプル：outerClick

最初は.notなどのセレクタを使って実装しようと思ったのですが、小窓の中に子要素があるとうまく動作しなかったのですが、ググっていたらプラグインを見つけたのでこちらを使うことにしました。

プラグインページ
http://plugins.jquery.com/project/outerClick

デモページ
http://littleroom.se/playground/outerClick/

使い方も簡単で、

$('div#hoge').outerClick(function (event) { ... });

という具合に普通のイベントと同様に使えます。