SPSTRAP Document API

markup

<div class="sp--cookie"                     // 쿠키 컨테이너
                                data-cookie="sample-1"                  // 컨테이너가 가지는 쿠키명
                                style="padding:30px;background:#f0f0f0;"
                            >
                                쿠키 컨텐츠                              // 실제 쿠키속 컨텐츠
                                
                                <button class="sp--cookie-btn"          // 쿠키 버튼 리스너
                                    data-cookie="sample-1"              // 영향을 줄 쿠키명
                                    data-scope="set"                    // 버튼 역할 ( set = "굽기" )
                                    data-value="val"                    // 쿠키의 값이 필요할 경우 지정 ( 웬만하면 쓸 일 없다 )
                                    data-date="3"                       // 쿠키 유효기간 ( 3 = 3일 )
                                    style="display:none;"               // 초기상태 숨겨두기 ( 쿠키가 비었다면 이 부분이 삭제된다. ) 
                                >쿠기 굽기</button>
                            </div>
                            
                            <button class="sp--cookie-btn"      // 쿠키 버튼 리스너
                                data-cookie="sample-1"          // 영향을 줄 쿠키명
                                data-scope="del"                // 버튼 역할 ( del = "제거" )
                                style="[display:none;]"         // 초기상태 숨겨두기 ( 쿠키가 구워져있다면 이 부분이 삭제된다. )
                            >쿠기 제거하기</button>

base cookie

Class

name	description
.sp--cookie	쿠키의 영향을 받는 컨테이너
.sp--cookie-btn	쿠키의 영향을 주는 버튼
.sp--cookie-on	쿠키에 값이 지정되면, .sp--cookie 컨테이너에 추가되는 클래스

Attribute

name	description
data-cookie	쿠키가 가지는 unique name <div class="sp--cookie" [data-cookie="index-popup-cookie-1"]> <!-- ... --> </div>
data-scope="set"	쿠키를 굽거나 삭제한다. 버튼 속성에서 사용. data-cookie와 반드시 함께 사용해야 한다. set or del <div class="sp--cookie" data-cookie="index-popup-cookie-1"> ... <button class="sp--cookie-btn" data-cookie="index-popup-cookie-1" [data-scope="set"] style="display:none;">쿠기 굽기</button> </div> <button class="sp--cookie-btn" data-cookie="index-popup-cookie-1" [data-scope="del"] style="display:none;">제거하기 굽기</button>
data-date	default : 1 = 하루, 쿠키의 수명을 지정한다.
data-value	default : true 특별하게 쿠키의 값이 필요한 경우만 사용한다. 기본적으로 boolean 형태로 체크하므로 중요하진 않다.

Etc

.sp--cookie 클래스는 .sp--ajax 클래스와 체인 형태로 연결되어 있습니다.