아디/비번 찾을 시 메일발송에 기다림을 가져다주는 로딩 jquery 정보
아디/비번 찾을 시 메일발송에 기다림을 가져다주는 로딩 jquery첨부파일
본문
안녕하세요.
그누보드에 도움될만한 글을 처음 남깁니다만 아주 한정적인 경우입니다.
저는 PHPMailer에 지메일의 ssl인증 smtp를 사용하고 있습니다.(파일 : lib/mailer.lib.php)
( 관련글 : http://baraem2005.blog.me/20175791360 )
비밀번호 찾기 할 때 ssl 거치고 작성하느라 로딩이 길어집니다.
대신 메일이 세탁되어 스팸함으로 직통하지 않고 전송도 아주 잘되는 장점이 있습니다.
위 내용을 적용하면 member의 basic스킨에서는 메일이 전송중인데 특별히 따로 표시하는 것이 없어
대게 비밀번호 찾기가 안되는 줄 알고 여러번 클릭하거나
이미 되버린 줄 알고 창닫기를 누르는 이들이 많습니다.
성급한 이들을 위해 메일을 보내는 동안 로딩을 표시하는 jquery 스크립트를 만들었습니다.
아이디/ 비밀번호 찾다보면 오타같은 이유로 여러가지 오류가 발생할 수 있습니다.
1. email주소 빈칸 여부
2. 캡챠 빈칸 여부
3. email주소 유효성 통과 여부
4. 캡챠 유효성 통과 여부
5. 등록된 email주소 여부
각각은 아래와 같이 해결했습니다. 스크립트의 주석으로 표시해뒀습니다.
1.2.4 -> '캡챠 통과해야 로딩'으로 해결
3.5 -> '로딩시 무조건 초기화'로 해결
기본소스 : http://mytory.net/archives/783/
수정할 파일명 : skin/member/basic/password_lost.skin.php
회원정보 찾기 시작 주석 아래에 위와같이 입력합니다.
확인 버튼에 id="loadingEmail" 속성을 달아줍니다.
<script>사이에 jquery를 넣어주세요.
이제 실행하면 위와 같은 그림으로 로딩 스크립트가 나옵니다.
여기에 옵션으로 http://fontawesome.io/icons/ 에 Spinner Icons을 달아도 좋습니다.
그누보드에 도움될만한 글을 처음 남깁니다만 아주 한정적인 경우입니다.
저는 PHPMailer에 지메일의 ssl인증 smtp를 사용하고 있습니다.(파일 : lib/mailer.lib.php)
( 관련글 : http://baraem2005.blog.me/20175791360 )
비밀번호 찾기 할 때 ssl 거치고 작성하느라 로딩이 길어집니다.
대신 메일이 세탁되어 스팸함으로 직통하지 않고 전송도 아주 잘되는 장점이 있습니다.
위 내용을 적용하면 member의 basic스킨에서는 메일이 전송중인데 특별히 따로 표시하는 것이 없어
대게 비밀번호 찾기가 안되는 줄 알고 여러번 클릭하거나
이미 되버린 줄 알고 창닫기를 누르는 이들이 많습니다.
성급한 이들을 위해 메일을 보내는 동안 로딩을 표시하는 jquery 스크립트를 만들었습니다.
아이디/ 비밀번호 찾다보면 오타같은 이유로 여러가지 오류가 발생할 수 있습니다.
1. email주소 빈칸 여부
2. 캡챠 빈칸 여부
3. email주소 유효성 통과 여부
4. 캡챠 유효성 통과 여부
5. 등록된 email주소 여부
각각은 아래와 같이 해결했습니다. 스크립트의 주석으로 표시해뒀습니다.
1.2.4 -> '캡챠 통과해야 로딩'으로 해결
3.5 -> '로딩시 무조건 초기화'로 해결
기본소스 : http://mytory.net/archives/783/
수정할 파일명 : skin/member/basic/password_lost.skin.php
<!-- 회원정보 찾기 시작 { -->
<div id="lost_mask" style="position:absolute;z-index:9000;display:none;left:0;top:0; z-index:9000;background-color:black;text-align:center;color:white;">
메일을 전송 중 입니다.</span>
</div>
회원정보 찾기 시작 주석 아래에 위와같이 입력합니다.
<input type="submit" value="확인" class="btn_submit" id="loadingEmail">
확인 버튼에 id="loadingEmail" 속성을 달아줍니다.
<script>
$(function () { //_전송 클릭시 로딩 화면 스크립트 141208 { 소스 : http://mytory.net/archives/783/ }
//_#lost_mask 무조건 초기화 (캡챠 통과후 메일 오타에 발생하는 오류 제어)
$('#lost_mask').css({'width':'0','height':'0'});
//_확인 버튼 누르면 발생한다.
$("input[id$=loadingEmail]").click(function() {
if (fpasswordlost_submit() == true){ //_캡챠 통과해야 로딩
//_마스크의 높이와 너비를 화면 것으로 만들어 전체 화면을 채운다.
$('#lost_mask').css({'width':$(window).width(),'height':$(window).height()});
//_애니메이션 효과 - 일단 0.5초동안 까맣게 됐다가 70% 불투명도로 간다.
$('#lost_mask').fadeIn(500);
$('#lost_mask').fadeTo("slow",0.7);
};
});
});
</script>
<script>사이에 jquery를 넣어주세요.
이제 실행하면 위와 같은 그림으로 로딩 스크립트가 나옵니다.
여기에 옵션으로 http://fontawesome.io/icons/ 에 Spinner Icons을 달아도 좋습니다.
추천
0
0
댓글 5개
고맙습니다. (감사합니다.)
유용하길 바랍니다. (댓글 감사합니다.)
인터넷이 느린 경우 효과를 볼 수 있나요?
적용해봐도... 너무 빨라서 적용한 내용이 나타나는지 어떤 지 알 수가 없네요.
적용해봐도... 너무 빨라서 적용한 내용이 나타나는지 어떤 지 알 수가 없네요.
댓글보고 잉? 내 서버만 느린가 했는데
곰곰히 생각해보니 제가 PHPMailer에 지메일의 ssl인증 smtp를 적용하고 있었습니다...
창피합니다...본문에 관련 내용 추가하겠습니다.
곰곰히 생각해보니 제가 PHPMailer에 지메일의 ssl인증 smtp를 적용하고 있었습니다...
창피합니다...본문에 관련 내용 추가하겠습니다.
아이쿠... 그렇진 않습니다~^^
느린 접속환경인 회원들에게 유용할 수도 있어 적용해보려고 했는데...
효과를 확인할 수 없으니... 제대로 적용이 된 것인지 어떤지, 잘못 적용하여 오류가 있는지 어떤지 알 수가 없어서 곤란한 부분이 있다는 얘기입니다.
느린 접속환경인 회원들에게 유용할 수도 있어 적용해보려고 했는데...
효과를 확인할 수 없으니... 제대로 적용이 된 것인지 어떤지, 잘못 적용하여 오류가 있는지 어떤지 알 수가 없어서 곤란한 부분이 있다는 얘기입니다.