로그인

검색

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
라이믹스로 커뮤니티 사이트를 운영하는 비개발자 운영자 입니다.
파트너쉽 맺으실 사이트 운영자분 환영합니다.
3 추천
Atachment
첨부 '0'

라이믹스 팁(112)

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

  1. read more
  2. read more
  3. Read More
  4. Read More
  5. Read More
  6. Read More
  7. Read More
  8. Read More
  9. Read More
  10. Read More
  11. Read More
  12. Read More
  13. Read More
  14. Read More
  15. Read More
  16. Read More
  17. Read More
  18. Read More
  19. Read More
  20. Read More
  21. 라이믹스 회원(팝업)메뉴에 아이콘 추가해주기 2

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

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

    Date2021.05.08 Category기능 Views796 Votes3
    Read More
  24. Read More
  25. 신규 회원 가입 사실만 메일로 전달 받고 싶을때

    Date2021.05.06 Category기능 Views230 Votes3
    Read More
  26. Read More
  27. Read More
  28. 스케치북5 스킨 검색어 하이라이트 효과 주기

    Date2021.05.02 Category기능 Views212 Votes3
    Read More
  29. 여태 몰랐던 라이믹스의 $document, $oDocument 게시글 정보

    Date2021.04.29 Category기타 Views386 Votes3
    Read More
  30. Read More
  31. 댓글 주소 클립보드에 복사하는 기능 추가하기 11

    Date2021.04.25 Category기능 Views249 Votes3
    Read More
  32. Read More
Prev 1 2 3 4 Next
/ 4