JavaScript

Spryとautocompleteの競合

クイズ研にて、Spryでvalidatorを設定しているinput要素でautocompleteが利かないな、と思っていたのですが、ソースを見たところ、強制で autocomplete="off" を設定してしまっていました (1.6.1)。

Spryオブジェクトのinputプロパティーがinput要素そのものなので無理矢理onに設定してみたところ、
autocompleteから要素を選んだときにvalidationが正しく働かないことがあるようです。
だから強制で設定していたんですね。

ImageFlow 0.9のIEでのスクリプトエラー修正と、作業軽減版

Web Designing 6月号内で、ImageFlow 0.9の紹介がされていました。
Web Designing (ウェブデザイニング) 2008年 06月号 [雑誌]

html, cssとJavaScriptだけで、iTunesのカバーフローの様な見映えを実現できます。JavaScriptとcssはファイルをそれぞれ読み込むだけで、プログラムに拒否反応が強い私の彼女もほぼ問題なく完成できてました。


サンプル

しかし問題が1点と、作業しづらいところが1点ありまして、それを修正したバージョンを配布しておきます。

htmlとして表示するとドキュメントとサンプルが動くjsファイルはどうでしょう?

Rubyではライブラリーのコード内に
if __FILE__ == $0のように書いて、
そのライブラリーの使い方やテストのコードを書くことがあるらしい。
http://www.jaist.ac.jp/~m-hatake/design/

PHPでも同じようなことをしようとしている方もいます。
http://blog.bz2.jp/archives/2008/04/post_78.html

JavaScriptでもすれば良いんじゃない、と思ってやってみました。

JavaScriptのイベントハンドラ設定再考

[Think IT] 第1回:そろそろ本気で学びませんか? (1/3)に、
本気でやるならonclick属性は避けてライブラリを活用すべきが書かれていました。

そこに私は

こうやってるんですけど、ページの読み込みが遅い時
イベントハンドラが設定される前に押してhrefの方に遷移されてしまったりしません?
本当は関数もheadに書いてonxxx属性通した方がユーザーには優しいんじゃないかと思わないでもない今日この頃。

と言うコメントを付けたわけですが、そこのところをもう少し追ってみようと思います。

勝手に添削: 二度押し防止のonsubmit

二度押し防止の onsubmit で disable にするやつを使おうかな、と思ったんですけど、書き方が少し好みと違ったので、リファクタリングして、最終的にひとつの関数にしてみました。

呼び出し方は、initは要らなくなって、こんな感じでOKです。

DisableSubmit( { "name":["back_button","submit_button"], "id":["submit_id"] }, 3000 );
DisableSubmit( { "id":["submit_id"] }, 3000 );
DisableSubmit( { "name":["back_button","submit_button"] }, 3000 );

DisableSubmit.jsのダウンロード

IE Developer Toolbar Beta3のスクリプトエラー修正モジュール

IEで (世間一般の) 幾つかのページを見た時、
collSelectors.item(i).SetQuirksMode(true);
と言う見慣れない行でエラーが出ていたんですが、これ拡張モジュールIE Developer Toolbarのせいだったんですね。

http://bitmap.dyndns.org/blog/archives/001458.html
http://www.nanoant.com/tweaks/ie-dev-toolbar-annoying-popup-fix

例によってみんながリソースエディターを使って直すのも時間もったいないので、
上記サイトの記述通りに修正済みのdllをライセンスも読まずにあげてしまいます。私を信用できる人はお使いください。

Widget.Dialogの高さの問題の修正

前回に続きWidget.Dialogです。

Widget.Dialogでは、メッセージが長くなった場合に、heightを固定で渡さないと、
ボタンやメッセージがダイアログ部分からはみ出てしまいます。
heightを渡さなくても、自動でダイアログサイズの調整をしてくれれば良いのに、と思い、改造しました。

また、ダイアログ部分がたまにページコンテンツの下側に入り込んでしまう問題も修正しました。
GPLなので合わせて公開しておきます。

Widget.Dialogのconfirm/promptの使い方

alert/confirm/promptの代わりにしようと、Widget.Dialog (旧PPrompt) を使ってみました。
confirm/promptではユーザーの返答を取得するのにコールバック関数を使っているため、
組み込み関数とは少々勝手が違いますので、簡単に使い方を紹介しておきます。

dojo.connectとdojo.byId

開発の時のJavaScriptはdojo toolkitを使っているわけですが、
イベントハンドリングの書き方でちょっと悩んでいます。

dojoの書き方だと

dojo.connect(dojo.byId(id), 'onclick', function(event){
	if (!confirm('続行しますか'))
		dojo.stopEvent(event);
});

のようにするのですが、ここでidの指定が間違っていたりすると、byIdからnullが入ってしまい、

Hash化したらチェック忘れずに、てことでチェック用関数

Javascriptによる大規模開発の覚え書き がずいぶんブックマークされているようですが、「3.引数のJSON化(Hash化)せよ」については、 「ハタさん」は (少し手抜きですが) とも書いてありますが、実際にこのまま取り入れるのは良くないと思います。

サンプルのため簡単に書いたのだと思いますが、大事なところが手抜きされているため、 代わりに手抜きしない場合の説明とコードを載せようと思います。

コンテンツの配信