submitのタイミングで下記のメソッドを呼び出す。
前提として、
・通常のスタイルとして、ボタン用にbutton、リンク用にlinkを使用している。
・砂時計のスタイルとして、それぞれbuttonWait、linkWaitを用意している。
がある。
但し、これではダウンロード処理(ページ遷移or再描画のない処理)で、マウスカーソルを元に戻すことができないorz
ブラウザのステータスバーや右上のアイコン以外で、なんとか処理中ってのを表現できんもんかな?
【JavaScript】
function changeMouseCursorWait() { // ページ全体のマウスカーソルを変更する document.body.style.cursor = "wait"; for ( var i = 0 ; i < document.all.length ; i++ ) { var e = document.all(i); var tag = new String(e.tagName).toLowerCase(); var chg = false; if (tag == "a") { // リンクの場合 chg = true; } else if (tag == "input") { var typ = new String(e.type).toLowerCase() if ((typ == "submit") || (typ == "button")) { // ボタンの場合 chg = true; } } if (chg == true) { // スタイルを変更する e.className = e.className + "Wait"; } } }
【スタイルシート】
.button{ … } .buttonWait{ … cursor: wait; } .link{ … } .linkWait{ cursor: wait; }