[Blogger] 구글 블로그 페이징 처리하는법 3 : 버그 해결 법 2~블로거 페이지리스트 만드는 방법3~ (설정 스크롤링 이벤트)_page list scrolling indie_-How to handle google blog paging-++
+ 구글 블로그 페이징 처리하는법 1 : 블로그에 페이징 처리 적용
https://rockbottomdevbus.blogspot.com/2022/01/blogger-1-1-page-list-how-to-handle.html
+ 구글 블로그 페이징 처리하는법 2 : 페이징 처리 시 버그(문제점 해결) 1
https://rockbottomdevbus.blogspot.com/2022/01/blogger-2-2-page-list-scrolling-indie.html
+ 구글 블로그 페이징 처리하는법 3 : 페이징 처리 시 버그(문제점 해결) 2
- 구글 블로그 페이징 처리하는법 2 대로 진행을 하였으나 해상도가 변경되면 (모바일 버전에서 확인 할 경우) 메뉴 버튼(현재 블로그에 적용된 메뉴)이 작동하지 않는 현상 발생하였다.
1. 기존에 제대로 작동하던 기능 분석 : 크롬 개발자 도구(F12)를 통해 해상도 변경 시 적용되는 이벤트를 확인하여 스타일 변경되는지 확인 및 메모
2. 헤더 아래에 제이쿼리 cdn 및 스크립트 / 도큐먼트 레디 추가
<script src='http://code.jquery.com/jquery-latest.min.js'/>
<script type='text/javascript'>
$( document ).ready(function() {
});
</script>
3. 메뉴 버튼에 id 혹은 class 부여
4. 추가한 스크립트 도큐먼트 레디 아래에 1번에서 메모한 스타일을 적용
- 메뉴 버튼 클릭 시 클래스 부여 혹은 클래스 제거
$('#onclick_menu_var').on('click', function() {
if ($('body').hasClass('sidebar-visible')) {
$('body').removeClass('sidebar-visible');
} else {
$('body').addClass('sidebar-visible');
}
if ($('aside').hasClass('sidebar-invisible')) {
$('aside').removeClass('sidebar-invisible');
} else {
$('aside').addClass('sidebar-invisible');
}
if ($('.dim-overlay').hasClass('hidden')) {
$('.dim-overlay').removeClass('hidden');
} else {
$('.dim-overlay').addClass('hidden');
}
});
5. class가 dim-overlay인 div는 찾지 못하여 아래 태그 사진과 같이 적용
<div class='dim-overlay hidden'/>
* 주의 사항 해당태그의 적용 위치 : 위치가 잘못될 경우 블로거 관리자 레이아웃 페이지가 작동안하는 일이 생겼었음.
- 트리 메뉴 가젯이 적용된 위 근방에 적용
* 위치 참고
<b:includable id='userProfileText'>
<dd class='profile-textblock profile-snippet snippet-container r-snippet-container'>
<!-- 22.01.26 메뉴버튼 작동시 딤처리되지않아 딤처리 태그 직접삽입-->
<div class='dim-overlay hidden'/>
<div class='snippet-item r-snippetized'>
6. 메뉴 버튼 선택 시 정상적으로 메뉴바가 노출(작동)되고 되돌아가기 버튼이 노출되었지만
되돌아가기 기능이 작동하지않음.
7. 되돌아가기 버튼에 대하여 1번부터 3번까지 참고 후 4번에 적용한 내용 아래 부분에
아래 소스 추가
$('#onclick_menu_var_backArow').on('click', function() {
if ($('body').hasClass('sidebar-visible')) {
$('body').removeClass('sidebar-visible');
} else {
$('body').addClass('sidebar-visible');
}
if ($('aside').hasClass('sidebar-invisible')) {
$('aside').removeClass('sidebar-invisible');
} else {
$('aside').addClass('sidebar-invisible');
}
if ($('.dim-overlay').hasClass('hidden')) {
$('.dim-overlay').removeClass('hidden');
} else {
$('.dim-overlay').addClass('hidden');
}
});
8. 그외 자잘한 스타일을 조정해줌 페이징 처리 적용 후 버그 제거완료.
9. 다음편 예고
- 페이지 리스트 스타일 변경
댓글
댓글 쓰기