Nucleusのメンバーメール送信完了をjQueryで表示する
- 投稿日 : 2009-01-29, 05:12
- 最終更新日時 : 2010-12-21 17:32:00（履歴）
- タグ（Nucleus / jQuery / CSS）
- カテゴリ（Nucleus）
- 記し人（luvsic）[PDF]
- 閲覧数（10203）
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); //エフェクト
}
}
}
});
デモページ
https://luvsic.net/member/1#nucleus_mf
動作を見てみたい方は、上記アドレス先のテキストエリアに「てすと」など文字列を入れて送ってみてください。ちなみに今日時点ではChromeだと動いてないです、原因不明。単に、「アドレスに#nucleus_mfがあるかどうか」で判定させてるだけのチープな感じですが、とりあえずはいろいろ使い回しできそうな印象があるのでよし、ということに…。
参照
No comments yet