1. PATH
2. SAMPLE
3. SCRIPT

기본 설정

title 접근성

    document.title += ' > title 접근성'  <!-- document.title에 텍스트 추가 -->
    <h2 data-addtitle='this'>title 접근성</h2>
    <h2 data-addtitle='title 접근성'></h2>

    텍스트 변경시,
    <button type="button" data-blind-title='title-test'>텍스트변경1</button>
    <button type="button" data-blind-title='title-test'>텍스트변경3</button>
    <button type="button" data-blind-title='title-test'>텍스트변경2</button>
    <h2 id="title-test">텍스트변경1</h2>  <!-- 클릭 이벤트 발생시, data-blind-title에 지정된 id를 찾아 텍스트 변경 -->
    

이미지 반응형

      <span data-picture='' data-alt='알트1'>
        <span data-src='s1.png'></span>
        <span data-src='s2.png' data-media='(min-width: 641px)'></span>
        <span data-src='s3.png' data-media='(min-width: 841px)' data-alt='알트2'></span> <!-- 이미지별로 다른 alt 속성을 가져야 할 경우. -->
      </span>
    

탭

      <ul data-tab='{"activeidx" : "0"}'>
        <li data-act='tab'><a href="#tabCont1">Tab 1</a></li>
        <li data-act='tab'><a href="#tabCont2" data-callback='{"callback" : "alert(2)"}'>Tab 2</a></li>
        <li data-act='tab'><a href="#tabCont3">Tab 3</a></li>
      </ul>

      <!-- Case 2 // -->
      <ul data-tab='{"acttit":".tab", "callback" : "alert(\"Tab callback이 다 같은 경우\")"}'>
        <li class="tab"><button type="button" data-url='#tabCont1, #tabCont1-1'>Tab 1</button></li>
        <li class="tab"><button type="button" data-url='#tabCont2, #tabCont2-1'>Tab 2</button></li>
      </ul>
    

CLICK EVENT

data-toggleclass

 <!-- 클릭할 때마다 클래스명이 추가/삭제 -->
      <button type="button" data-toggleclass="active" class="guide-btn">class toggle</button>
    

 <!-- 원래 클래스명(정규식 가능)과 변경할 클래스명 받아 치환 -->
      <button type="button" onclick='$jq("#areabranch").replaceClass("branch-[^ ]*","branch-cdi")'>
      <button type="button" onclick='$jq("#areabranch").replaceClass("branch-[^ ]*","branch-april")'>
      <button type="button" onclick='$jq("#areabranch").replaceClass("branch-[^ ]*","branch-ig")'>
      <button type="button" onclick='$jq("#areabranch").replaceClass("branch-[^ ]*","branch-ig","branch-default")'> <!-- 인자가 세개일 경우 세번째는 디폴트 클래스임. -->

      <!-- 데이터로 넘길 경우 이스케이프 처리 참고. -->
      data-callback='{"callback" : "$jq(\"#areabranch\").replaceClass(\"branch-[^ ]*\",\"branch-cdi\")"}'
    

 <!-- 라디오/체크박스의 경우 토글로 내용을 보이고 숨길때 사용 -->
    <div>
      <input type="radio" id="f-chk-all-2" class="fm-rad" name="f-chk-all" onclick="ui.checkedToggle(this, {view:['case1'], hide:['case2'], closest:'div'});">
      <input type="radio" id="f-chk-all-3" class="fm-rad" name="f-chk-all" onclick="ui.checkedToggle(this, {view:['case2'], hide:['case1'], closest:'div'});" checked>

      <input type="checkbox" id="f-chk-all" class="fm-chk" onchange="ui.checkedToggle(this, {view:['case1'], hide:['case2'], closest:'div'});">
      <div data-chkarea="case1" class="guide-tab-cont" style="display: none;">Content 1</div>
      <div data-chkarea="case2" class="guide-tab-cont" style="display: block;">Content 2</div>
    </div>
    <!-- 체크박스의 경우 체크해제일때 view,hide가 반대로 동작 -->
    

      <!-- 내림차순일 경우 -->
      <button type="button" class="btn-sort sort-desc" onclick="ui.sort(this, {'cname':'sort-desc','desc':'내림차순','asc':'오름차순'})">BY NAME<span class="ir i-sort">내림차순</span></button>
      <!-- 오름차순일 경우 -->
      <button type="button" class="btn-sort" onclick="ui.sort(this, {'cname':'sort-desc','desc':'내림차순','asc':'오름차순'})">BY UNIVERSITY<span class="ir i-sort">오름차순</span></button>
    

