RX / XERXE 활용팁서드파티
Extra Form

개인적으로 사이트에 필요한 기능중 제가 직접 시도 해 보는 것들은 대부분 구글검색을 통해 나오는 자료들을 보고 하거나 혹은 다른 공개된 자료에 똑같은 기능이 있다면 소스를 열어보고 그 부분을 찾아보고 적용하는 편 입니다.

 

프로그램을 짤 줄은 몰라도 프로그램을 보다보면(제가 우스개소리로 100번을 반복해서 보면 이해가 간다고 ㅋ) 어렴풋이 어떤 규칙인지 살짝 감이 오기도 합니다.

 

물론 바로 결과를 확인할 수 있는 논리적인 구조이기에 직접 시도해 보고 결과를 보면서 이해를 하게 되는 경우도 많은 것 같습니다.

 

오늘 소개하는 이 팁도 스케치북 스킨에는 있는데 저희 모바일 스킨에는 기능이 없어서 스케치북의 소스를 열어서 해당 기능이 어떤 소스에 의해 작동하는지 살펴보고 그대로 저희 모바일 스킨에 적용해 보았습니다.

 

 

 

Screenshot_20180420-102523.png

 

 

 

 

스케치북이 참 대단하다는게 디자인도 나쁘지 않지만 세세한 부분까지 하나도 놓치지 않고 방문자를 배려하여 기능을 모두 준비했다는 점 입니다.

 

그 중 지금 소개하는 로그인이 필수인 기능을 비로그인 상태에서 시도할 경우 로그인을 할 수 있는 창을 띄우는 기능이 그렇습니다.

 

 

 

a 태그에 로그인조건을 걸면 비로그인시 클릭시 그냥 아무 반응이 없어 재미가 없습니다.

a 태그에 아무 조건을 걸지 않으면 해당 기능을 담당하는 모듈에서 뱉어내는 에러메시지가 노출됩니다. "요청 어쩌구...."

 

 

보드스킨에서 이것을 고려해서 로그인에 동작하는 버튼이나 링크에 특정 클래스를 추가하고 해당 클래스를 가진 링크를 비로그인 시 클릭하면 정해진 문구와 정해진 링크로 이동하는 간단한 기능을 추가해 주는 것이 좋습니다.

 

 

아래 스크립트를 적당한 곳에 넣어주세요. 저희는 보드스킨의 read.html 에 넣었습니다. 

 

<script>
jQuery(document).ready(function($){
var bdLogin = "<!--@if(!$is_logged)-->로그인 하시겠습니까?@{$current_url}&act=dispMemberLoginForm<!--@end-->";
if(bdLogin){
        $('.bd_login').click(function(){
            if(confirm(bdLogin.split('@')[0])) window.location.href = bdLogin.split('@')[1];
            return false;
        });
    };
});
</script>

 

 

 

비로그인일때 bdLogin 의 값을 가지게 조건이 걸려있구요.

bdLogin 의 상태(비로그인) 시에만 동작하도록 되어 있습니다.

 

이때 bd_login 클래스를 가진 링크를 클릭했을때

bdLogin 의 값을 @라는 것을 기준으로 나누어서 

좌측의 값을 컨펌창의 문구로 우측의 값을 이동하는 링크값으로 이용했습니다.

 

물론 제가 짠게 아니고 서두에 설명드렸듯이 스케치북제작자분이 짠 코드를 제가 이렇게 이해했다는 이야기죠 ㅋ

 

사실 정리해서 지금 제가 한곳에 모아서 그렇제 스케치북에는 저 코드들이 여러 파일에 나누어 있어서 찾는데 시간이 좀 걸렸습니다 ㅋ

 

 

 

 

그리고 사용하고 싶은 링크의 class에 bd_login 을 추가하거나 만들어 줍니다. 

 

<a href="~~~~" class="abcd bd_login">링크</a>

<button class="bd_login"></button>

 

비로그인시에도 동작하는 기능의 링크에 추가하면 안되겠죠???!!!

 

 

 

글쓴이 웹지기

profile
^ ^
Atachment
첨부 1

서버에 요청 중입니다. 잠시만 기다려 주십시오...