2줄 이상일 경우 감추었다가 더보기 하면 나타나는 자바스크립트

2018.11.14 00:45

9,271

<!--색상정보-->
<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줄 이상일 경우 한줄로 하고, 더보기 버튼을 보여줬다가 클릭하면 나타나는 소스입니다.

eond Lv. 13

# 라이믹스 스킨 제작은 어디? >>>> XE 레이아웃, 라이믹스 스킨제작은 이온디에서 커스터마이징해드립니다.
# 빠른 라이믹스 커뮤니티용 호스팅을 찾고 계신가요? >>>> 이온디호스팅 서비스는 PHP8 & Redis 서버 캐시를 활용하여 라이믹스에 최적화된 호스팅 서비스를 제공해드립니다. (서버세팅시 웹패널, 내도메인메일서비스도 함께 구축해드립니다.)
https://eond.com

forest

2018.11.14 02:11 #1110849

추천 0
마트몬

2018.11.14 06:25 #1111087

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

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

추천 0
이온디

2018.11.14 07:12 #1111110

네 작업 가능할거같아요

추천 0
이온디

2018.11.15 02:23 #1111510

.hiddenComment img{
display: block;
width: 120px;
border-radius: 2px;
}

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

추천 0
미이라

2018.11.14 10:30 #1111163

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

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

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을 사용했습니다.

추천 1
마트몬

2018.11.15 01:54 #1111491

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

바로 적용 해보겠습니다.

추천 0
마트몬

2018.11.15 02:41 #1111513

원본 _comment.html


<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>

{$comment->getContent(false)}


[ 수정 후 ]

<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>

[ 설정 페이지 ]

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

말씀 해주신 소스에서 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

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

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

추천 0
미이라

2018.11.15 03:55 #1111546

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

추천 0
이온디

2018.11.15 03:57 #1111550

예쁘게 만드셨네요 ㅎ

추천 0
미이라

2018.11.15 04:34 #1111574

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

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

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

추천 0
마트몬

2018.11.15 05:18 #1111588

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

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

추천 0
이온디

2018.11.15 06:13 #1111634

레이아웃 자체에 넣던가 게시판 css,js에 통합하시면 됩니다

추천 0
마트몬

2018.11.15 06:30 #1111650

시간날때 다시 한번 천천히 도전해 보겠습니다.^^

추천 0
이온디

2018.11.15 06:32 #1111657

나중에 애드온으로 만들어서 하던가 해야겠네요

추천 1
마트몬

2018.11.20 09:00 #1114254

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

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

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

추천 0
미이라

2018.11.15 09:34 #1111807

display: -webkit-box;

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

위의 코드 지우니까 잘 작동하네요.
그리고 이온디님의 글처럼 style과 script를 상단으로 올려 버리니 한번만 불러오네요.

추천 0
이온디

2018.11.15 10:31 #1111819

기본적인 거라 따로 설명은 안드렸습니다.
css는 스킨 코드에 따라서 적당하게 사용하시면 됩니다

추천 0