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

커뮤니티에서 각각의 문서에 대한 정보를 부각 시켜서 보여주거나 해당 글쓴이의 정보 또는 글쓴이를 구독하게 하는 버튼을 부각시켜 주는 방법 중 하나로 게시글 열람시 상단에 필요한 버튼을 노출 시켜 주는 것이 효과적일 것 같아 작업해 보았습니다.

 

언론사 뉴스를 모바일로 우연히 읽다가 해당 기능이 모바일에서 효과적으로 보여져서 저희도 도입하게 되었습니다.

 

Screenshot_20180416-151146.jpg

 

저희는 top의 위치에는 사이트메뉴와 일부 버튼이 노출되고 있어 해당 위치에서는 원래 top메뉴가 보이도록 하고 그 아래로 내려가면 작업한 부분이 노출되도록 했습니다.

 

회원의 글을 읽으러 들어가면 보이지 않다가 top의 위치에서 100px 내려 오면 저 상단의 바가 노출이 됩니다.

 

글 쓴이를 구독(팔로우) 할 수 있게 강조하여 팔로우 버튼을 적용했습니다. 그리고 해당 문서의 주소를 빠르게 복사해 갈 수 있도록 기존에 작동하던 게시글주소 복사 기능의 버튼을 추가해 줬구요. 

 

그리고 작성글보기 버튼은 코어의 작성글이 아닌 썸씽모듈의 @/닉네임 을 링크했습니다. 일종의 글쓴이의 미니홈으로 가는 링크 입니다.

 

 

 

 

 

 

 

 

Screenshot_20180416-151217.jpg

 

구독자가 있는 경우는 구독자를 표시해 주도록 했습니다.

 

 

 

 

 

 

 

Screenshot_20180416-151106.jpg

 

내가 이미 구독하고 있는 회원의 경우는 class를 추가해서 핑크색상으로 구별이 되도록 했습니다.

 

 

 

 

 

 

 

 

 

 

이 기능을 동작하도록 만드는 것은 사실 모바일에서 흔하게 쓰는 top으로 가는 버튼을 동작시킬때 쓰는 방법과 100% 동일한 방법입니다. 상단으로 가는 버튼을 만들때 쓰는 기법이 특정위치까지 스크롤이 내려오면 top 버튼이 노출되게 스크립트를 사용하는 것인데 그 스크립트를 그대로 사용했습니다.

 

 

 

게시판스킨의 read.html 파일에 아래 스크립트를 상단에 추가해 줍니다.

 

<script>
jQuery(function($){
$(".btTop_head").hide();
$(window).scroll(function () {
  if($(window).scrollTop() > 100) {
   $('.btTop_head').show();
  } else {
   $('.btTop_head').hide();
  }
 });
});
</script>

 

 

CSS파일에 추가합니다.

