<!--색상정보-->
<div class="info_color">
   <span class="info_data">
      색상 구성 : {$oDocument->getExtraValueHTML(5)}
   </span>
   <span class="btn-moreInfo">[색상 더보기]</span>
</div>
   <style>
      .info_color{overflow:hidden;}
      .info_color .info_data.hidden{
         white-space:nowrap;
         word-wrap:normal;
         width:90%;
         overflow:hidden;
         text-overflow: ellipsis;
         float:left;
         
      }
      
      .btn-moreInfo{display:none;white-space:nowrap;float:right;}
      
      @media screen and (max-width: 533px){
         .info_color .info_data.hidden{
            width:75%;
         }
      }
   </style>
   <script>
      jQuery(function ($) {
         var colorbox = $('.info_color .info_data');
         colorbox.each( function() {
            $( this ).outerHeight();
            if( $(this).outerHeight() > 21 ){
               $(this).addClass('hidden');
               var btnMoreCmt = $(this).siblings('.btn-moreInfo');
               btnMoreCmt.show();
               btnMoreCmt.on("click",function(){
                  $(this).siblings('.info_data').removeClass('hidden');
                  $(this).remove();
               });
            }
         } );
      });
   </script>

시간 나면 애드온으로도 만들겠지만 먼저 소스부터 공유합니다.

댓글이나 기타 정보가 2줄 이상일 경우 한줄로 하고, 더보기 버튼을 보여줬다가 클릭하면 나타나는 소스입니다.

이온디

profile
이온디는 라이믹스를 비롯한 다양한 CMS의 시드뱅크를 꿈꿉니다. 여러분들이 사랑하는 웹소스를 언제든지 사용할 수 있게 하기 위해 이온디는 매일 소스코드를 유지보수하고 있으며, 언제든지 다운로드할 수 있는 소스마켓을 운영하고 있습니다.

#XE마켓 - 이온디스토어
https://eond.com/xemarket/

# XE/라이믹스 단톡방을 운영 중입니다. (비번: 2022)
https://open.kakao.com/o/giaKKnl

