반응형



    댓글 탭 보기를 업그레이드해봤습니다.

    아래 포스팅을 먼저 보시면 이해가 쉽습니다.

     - Disqus 댓글과 티스토리 댓글 탭으로 보기




    디자인도 더 깔끔하게 수정되었고,

    무엇보다도 이제 jQuery 스크립트 없이 CSS만으로 동작합니다! (약간의 속도 향상을 기대할 수 있습니다.)


    원리는 간단히 탭으로 <input type=radio>를 사용하고, CSS선택자로 :checked를 사용하는 것입니다.


    미리보기

    See the Pen tab only CSS by Kim young wook (@nubiz) on CodePen.

    codepen에서 작업한 결과물입니다.



    적용하기

    적용 방법은 이전과 크게 다르지 않습니다.


    1.HTML/CSS수정 - skin.html에서 

    <s_rp> 부터 </s_rp>까지를 잘라내어 메모장같은데 붙여둡니다.(댓글 출력 부분)

    <s_tb> 부터 </s_tb>까지를 잘라내어 메모장같은데 붙여둡니다.(트랙백 출력 부분)


    2. <s_rp>를 잘라낸 자리에 아래 코드를 대신 붙여넣고 파란색 부분 대신에 1.에서 복사해둔 내용을 각각 넣습니다.

    disqus부분은 본인의 disqus코드를 넣으시면 됩니다.

    아래 글을 참조하시면 좋습니다.

     - 블로그 속도 개선- Disqus탭 클릭했을 때 로딩되게 하기


    <!-- tab_comment by nubiz(http://nubiz.tistory.com/499) -->

    <div class="tabs">

      <input type="radio" id="tab1" name="tabs" checked/>  

      <input type="radio" id="tab2" name="tabs"/>  

      <input type="radio" id="tab3" name="tabs"/>

      <div class="labels">

        <label for="tab1">티스토리 댓글 : [# #_article_rep_rp_cnt_##]</label>

        <label for="tab2" onclick="loadDisqus()">Disqus</label>

        <label for="tab3">트랙백 : [# #_article_rep_tb_cnt_##]</label>

      </div>

      <div class="tab_container">

        <div id="tab1C" class="tab_content">

    <s_rp>

    여기에 댓글이 출력됩니다

    </s_rp>

        </div>

        <!-- #tab1 -->

        <div id="tab2C" class="tab_content">

    <div class="disqus">

    </div>

        </div>

        <!-- #tab2 -->

        <div id="tab3C" class="tab_content">

    <s_tb>

    여기에 트랙백이 출력됩니다

    </s_tb>

        </div>

        <!-- #tab3 -->

      </div>

    </div>

    #과 #사이의 띄어쓰기는 제거해주세요.


    3.style.css에 다음을 붙여넣습니다. 탭의 모양은 이 내용을 직접 수정하시면 됩니다.

    .tabs {

      float: left;

      width: 100%;

    }


    .tabs>.labels>label {

      background-color: #eee;

      border-radius: 0 2em 0 0;

      color: #999;

      cursor: pointer;

      float: left;

      height: 3em;

      line-height: 3em;

      overflow: hidden;

      padding: 0 1em;

      position: relative;

      width: 40%;

      margin: 1em 0 0 0;

      border-bottom: .2em solid #45a6e7;

      -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);

      -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);

      box-shadow: 0 1px 2px rgba(0,0,0,.2);

    }

    .tabs>.labels>label:nth-of-type(3) {

      width: 20%;

    }

    .tabs>.labels>label:hover {

      background-color: #ccc;

      color: #333;

    }


    input#tab1:checked ~ .labels>label[for="tab1"],

    input#tab2:checked ~ .labels>label[for="tab2"],

    input#tab3:checked ~ .labels>label[for="tab3"] {

      background-color: #45a6e7!important;

      color: #fff!important;

      display: block!important;

    }


    .tabs>.labels>label a {

      color: inherit;

    }


    .tab_container {

      clear: both;

      overflow: auto;

      width: 100%;

      padding: 1em;

      -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);

      -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);

      box-shadow: 0 1px 2px rgba(0,0,0,.2);

    }


    .tabs>input[type="radio"], .tabs .tab_content {

      display: none;

    }


    input#tab1:checked ~ .tab_container>#tab1C,

    input#tab2:checked ~ .tab_container>#tab2C,

    input#tab3:checked ~ .tab_container>#tab3C {

      display:block;

    }

    @media screen and (max-width:480px) {

      .tabs>.labels>label {

        width: 100%;

        margin: 0;

        border-radius: 0;

      }

      .tabs>.labels>label:nth-of-type(3) {

        width: 100%;

      }


      .tabs>.labels>label:first-of-type {

        margin: 1em 0 0 0;

      };

    }


    4.화면설정-화면출력에서 댓글,트랙백 모두 펼침으로 체크해주세요.


    5. skin.html에서 댓글, 트랙백을 접고 펼치는 버튼들을 제거하면 좋습니다.(article_rep_rp_link으로 찾으시면 actionTrail영역에 있습니다.)

    .



    탭 순서 바꾸기

    1. <label>태그들의 순서만 바꿔주시면 됩니다. 이때 탭 번호가 아니라 label태그의 순서 자체가 중요합니다.

    2. 1.에서 첫번째 탭의 <label 이 for="tab2"가 되었다면,<input>태그중 id가 tab2인 것을 찾아 '/>'앞에 checked를 써주고, 원래의 checked는 지우면 됩니다.

    마침

    탭 구현을 CSS만으로 할 수 있다는 사실이 신기하네요.

    제 아이디어는 아니고 codepen을 둘러보다 알게된 사실입니다.


    disqus나 liveRe사용자분들 중에 제 탭을 사용하시는 분을이 꽤 눈에 띄어 기분이 좋습니다^^

    그분들이 이 글도 보고 업그레이드 하셨으면 좋겠네요~



    업데이트

    http://nubiz.tistory.com/692

    여기에 업데이트 되었습니다. (IE8이하 미지원 브라우저에서 이용불가 안내메시지 추가)



    반응형
    Posted by 뭐하라

    문제가 있나요?(?)

    내용상 오류가 있음 업데이트 필요 화면이 깨짐 기타 수정이 필요함