kawama.jp

jquery.flatheights.jsでブロック要素の高さを揃える

カテゴリ: Ajax,JavaScript — タグ: , , — 2011年1月28日 23:20 — Comments (0)hatebu count

cssでブロック要素の高さを揃えるやり方は知っていたんですが、改めて調べてみたところ、jqueryプラグインがあるのを知りました。

http://www.akatsukinishisu.net/itazuragaki/js/i20070801.html

こちらの記事は2007年と非常に古いですが、プラグインファイルの更新は「2010-09-15」となっており、定期的にメンテナンスされているようです。
ためしにjquery1.4.4で使ってみましたが、ちゃんと動作しました。

使い方も簡単ですし、jqueryを使っているサイトで高さを揃える要件があれば使ってみるといいと思います。

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

カテゴリ: Ajax,JavaScript — タグ: , , , — 2011年1月26日 22:06 — Comments (0)hatebu count

こちらのフォームを改良している際、要素の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);

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

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

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

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

カテゴリ: Ajax,JavaScript — タグ: , , , — 2011年1月25日 22:30 — Comments (0)hatebu count

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デザインの現場で役立つ基本と実践

カテゴリ: Ajax,JavaScript — タグ: , , — 2011年1月23日 21:24 — Comments (0)hatebu count

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

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

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

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

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

カテゴリ: Ajax,JavaScript — タグ: , , — 21:23 — Comments (0)hatebu count

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

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

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

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

カテゴリ: Ajax,JavaScript — タグ: , , , , , — 2011年1月19日 23:27 — Comments (0)hatebu count

というのをやりました。

こんな感じになります。

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

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

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

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

$(this).attr('defaultValue')

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

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

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

カテゴリ: Ajax,JavaScript — タグ: , , , — 2011年1月18日 19:54 — Comments (0)hatebu count

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

$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プラグイン

カテゴリ: Ajax,JavaScript — タグ: , , — 2011年1月17日 22:14 — Comments (1)hatebu count

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

サンプル:outerClick

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

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

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

使い方も簡単で、

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

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

ie8でjqueryのtoggle()が使えない

カテゴリ: Ajax,JavaScript — タグ: , , — 2011年1月14日 22:20 — Comments (0)hatebu count

という状況に遭遇しました。

調べてみたところ、同じ問題で困っている人がけっこういるようでした。
http://okwave.jp/qa/q6169954.html

is(‘:hidden’)も使えないようです。
この方はjqueryのソースコードの中まで見て調べています。
http://d.hatena.ne.jp/hiro_nemu/20090821/1250837131

ie8をie7互換モードで動かすという解決策もあるようです。
http://d.hatena.ne.jp/hide1080/20081116/1226833590

ie8でも環境によっては使えることもあるようで、正直よくわからないですね。
なんにしても迷惑な話です。

photoshopで「保存されるファイルの中に、ラテン文字以外の文字が含まれています…」の警告メッセージ

カテゴリ: 技術関連 — タグ: — 2011年1月13日 21:00 — Comments (0)hatebu count

たまにphotoshopを使うんですが、ファイルを保存するときにいつも「保存されるファイルの中に、ラテン文字以外の文字が含まれています。これらのファイル名と互換性のない Web ブラウザやサーバがあります。」というアラート(?)メッセージが表示されます。

特に不具合もないので無視してましたが、ちょっと気になったのでググってみました。

答えはadobeのサイトに載っていました。

http://kb2.adobe.com/jp/cps/223/223753.html

ファイル名やフォルダ名、つまり保存するパスに2バイト文字が含まれているとこのエラーが出るようです。
ほぼ毎回エラーが出る理由が分かりました。

そして解決策は、

上記の警告メッセージを表示しないで保存するには、「ファイル名」、「保存先のフォルダ名」、「保存先のフォルダのパス名」に 2 バイト文字を含まないようにします。

とのこと。
設定などでは回避できないようです。。

かなりウザいですが、いまさらPC内のフォルダ名を変更するのも難しいので、ガマンするしかないようです。

Copyright (C) 2002 - 2017 kawama All Rights Reserved. — Powered by WordPress