내부링크

href="#guideClickEvent" data-url='#guideClickEvent' "add" : 20 "isfocus" : false "callback" : "alert(1)"

      <a href="#guideClickEvent" class="guide-btn" data-anchor=''>href="#guideClickEvent"</a>
      <button type="button" class="guide-btn" data-url='#guideClickEvent' data-anchor=''>data-url='#guideClickEvent'</button>
      <button type="button" class="guide-btn" data-url='#guideClickEvent' data-anchor='{"add" : 20}'>"add" : 20</button>
      <button type="button" class="guide-btn" data-url='#guideClickEvent' data-anchor='{"isfocus" : false}'>"isfocus" : false</button>
      <button type="button" class="guide-btn" data-url='#guideClickEvent' data-anchor='{"callback" : "alert(1)"}'>"callback" : "alert(1)"</button>
    

popup

      <button type="button" class="guide-btn" data-uipop='1' data-url='#popsample'>레이어팝업 no-dim</button>
      <button type="button" class="guide-btn" data-uipop='1' data-url='#popsample2'>레이어팝업 dim</button>
      <a href="popup.html" class="guide-btn" data-uipop='["이름", "width=422, height=637, left=0, top=0"]'>window popup</a>
      <button type="button" class="guide-btn" data-uipop='0' data-url='#popsample2'>닫기</button>

      <div id="popsample" class="layerpop" data-uipopset=''>
        <div class="layerpop-sc">
          <div class="layerpop-wrap">
            팝업내용
            <button type="button" class="guide-btn" data-uipop='0'>닫기</button>
          </div>
        </div>
      </div>
      <div id="popsample2" class="layerpop" data-uipopset='{"isDim" : true}'> <!-- isDim:true일 경우 열리면 dim클래스가 붙음. class="layerpop dim" -->
        <div class="layerpop-sc">
          <div class="layerpop-wrap">
            팝업내용
            <button type="button" class="guide-btn" data-uipop='0'>닫기</button>
          </div>
        </div>
      </div>

      <!-- 스크립트에서 레이어 열리고 닫힐때 callback 예) -->
      $jq("#popsample").data("uipopset",{callbackOpen : function(){ alert("열림") }});
      $jq("#popsample2").data("uipopset",{callbackClose : function(){ alert("닫힘") }});

      <!-- 옵션 재설정 예) -->
      $jq("#popsample").uipop("setoption",{"callbackOpen":function(){ alert("열림2");} });
      $jq("#popsample").uipop("setoption",{"callbackOpen":function(){ alert("열림3");}, "callbackClose":function(){ alert("닫힘3");} });

      <!-- 옵션값 참조 예) -->
      $jq("#popsample").uipop("getoption","callbackOpen");

      <!-- js내에서 팝업열때 예) -->
      $jq("#popsample").uipop("open");

      <!-- js내에서 팝업닫을때 예) -->
      $jq("#popsample").uipop("close");
    

dropdown

카테고리 선택