# XE/라이믹스 생활코딩 모듈 강좌입니다.
https://opentutorials.org/module/3774
  • profile

    yes

  • ?

    필요했던 팁인데 감사 말씀드립니다.
    현재 소스는 지정한 글자수 만큼 보여지는 게 맞죠?

    댓글내에 텍스트와 이미지가 함께 있는 경우 텍스트는 줄여보여지는데 이미지는 그대로 노출이 되는데요.
    혹시 전체 댓글 영역에서 보여지는 영역을 특정세로크기로 지정해서 보여 줄 수도 있을까요?
    ( 예: 전체 댓글영역 중 세로로 40px 영역만 보여주고 더보기를 눌러 전체영역이 보여지는... )

     

    111.JPEG

  • ? profile
    네 작업 가능할거같아요
  • ? profile
    .hiddenComment img{
    display: block;
    width: 120px;
    border-radius: 2px;
    }

    css에 이 정도만 추가해줘도 될 듯 합니다.
  • ?

    이온디님의 소스에 마트몬님의 질문에 답변을 달아봅니다.(이온디님의 공유에 한숟가락 걸칩니다^.^)

    그리고 설정에서 펼치는 메뉴 출력설정과 라인수를 지정할 수 있게 수정했습니다.

     

    skin.xml 설정에 추가

    <var name="cmt_line_use" type="radio">
    <title xml:lang="ko">댓글 한줄 출력</title>
    <description xml:lang="ko">댓글이 2줄 이상일때 펼쳐보기 메뉴 출력</description>
    <options value="">
    <title xml:lang="ko">미출력(기본)</title>
    </options>
    <options value="Y">
    <title xml:lang="ko">출력</title>
    </options>
    </var>
    <var name="cmt_line_no" type="text">
    <title xml:lang="ko"> ┖ 댓글 출력 라인수</title>
    <description xml:lang="ko">댓글 출력 라인수(기본 1줄)</description>
    </var>
    <var name="cmt_line_h" type="text">
    <title xml:lang="ko"> ┖ 댓글 출력 칸높이</title>
    <description xml:lang="ko">댓글 출력 각 칸의 높이를 지정합니다. (기본 1.5em)</description>
    </var>

     

    _comment.html에 추가

    <div class="commentbox">
    {$comment->getContent(false)}
    <div cond="$mi->cmt_line_use=='Y'" class="btn-moreComment sbtn_small sbtn-gray">
    <i class="fas fa-angle-double-down"></i> 펼쳐 보기</div>
    </div>
    <block cond="!$mi->cmt_line_no">{@ $mi->cmt_line_no = '1'}</block>
    <block cond="!$mi->cmt_line_h">{@ $mi->cmt_line_h = '1.5'}</block>
    <style>
    .commentbox{ overflow:hidden; }
    .commentbox .xe_content{ margin-top:0px; }
    .commentbox .xe_content.hiddenComment p,
    .commentbox .xe_content.hiddenComment{
    float:left;
    width:84%;
    overflow:hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp:{$mi->cmt_line_no};
    -webkit-box-orient: vertical;
    word-wrap:break-word;
    line-height:{$mi->cmt_line_h}em;
    height: {$mi->cmt_line_h*$mi->cmt_line_no}em;
    }
    .commentbox .xe_content.hiddenComment p{ width:100%; }
    .btn-moreComment{ 
    display:none;white-space:nowrap;float:right;margin-top:5px; 
    }
    @media screen and (max-width: 533px){
    .commentbox .xe_content.hiddenComment{ width:75%; }
    }
    </style>
    <script cond="$mi->cmt_line_use=='Y'" >
    jQuery(function ($) {
    var commentbox = $('.commentbox .xe_content');
    commentbox.each( function() {
    $( this ).outerHeight();
    if( $(this).outerHeight() > 21 ){
    $(this).addClass('hiddenComment');
    var btnMoreCmt = $(this).siblings('.btn-moreComment');
    btnMoreCmt.show();
    btnMoreCmt.on("click",function(){
    $(this).siblings('.xe_content').removeClass('hiddenComment');
    $(this).remove();
    });
    }
    } );
    });
    </script>

    sbtn_small sbtn-gray부분은 

    https://bit.ly/2OHNnan 에서  Sexy Button을 사용했습니다.

  • ? ?

    앗 진심 감사말씀드립니다. ^^

    바로 적용 해보겠습니다.

  • ? ?
    원본 _comment.html
    <!--@if(!$comment->isAccessible())-->
    <form action="/" method="get" class="xe_content" onsubmit="return procFilter(this, input_password)">
    <p><label for="cpw_{$comment->comment_srl}">{$lang->msg_is_secret} {$lang->msg_input_password}</label></p>
    <p><input type="password" name="password" id="cpw_{$comment->comment_srl}" class="iText" /><span class="btn"><input type="submit" value="{$lang->cmd_input}" /></span></p>
    <input type="hidden" name="mid" value="{$mid}" />
    <input type="hidden" name="page" value="{$page}" />
    <input type="hidden" name="document_srl" value="{$comment->get('document_srl')}" />
    <input type="hidden" name="comment_srl" value="{$comment->get('comment_srl')}" />
    </form>
    <!--@else-->
           {$comment->getContent(false)}
    <!--@end-->

     

    [ 수정 후 ]

     <div class="commentbox">
    {$comment->getContent(false)}
    <div cond="$mi->cmt_line_use=='Y'" class="btn-moreComment sbtn_small sbtn-gray">
    <i class="fas fa-angle-double-down"></i> 펼쳐 보기</div>
    </div>
    <block cond="!$mi->cmt_line_no">{@ $mi->cmt_line_no = '1'}</block>
    <block cond="!$mi->cmt_line_h">{@ $mi->cmt_line_h = '1.5'}</block>
    <style>
    .commentbox{ overflow:hidden; }
    .commentbox .xe_content{ margin-top:0px; }
    .commentbox .xe_content.hiddenComment p,
    .commentbox .xe_content.hiddenComment{
    float:left;
    width:84%;
    overflow:hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp:{$mi->cmt_line_no};
    -webkit-box-orient: vertical;
    word-wrap:break-word;
    line-height:{$mi->cmt_line_h}em;
    height: {$mi->cmt_line_h*$mi->cmt_line_no}em;
    }
    .commentbox .xe_content.hiddenComment p{ width:100%; }
    .btn-moreComment{ 
    display:none;white-space:nowrap;float:right;margin-top:5px; 
    }
    @media screen and (max-width: 533px){
    .commentbox .xe_content.hiddenComment{ width:75%; }
    }
    </style>
    <script cond="$mi->cmt_line_use=='Y'" >
    jQuery(function ($) {
    var commentbox = $('.commentbox .xe_content');
    commentbox.each( function() {
    $( this ).outerHeight();
    if( $(this).outerHeight() > 21 ){
    $(this).addClass('hiddenComment');
    var btnMoreCmt = $(this).siblings('.btn-moreComment');
    btnMoreCmt.show();
    btnMoreCmt.on("click",function(){
    $(this).siblings('.xe_content').removeClass('hiddenComment');
    $(this).remove();
    });
    }
    } );
    });
    </script>

     

    [ 설정 페이지 ]

    1111.JPEG

     

    후 테스트를 해보면  " 펼쳐보기 " 영역이 보이질 않고 댓글 내용이 그대로 출력됩니다.

     

    말씀 해주신 소스에서 cond 관련 부분을 없애고 테스트를 해 보면

    <div cond="$mi->cmt_line_use=='Y'" class="btn-moreComment sbtn_small sbtn-gray">

    ...

    <block cond="!$mi->cmt_line_no">{@ $mi->cmt_line_no = '1'}</block>
    <block cond="!$mi->cmt_line_h">{@ $mi->cmt_line_h = '1.5'}</block>
     

    ...

    <script cond="$mi->cmt_line_use=='Y'" >

    ....

     

    http://tqooktest.cafe24.com/index.php?mid=seoul&document_srl=2027&read_review_tab=evaluation&comment_srl=216152

     

    에서 보시는 것처럼 펼처보기는 정상작동이 되는데 한줄 부분이 출력이 안되는 데 혹시 도움 말씀 좀 받을 수 있을까요?

    위 링크 비회원도 댓글 입력이 가능합니다.

     

     

    Atachment
    첨부
  • ? ?
    https://bit.ly/2TcE71e
    댓글 보시면 저도 어떤 댓글은 첫줄이 보이고 어떤 댓글은 안 보이고 하더라구요.
    이리 저리 테스트해 봐도 특별한 규칙을 찾지를 못하겠더라구요.ㅠㅠ
    그리고 참고로 if( $(this).outerHeight() > 21 ){ 부분에서 숫자를 약간씩 변경해서 테스트해 보세요.
    근데 정답은 아님^.^
  • ? profile
    예쁘게 만드셨네요 ㅎ
  • ? ?

    익스에서는 정상적으로 보이고
    크롬에서는 첫줄이 보이질 않는군요ㅠㅠ

     

    근데 이 코드 사용하면 댓글마다 css와 script를 불러와서 댓글이 많은 사이트의 경우 홈피에 영향을 줄 것 같습니다.

    재미삼아 적용은 해보지만 실제 사용은 좀 그렁군요ㅠㅠ 

  • ? ?

    말씀하신대로 크롬에서는 수치를 바꿔바도 한줄이 출력되지 않고 익스에서는 모든게 정상출력되더군요.

    모든 댓글마다 css와 스크립트를 불러온다면 아무래도 적용은 조언주신대로 하지 않는게 좋은것 같아서 좀 아까운 팁이지만 포기를 했습니다. ^^

  • ? profile
    레이아웃 자체에 넣던가 게시판 css,js에 통합하시면 됩니다
  • profile ?
    시간날때 다시 한번 천천히 도전해 보겠습니다.^^
  • ? profile
    나중에 애드온으로 만들어서 하던가 해야겠네요
  • ? ?
    display: -webkit-box;

    -webkit-box-orient: vertical;
    word-wrap:break-word;

    위의 코드 지우니까 잘 작동하네요.
    그리고 이온디님의 글처럼 style과 script를 상단으로 올려 버리니 한번만 불러오네요.
  • ? profile
    기본적인 거라 따로 설명은 안드렸습니다.
    css는 스킨 코드에 따라서 적당하게 사용하시면 됩니다
  • profile ?

    이온디님 한가지만 문의드려도 될까요?


    말씀 해 주신 소스로 테스트 시 줄바꿈을 하지 않은 경우는 한줄만 노출되고 자세히 보기 버튼 클릭 시 나며지 내용이 정상적으로 보여집니다.


    하지만 줄바꿈(엔터)를 치게되면 아래 이미지처럼 내용이 노출되어 버리는데 혹시 이온디님 만드신 곳에서 테스트를 해보시면 그러한 증상이 나타나지 않으신가요?

    111.JPEG

    2018-11-20 17,59,39.JPEG