jQueryを使ったアニメーションと、ユーザビリティの話。それとCSS3。 - 甘味志向＠はてな
JavaScript Advent Calendar 2011 オレ標準コース、2日目のもろへいやです。とても遅れてすいません… 私は技術的な話は得意ではないので、デザイン面からJavaScriptプログラマーに向けてのTipsを書きたいと思います。 今回は、アニメーションの話を書いてみます。 jQueryは標準で、要素の表示・非表示を切り替えるときにフェードやスライドを使うことが出来ますよね。 $("#box").fadeIn("fast"); たった一行で、アニメーション効果を付加することができるので、 プログラマーのみならずデザイナーの方でもjQueryを使っている人は多いんじゃないかと思います。 しかし、簡単なおかげで何をするにアニメーション効果をかけまくってしまったり。 あるいはアニメーション効果なんて無駄！ ということで、全然使っていない人もいると思います。 ですが、アニメーシ
更新履歴兼雑記 - ふりがなを出す
日本で Web 系の客商売するとまずいつもなんか出てくる、「姓を入力したらふりがなが自動的に出てきて欲しい！」→「難しいよ！」っていうヤツにちょっと解決を考えてみました。 http://shinh.skr.jp/chat/hurigana.html 問題点としては、 OSX の WebKit 系は入力途中の文字列を読み込めない。 最後の文字を押してから急いで変換に入ると取りこぼす。 「もんだいてn」→「問題点」とかで変換した場合に n が残る。 ひらがなとか英語とかが入力された場合には完全未対応。 後者二つはちょっと工夫すればなんとでもなるでしょう。二番目のは、サーバサイドに適切な辞書があれば適切なひらがなを補完することもできると思います。めんどうなのでやりませんが。 追記: 実装書くの忘れてた。 ただ 100msec おきにフォーム内の文字列見てるだけ。ひらがなが漢字に変身したらふりがな
hori-uchi.com: クリックするとすべて選択されるテキストエリア
GoogleAdsenseのAdsenseコードを表示するテキストエリアがちょっと便利。クリックすると、テキストエリア内のコードがすべて選択された状態になるので、あとは右クリックしてコピーするだけでOK。ちょっとした気遣いだけど、これだけですごく使い勝手がよくなっている気がします。 実際どうやって実現しているのかなとコードを覗いてみると、こんな感じ。 <textarea readonly rows="12" cols="65" onclick="this.focus();this.select()" id="code"> 標準関数のfocus()とselect()を使うだけでできてしまうので、非常に簡単ですね。早速まねしよう。 Technorati TAG GoogleAdsense, HTML, Javascript, UI,
onsubmit で disable にするやつ
■ onsubmit で disable にするやつ onsubmit で submit ボタンを disable にしてユーザビリティを良くする フォームを送信した時に、submit ボタンを disabled にして二重送信を防ぎましょう、というのがナウなヤングにバカウケ？ そんでもって、ここに書いてあるやつ なら、そこの JavaScript を読み込ませるだけで、自動的に全てのフォームに対して設定が行なわれるので便利。中止ボタン対策もしてあってグッド。 ただ、Deer Park な Firefox で試した所、戻るボタンで戻った場合は disabled が解除されないし、中止ボタンでの復活も効かない様子。 なので、書き直してみました。 var DisableSubmit = { init: function() { this.addEvent(window, 'load', thi
submit ボタン disable 技の罠 - naoyaのはてなダイアリー
昨日のonsubmit で submit ボタンを disable にしてユーザビリティを良くするにはちょっとした罠があって、それに気付かずに使うとはまってしまうかもしれないので、それもちょっと書いておく、というか今日僕自身がはまったわけだが。 罠というのは、type="submit" な input 要素、つまりは submit ボタンを onsubmit ハンドラで disable するまでは良いのですが、このとき <input type="submit" name="foo" value="bar">としていて、foo=bar という値が渡ってくることを期待し、それを内部の処理に使っていると嫌な目に逢う、という話です。先のやり方では input 要素が disable になって GET なり POST なりされるので、押したボタンに対応するパラメータが渡ってこない、というわけです。一
naoyaのはてなダイアリー - onsubmit で submit ボタンを disable にしてユーザビリティを良くする
先の Yahoo! Shopping のアプリケーションで、今度ちょっとやってみようと思ってたことを実装してみた。 http://bloghackers.net/~naoya/ys/app.cgi ボタンを押したときに、そのボタンが disable になります。この方法を使うとボタンが押されて次の処理に入ろうとしているというのが直感的に分かるのと、二重送信防止にもなるということでユーザビリティが改善できます。 仕掛けはすごく簡単で、form の onsubmit ハンドラに、その form に紐づく submit ボタンを disable になるような JavaScript を登録しておくだけ。 function disableSubmit(form) { var elements = form.elements; for (var i = 0; i < elements.length;
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