첨부파일 customizing / 삭제 버튼

      <div class="guide-fm">
        <input type="file" id="f-attach" data-fakefile="file" data-delete=".fm-del" />
        <label for="f-attach" class="fm-btn">파일 찾기</label>
        <span class="guide-del-wrap">
          <input type="text" title="첨부파일" placeholder="첨부파일 + 삭제" data-fakefile="text" readonly="readonly" />
          <button type="button" class="fm-del">삭제</button>
        </span>
      </div>
    

      <div class="guide-fm">
        <input type="text" title="첨부파일" class="guide-fm-ipt" placeholder="삭제버튼" data-delete=".fm-del" />
        <button type="button" class="fm-del">삭제</button>
      </div>
    

select placeholder

선택 옵션1 옵션2

<select class="guide-fm-sel" data-placeholder='전체' style="width:100%;">
  <option>전체</option> <!-- selected일 경우 "placeholder" 클래스 추가 -->
  <option>옵션1</option>
  <option>옵션2</option>
</select>
    

캘린더

<!-- 스크립트 적용전 코드 -->
<input type="text" data-calendar='' />

<!-- 스크립트 적용후 코드 (.flatpickr-wrapper 추가됨) -->
<div class="flatpickr-wrapper">
  <label for="f-time" class="blind">상담 가능 날짜 선택</label>
  <input type="text" id="f-time" data-calendar='' />
</div>
    

아코디언

      <div data-accordion='' class="guide-accordion">
        <div class="guide-accordion-item">
          <a href="#none" data-act='title' class="guide-accordion-title">1. Logistics<span class="arr">view</span></a>
          <div data-act='cont' class="guide-accordion-cont">
            콘텐츠 내용 영역 1
          </div>
        </div>
        <div class="guide-accordion-item">
          <a href="#none" data-act='title' class="guide-accordion-title">2. Grading<span class="arr">view</span></a>
          <div data-act='cont' class="guide-accordion-cont">
            콘텐츠 내용 영역 2<br /><button type="button" class="guide-btn" data-act='close'>닫기</button>
          </div>
        </div>
      </div>
    

grid.case1

      <div class="guide-grid" data-grid='{"name":"case1","cssname":"active","item":".item","btn":".btn","cont":".cont"}'>
        <div class="item">
          <button type="button" class="btn active">btn1-1</button>
          <button type="button" class="btn">btn1-2</button>
          <div class="cont">cont1-1</div>
          <div class="cont">cont1-2</div>
        </div>
        <div class="item">
          <button type="button" class="btn">btn2-1</button>
          <button type="button" class="btn">btn2-2</button>
          <div class="cont">cont2-1</div>
          <div class="cont">cont2-2</div>
        </div>
      </div>
    

슬라이드

      <div class="guide-slide-list" data-slide='{"case":"case1","option":{"autoplay":true, "dots":"custom"}}'>
        <div class="slide" data-title='slide title 1'><a href="#none" class="inner">1</a></div>
        <div class="slide" data-title='slide title 2'><a href="#none" class="inner">2</a></div>
        <div class="slide" data-title='slide title 3'><a href="#none" class="inner">3</a></div>
      </div>
    

      <div class="guide-slide-list" data-slide='{"case":"case2","option":{"arrows":false, "pagecount":true}}'>
        <div class="slide"><a href="#none" class="inner">1</a></div>
        <div class="slide"><a href="#none" class="inner">2</a></div>
        <div class="slide"><a href="#none" class="inner">3</a></div>
        <div class="slide"><a href="#none" class="inner">4</a></div>
        <div class="slide"><a href="#none" class="inner">5</a></div>
      </div>
    

스크롤바

Swipe

      <div class="guide-swipe-wrap" data-swipe='{"type":"case1","breakel":".guide-swipe-item"}'> <!-- js 실행 후 css 추가 : swipe-off swipe-guide swipe-initialized -->
        <div class="guide-swipe-child"> <!-- js 실행 후 css 추가 : swipe-cont -->
          <div class="guide-swipe-item">1</div>
          <div class="guide-swipe-item">2</div>
          <div class="guide-swipe-item">3</div>
        </div>
      </div>