Q&A

위젯접기가 가능 할까요?

2019.05.16 10:18
578
0
CMS/프레임워크 Rhymix 1.9
개발 언어 PHP 7.3

모바일에서 인기글을 출력하려는 용도인데 인기글 목록 위젯에 5개가 있다면 1개만 노출하고 펼침하면 다보이게 하고싶습다

1.xxxxxx      열기

 

 

열기누를시

1. Xxxxxxx.       닫기

2. Xxxxxxx

3. Xxxxxxx

4. Xxxxxxx

5. Xxxxxxx

스포 Lv. 5

댓글 9

  • 2019.05.16 10:37 #1219631
    가능하죠. css를 이용해 첫 행만 노출하도록 하고, js를 이용해 열기/닫기 링크 클릭으로 나머지행의 display를 바꿔주면 됩니다.
  • 2019.05.16 11:00 #1219654
    위젯 자체를 수정해야 할까요? 아니면 홈페이지 레이아웃상 css, js 수정으로만 가능 할까요?
  • 2019.05.16 11:27 #1219662
    위젯스킨을 수정하시면 될 겁니다 :)
  • 2019.05.16 13:26 #1219673
    감사합니다~
  • 2019.05.16 12:50 #1219667
    위젯코드 잘보면 위젯별로 클라스명1, 클라스명2 이렇게 숫자를 먹이는게 쉬울겁니다.
    일단 목록의 li를 display:none 처리하신 다음에 클라스명1{display:block} 처리하셔서 한줄만 보이게 한 다음에
    열기 누르면 li를 감싸는 ul에 특정 클라스명이 붙게하고
    ul클라스명 li{display:block} 처리하시면 다 보일겁니다.
    닫기 하시려면 다시 ul에서 클라스명 가지고 가면 되고요.
  • 2019.05.16 13:28 #1219677
    지금 시도해보고 있습니다만 이해가 잘 가질 않습니다 예를들어 open 클래스로 위젯을 만들고 close 클래스로 위젯을 만들어서 close 클래스에서는 한줄만 보이게 하려고 close 클래서안에 있는 li 태그에 display:none 속성을 입혔는데 모든 목록이 보이지 않습니다 ㅠㅠ
  • 2019.05.16 14:21 #1219697

    css를 작성하실때

    .test_ul 이라는 클라스명의 li가 5개 까지 있고
    만약 li에 .test_li1 ~ .test_li5 까지 class명을 먹일 수 있다면(이 방법은 여러곳에 나올겁니다.)

    먼저 .test_ul li{display:none} 처리를 해서 .test_ul의 li들은 다 안보이게 합니다.
    그 후에 .test_ul li.test_li1{display:block} 처리를 해서 첫줄은 노출을 시키는거죠.

    이게 기본 형태이고

    열고닫기 버튼을 클릭할때 .test_ul에 test_on 이라는 클라스명이 붙고 지우게 만들어 둔 후
    .test_on li{display:block} 처리를 하면 클릭할때만 보이게 됩니다.

    이걸 css 파일에 순서대로 적으면

    .test_ul li{display:none}
    .test_ul li.test_li1{display:block}
    .test_on li{display:block}

    이런 형태가 될겁니다.
    css 규정에서 우선순을 두는 방식인데요.
    .test_ul li 보다는 .test_ul li.test_li1 이게 더 우선순을 가집니다.
    이유는 같은 ul에서 클라스명을 가지지만 앞순은 li로 그냥 모든 li에 대해 규정하지만 그 밑에는
    .test_ul li.test_li1이라고 li중에 test_li1을 특정시키기에 css에서는 이걸 더 우선으로 쳐 줍니다.

    그 다음이 .test_on li 과 .test_ul li은 같은 무게를 가진 규정입니다. ul에만 클라스명이 있고 li나 ul 상위에 따로 클라스명을 정해두지 않았기 때문에 같은 높이에 있다고 보시면 됩니다.

    같은 높이의 규정일때는 나중에 오는가 먼저 오는가에 따라 우선순이 달라집니다.
    나중에 나오는 규정을 더 높게 보다보니...
    .test_on li를 나중에 배치해서 test_on 이라는 클라스명이 있을때만 보이게 처리하는겁니다.

  • 2019.05.16 14:57 #1219711

    감사합니다 제가 제대로 해봤는지는 모르겠지만... 읽고 말씀대로 적용해보니 적용해보니 위젯의 형태는 남아있으면서 li만 안보이는 현상이 발생합니다 그래서 생각해본것이 위젯 제목영역에

    [1]게시글제목 ------- 열기/닫기

    열었을때는

    [2]게시글제목
    [3]게시글제목
    [4]게시글제목

    이런형태로 보여주려고 하는데

    <!--@foreach($wi->content_items as $key => $item)-->
    {@
    $x_date = strtotime($item->getRegDate('YmdHi'));
    $z_date = strtotime(zdate($item->get('last_update'),'YmdHi'));
    $new_atc = $x_date > $y_date; $updated = $z_date > $y_date;
    $time_calc = time() - $x_date;
    $length = mb_strlen(trim(preg_replace('/\s+/', ' ', strip_tags($item->getTitle()))), 'UTF-8');
    }

    여기서
    <!--@foreach($wi->content_items as $key => $item)--> 이값을 첫번째값만 보여주는거랑

    첫번째값을 제외하고 2번째 값부터 불러오는 부분에서 막혔는데 도움 받을수 있을까요

  • 2019.05.20 00:41 #1220535
    $length = mb_strlen(trim(preg_replace('/\s+/', ' ', strip_tags($item->getTitle()))), 'UTF-8');
    밑에 $i_dex = 1;
    추가하시고요
    그리고 class 명으로 되어있는부분에 {$i_dex}를 추가하셔요
    예를들어 class="test" 라되어있으면 class="test {$i_dex}" 이런식으로 추가하시면
    그리고 <!--@end--> 라고 되어있는 부분 전에 {@ i_dex++;} 추가해주시면

    출력될때 test 1, test 2, test 3 이런식으로 출력됩니다.
    이걸
    .test{display:none}
    .test.1{display:block}
    하시면 첫번째것만 보실수 있을거에요