.btTop_head    {display: block; position: fixed; top:0px; z-index: 150;height:50px;background-color:#fff;border-bottom:1px solid #eaeaea;width: 100%;}

 

 

 

그리고 노출시키고 싶은 내용을  btTop_head 클래스를 사용한 div 박스에 작성합니다.

 

<div class="btTop_head" style="display:none;">

상단에 표현하고 싶은 각종 내용들

</div>

  • ?
    아우 2018.04.16 16:07:58

    분명 강아지 사진일텐데 모자이크가 있으니... 

     

    요즘 일상생활이 불가능하네요....

  • ?
    mospia 2018.04.16 16:17:37

    반대로 처음에는 보였다가 스크롤 내리면 사라지고 하단 550부터 안보이게 하는방식도 추가해봅니다!

    실제 사용하는 코드부분ㅎ
    (function($){
    $(function(){
    $(window).scroll(function () {
    var height = $(document).scrollTop();
    if(height <= 50)
    {
    $('.hide').show();
    }
    else if($(window).scrollTop() >= $(document).height() - $(window).height() -550)
    {
    $('.hide').show();
    }

    else{
    $('.hide').hide();
    }
    });
    })
    })(jQuery);

     

    해당내용을 scroll.js 파일로 만드시고 layout.html 파일에서 <load target="./js/scroll.js"/> 해주시면됩니다.

  • profile
    웹지기 2018.04.16 18:27:33
    검색을 해보니 특정 엘리먼트의 위치의 값을 확인할 수 있어서..

    <script>
    jQuery(function($){
    var element_position = $('#cmtReload').offset().top;
    $(".btTop_head").hide();
    $(window).scroll(function () {
    if($(window).scrollTop() > 100 && $(window).scrollTop() < element_position ) {
    $('.btTop_head').show();
    } else {
    $('.btTop_head').hide();
    }
    });
    });
    </script>

    id #cmtReload 를 가진 댓글 새로고침 부분에서 사라지게 처리 했습니다.

    본문,댓글 영역을 지나가면 이후 목록부분으로가는데 거기는 게시글 본문을 이탈해서 다음 글을 읽으러 가는 단계라 사라지게 해도 될 것 같아 정확한 포지션을 정하기 위해 특정 엘리먼트의 위치값을 이용했습니다.
  • profile
    보고하비 2018.04.16 21:36:12
    전 댓글로 작성해주신 스트립트 넣으면 전혀 동작을 안하는것 같습니다.
  • profile
    웹지기 2018.04.16 21:46:52
    #cmtReload 는 예시 입니다.
    마땅한 엘리먼트가 없으면 댓글 뒤쪽에 하나 만드세요.
  • profile
    보고하비 2018.04.16 21:56:22
    아 알겠습니다.
  • profile
    보고하비 2018.04.16 19:16:44
    팁! 올려주셔서 감사합니다.
  • profile
    보고하비 2018.04.16 19:52:22
    버튼 하나만 예시로 알려주실수 있을까요?
  • profile
    웹지기 2018.04.16 19:59:45

    버튼을 좌측부터 순서적으로 나열하는 것은 그냥 버튼을 나열하면 되니 쉽습니다.
    그런데 좌,우측 분리를 하려면

    div 2개를 좌측,우측으로 세팅하는 것을 우선 알아보셔야 할 것 같구요.

    저 같은 경우는
    <div> // width 값을 100% 로 지정했습니다.
    <왼쪽 div> // float:left 를 지정했습니다.
    <li><button>글쓴이구독</button></li>
    .
    .
    < /왼쪽 div>
    <오른쪽 div> // float:right 를 지정했습니다.
    <li><a></a></li>
    .
    .
    </오른쪽 div>
    <div>


    디자인 하는게 쉽지는 않을테니 검색을 하셔서 하시거나 다른 전문가분의 도움을 받으셔야 할 것 같아요.

    1
  • profile
    보고하비 2018.04.16 20:07:32
    친절한 답변 감사드립니다. 오늘밤 이것 작업 해봐야 겠어요 ^^
  • profile
    웹지기 2018.04.16 20:04:37
    첫번째 구독버튼 저희 코드입니다.
    <li class="topli" style="margin-left:15px;"><button class="topli_button" onclick="mfNowClickSrl={$oDocument->get('member_srl')};userFollowAdd();return false;"><span class="topelement top_<!--@if(in_array((string)$s_target_srl ,$mf_follows))-->pink<!--@else-->yellow<!--@end-->" <!--@if(in_array((string)$s_target_srl ,$mf_follows))-->style="color:#fff;"<!--@end-->><i class="fa fa-user-plus"></i>팔로우</span><!--@if($writerFollowerCount>0)--><span class="p_number3" style="border:1px solid;background-color:#000 !important;">{$writerFollowerCount}</span><!--@end--></button></li>


    보시면 css에 작성하기 귀찮아서 엘리먼트에 style로 지정한게 있구요.
    class가 지정된건 css에서 디자인이 된것 입니다.

    그리고 로그인한 사람의 구독자인지 구분하는 코드는 이미 예전에 같은 파일 상단쪽에 해 놓으셨다면 이 코드를 이용하시면 내가 구독한 사람의 경우는 다르게 클래스를 부여하는 것을 공부하실 수 있습니다.
    1
  • profile
    보고하비 2018.04.16 21:34:30
    팁 알려주셔서 겨우 팔로우 버튼은 넣어 봤네요 ㅋ
  • profile
    보통만 2018.04.16 23:23:09
    알못이라 걱정이 크지만 더듬거리며 쫓아가보겠습니다. :)

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