Nucleusのメンバーメール送信完了をjQueryで表示する
- 投稿日 : 2009-01-29, 05:12（最終更新日時 : 2010-07-14, 06:06）
- タグ（jQuery Usability Nucleus）
- カテゴリ（Javascript）
- 記し人（luvsic）
- 閲覧数（779）
- ver1.1 / 比較
Nucleusのメンバーメールを送ったとき、送信完了の表示のさせかたがわからない。コアに実装されてるかどうかもよくわからなかったので、試しに作ってみた。
ついでに、昔々に見た記憶のWordpressの記事投稿完了っぽいエフェクトをつけて遊んでみた。とりあえず色エフェクトのコードをはずしたものを書きます。
jQuery(function() {
mailDone = '#nucleus_mf'
if(location.pathname.match('/member/')) { //パスを取得（要らないけど勉強用）
if(location.href.match(mailDone)) { //現在表示しているページのアドレス（URL）に文字列がマッチする場合
if ($('form .error').length) { //エラーがある場合
$('form .error').animate({backgroundColor: 'orange', color: '#fff'},1200); //エフェクト
} else { //エラーがない場合
$('form').css('display','none'); //フォームを隠す
$('#nucleus_mf').after('<div id="mailDone"><span>送信を完了しました。</span><br />Thank you for your message!</div>'); //Divを追加
$('#mailDone').animate({backgroundColor: '#6DDEFF', color: '#fff'},1200).animate({backgroundColor: '#FFEC35', color: '#666'},1200); //エフェクト
}
}
}
});
mailDone = '#nucleus_mf'
if(location.pathname.match('/member/')) { //パスを取得（要らないけど勉強用）
if(location.href.match(mailDone)) { //現在表示しているページのアドレス（URL）に文字列がマッチする場合
if ($('form .error').length) { //エラーがある場合
$('form .error').animate({backgroundColor: 'orange', color: '#fff'},1200); //エフェクト
} else { //エラーがない場合
$('form').css('display','none'); //フォームを隠す
$('#nucleus_mf').after('<div id="mailDone"><span>送信を完了しました。</span><br />Thank you for your message!</div>'); //Divを追加
$('#mailDone').animate({backgroundColor: '#6DDEFF', color: '#fff'},1200).animate({backgroundColor: '#FFEC35', color: '#666'},1200); //エフェクト
}
}
}
});
デモページ
http://luvsic.net/member/1#nucleus_mf
動作を見てみたい方は、上記アドレス先のテキストエリアに「てすと」など文字列を入れて送ってみてください。ちなみに今日時点ではChromeだと動いてないです、原因不明。単に、「アドレスに#nucleus_mfがあるかどうか」で判定させてるだけのチープな感じですが、とりあえずはいろいろ使い回しできそうな印象があるのでよし、ということに…。
test
test, 2009-03-12 15:55 #
てすとそうしん
test, 2010-03-08 15:56 #