컨텐츠 바로가기

스마트디자인 팁 상세
제목 [스마트디자인] 주소 입력시 나머지주소 입력박스에 도움말 띄우기 - PC
작성자 대표 관리자 (ip:) 작성일 2016-05-24 10:58:54 조회수 1659

주소 입력시 나머지주소 입력박스에 도움말 띄우기




쇼핑몰을 이용하는 사용자들이 주문서작성/회원가입 페이지에서 주소를 입력할 때
나머지주소를 쓰는것을 잊어 기입하지 않는 경우가 있습니다.




이를 방지하기 위해 나머지주소로 커서가 이동되었을때 도움말을 띄우는 방법에 대해 알아보겠습니다.




 1. 스마트디자인 편집창으로 주문서작성(orderform.html) 페이지를 열어주세요.

나머지주소 입력박스를 출력해주는 {$form.raddr2}변수에 아래와 같이 도움말 소스를 추가합니다.


<div class="eTooltip">
    {$form.raddr2}
    <div class="ec-base-tooltip typeUpper">
        <div class="content">나머지주소가 있는경우, 나머지주소를 모두 입력하세요.</div>
        <a href="#none" class="btnClose"><img src="//img.echosting.cafe24.com/skin/base/common/btn_close_tip.gif" alt="닫기" /></a>
        <span class="edge"></span>
    </div>
</div>

 



2. /css/module/order/form.css에 도움말 관련 CSS를 추가합니다.


.eTooltip { position:relative; display:inline-block; }
.ec-base-tooltip.typeUpper { left:185px; bottom:28px; width:320px; } /* 도움말풍선의 위치 및 크기 조절 */
.ec-base-tooltip.typeUpper .edge { left:20%; }

 



3. /layout/basic/js/basic.js에 도움말을 띄우는 자바스크립트 코드를 추가합니다.


$('.eTooltip').find('input').focus(function() {
    var targetName = returnTagetName(this);
    targetName.siblings('.ec-base-tooltip').show();
});
$('.eTooltip').find('input').focusout(function() {
    var targetName = returnTagetName(this);
    targetName.siblings('.ec-base-tooltip').hide();
});
function returnTagetName(_this){
    var eplacename = $(_this).parent().attr("class");
    var targetName;
    if(eplacename == "ePlaceholder"){
        targetName = $(_this).parents();
    }else{
        targetName = $(_this);
    }
    return targetName;
}

 





-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------







우편번호를 입력하고 나머지주소로 커서가 이동하면 자동으로 도움말을 띄우게 됩니다.
회원가입 페이지에도 동일한 방법으로 적용할수 있습니다.









-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------





 ※도움말 디자인이 정상적으로 나오지 않는다면?


1. 공통 레이아웃(/layout/basic/layout.html) 상단 <head>...</head>사이에

<!--@css(/layout/basic/css/ec-base-tooltip.css)-->를 추가합니다.


<!--@css(/layout/basic/css/layout.css)-->
<!--@css(/layout/basic/css/ec-base-tooltip.css)-->

 



2. 디자인편집창에서 화면추가하여 새로운 CSS파일을 만듭니다.






3. 새로 만든 파일에 아래 소스를 추가하고 저장합니다.


/* 공통 css */
.ec-base-tooltip { display:none; z-index:2; position:absolute; top:24px; padding:15px; border:1px solid #565960; background:#fff; -webkit-box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.15); -moz-box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.15); box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.15); } .ec-base-tooltip h3 { margin:0 0 8px; padding:0 10px; font-size:12px; border-bottom:0; background:url("http://img.echosting.cafe24.com/skin/base/common/ico_layer_title.gif") no-repeat 0 50%; }
.ec-base-tooltip h3 + p { margin:0 5px 8px; }
.ec-base-tooltip h4 { margin:15px 10px 8px 5px; font-size:12px; }
.ec-base-tooltip h4:before { display:inline-block; content:""; margin:0 5px 0 0; width:3px; height:3px; background:#666; vertical-align:middle; }
.ec-base-tooltip .btnClose { position:absolute; right:14px; top:14px; }
.ec-base-tooltip .edge { z-index:20; position:absolute; left:50%; top:-6px; display:block; margin:0 0 0 -5px; width:10px; height:6px; }
.ec-base-tooltip .edge:before,
.ec-base-tooltip .edge:after { display:inline-block; content:""; position:absolute; top:0; width:0; height:0; border:solid transparent; }
.ec-base-tooltip .edge:before { margin:1px 0 0; border-bottom-color:#565960; border-width:0 5px 5px 5px; }
.ec-base-tooltip .edge:after { left:1px; margin:2px 0 0; border-bottom-color:#fff; border-width:0 4px 4px 4px; }
.ec-base-tooltip table th, .ec-base-tooltip table td { padding:5px 15px 5px 5px; border:1px solid #e8e8e8; line-height:1.5em; }
.ec-base-tooltip table th { padding-right:0; background:#fbf9fa; }
.ec-base-tooltip table thead th { text-align:center; }
.ec-base-tooltip table tbody th { text-align:left; }
.ec-base-tooltip table .left { text-align:left; }
.ec-base-tooltip table .center { text-align:center; }
.ec-base-tooltip table .right { text-align:right; }
.ec-base-tooltip table .info { padding:0; color:#757575; }
.ec-base-tooltip table p.info:before,
.ec-base-tooltip table ul.info li:before { display:inline-block; content:""; margin:0 3px 0 0; width:4px; height:1px; background:#757575; vertical-align:middle; }
.ec-base-tooltip .info { padding:10px 10px 0; margin:5px 0 0; }
.ec-base-tooltip p.bullet, .ec-base-tooltip ul.bullet { margin:8px 10px; }
.ec-base-tooltip p.bullet:before,
.ec-base-tooltip ul.bullet li:before { display:inline-block; content:""; margin:-3px 3px 0 0; width:0; height:0; border:solid transparent; border-left-color:#333; border-width:2px 0 2px 2px; vertical-align:middle; }
.ec-base-tooltip ul.bullet li { line-height:1.5em; }
.ec-base-tooltip .txtEm { color:#008bcc; }
.ec-base-tooltip .txtWarn { color:#f65b54; }

/* typeUpper */
.ec-base-tooltip.typeUpper { top:auto; bottom:34px; }
.ec-base-tooltip.typeUpper .edge { top:auto; bottom:-6px; }
.ec-base-tooltip.typeUpper .edge:before { margin:0 0 -5px; border-top-color:#565960; border-width:5px 5px 0 5px; }
.ec-base-tooltip.typeUpper .edge:after { left:1px; margin:0 0 -4px; border-top-color:#fff; border-width:4px 4px 0 4px; }

 
첨부파일
목록 관리자게시 삭제 수정

최근본모듈

이전 모듈다음 모듈