로그인

검색

Extra Form
추천지수 6

오늘 다른 곳에 적용하려고 특정 글자 색상을 바꾸는 것을 알아보다가 답변으로 얻은 소스로 스케치북5 스킨의 게시판 검색 결과의 제목의 검색어에 색상과 굵기 효과를 주는 것으로 적용해 보았습니다.

 

 

 

 

화면 캡처 2021-05-02 232100.png

 

요렇게 "게시판"으로 검색을 했을때 해당 검색어에 색상과 굵기 효과를 주는 팁입니다. 제목에만 효과를 주는 간단한 효과의 팁입니다.

 

 

사용하시는 스킨의 목록을 출력하는 파일을 수정해 주시면 됩니다. 저는 모바일형을 PC와 모바일 모두 사용할 수 있게 수정해서 사용중이라 _list_m.html 을 수정했습니다.

 

파일의 맨 하단에

 

<!--@if(Context::get('search_keyword'))-->
<script>
jQuery(function($){
$(document).ready(function(){
var target =$(".rt_area").find(">h3>a");
$(target).each(function() {
    $(this).html($(this).html().replace(/{Context::get('search_keyword')}/g, '<span class="highlight">{Context::get('search_keyword')}</span>'));
});
});
});
</script>
<!--@end-->

 

위와 같은 스크립트를 넣었습니다.

 

Context::get('search_keyword') 검색이 있을 경우만 스크립트가 작동되도록 조건이 걸려있습니다.

 

var target =$(".rt_area").find(">h3>a");

이부분은 목록에서 제목이 위치하는 경로를 잘 찾으셔야 합니다.

 

 

화면 캡처 2021-05-02 232304.png

 

저희가 var target =$(".rt_area").find(">h3>a"); 를 사용한 이유는 위 캡쳐로 보시면 이해가 되실 겁니다. 개발자도구로 보시면 확인할 수 있습니다.

 

 

그리고 class="highlight" 로 지정했기 때문에

css 파일(board.css)에 주고 싶은 효과를 추가합니다.

 

.highlight {color:#f28585;font-weight:bold;}

저는 위와 같이 효과를 주었습니다.

 

Who's 꿀팁관리소장

profile
라이믹스로 커뮤니티 사이트를 운영하는 비개발자 운영자 입니다.
파트너쉽 맺으실 사이트 운영자분 환영합니다.
0 추천
Atachment
첨부 '0'

라이믹스 팁(97)

라이믹스 운영과 사용에 관한 팁을 공유 합니다.

  1. read more
  2. read more
  3. Read More
  4. Read More
  5. 라이믹스 회원(팝업)메뉴에 아이콘 추가해주기

    Date2021.05.11 Category기능 Views108 Votes0
    Read More
  6. RXP FLEX 레이아웃의 다크모드 기능 게시판에 적용하기 4

    Date2021.05.09 Category기능 Views130 Votes0
    Read More
  7. 카카오지도 마커 위치로 카카오내비 길안내 연동하기

    Date2021.05.08 Category기능 Views124 Votes0
    Read More
  8. Read More
  9. 신규 회원 가입 사실만 메일로 전달 받고 싶을때

    Date2021.05.06 Category기능 Views85 Votes0
    Read More
  10. Read More
  11. Read More
  12. 스케치북5 스킨 검색어 하이라이트 효과 주기

    Date2021.05.02 Category기능 Views76 Votes0
    Read More
  13. Read More
  14. Read More
  15. 댓글 주소 클립보드에 복사하는 기능 추가하기 10

    Date2021.04.25 Category기능 Views72 Votes0
    Read More
  16. Read More
  17. Read More
  18. Read More
  19. 스케치북 빵조각 '메뉴 아이콘' 적용해 보았습니다.

    Date2021.04.21 Category기능 Views54 Votes0
    Read More
  20. Read More
  21. 본문 게시글 주소 복사 버튼 여러곳에 추가해 주기 17

    Date2021.04.10 Category기능 Views76 Votes0
    Read More
  22. input 입력창 크기가 작거나 이상한가요? css box-sizing

    Date2021.04.09 Category기타 Views67 Votes1
    Read More
  23. 본문 게시글 주소 클립보드 복사 기능 만들기 8

    Date2021.04.06 Category기능 Views145 Votes0
    Read More
  24. Read More
  25. 라이믹스 2.0 회원 서명 높이를 조절 하고 싶다면

    Date2021.03.13 Category기능 Views112 Votes0
    Read More
  26. Read More
  27. Read More
  28. Read More
  29. Read More
  30. Read More
  31. Flex 레이아웃 로그인 오류 메시지 안뜨는 문제 해결

    Date2021.01.31 Category오류 Views77 Votes0
    Read More
  32. Read More
Board Pagination Prev 1 2 3 4 Next
/ 4