블러거-모바일-에서-펼침글 구현하기
사이트별로 펼침금 기능을 달리 지원한다.
[방법1]
구글 blogger 사이트에서는
펼침글 기능을 이용하려면
본래 점프-브레이크 기능을 이용하라고 안내된다.
HTML 창에서 <!-- More --> 를 넣는 방식이다.
그러나 막상 해보면 안 된다.
펼침글 기능을 2개 이상 사용할 때도 지원하지 않는 것으로 보인다.
[방법2]
결국 별도 스크립트를 사용하게 된다.
종전에는 다음 스크립트를 사용했다.
<script language="JavaScript" type="text/javascript">
function layer_toggle(obj) {
if (obj.style.display=='none') obj.style.display = 'block';
else if (obj.style.display=='block') obj.style.display = 'none';
}
</script>
이 스크립트를 skin html 파일에서
</head> 앞 부분에 넣는 방식이다.
그리고 본문 페이지에서 다음 형태로 내용을 적는다.
<div style="display: block" id="more01a">
<a onclick="layer_toggle(document.getElementById('more01a'));
layer_toggle(document.getElementById('more01b')); return false;" href="#">
<p>
접힌 상태</p>
</a></div>
<div style="display: none" id="more01b">
<a onclick="layer_toggle(document.getElementById('more01a')); layer_toggle(document.getElementById('more01b')); return false;" href="#">
<p>
펼친 상태</p>
</a><p>
내용을 적습니다</p>
</div>
=> 그런데 이 방식은 모바일 환경에서는 작동하지 않는다.
이유를 알 수 없다.
=> 그리고 이 경우 편집창에서는
펼침글 부분의 내용이 보이지 않는다.
[방법3]
그래서 다시
모바일 환경에서도 지원가능한 방식을 찾게 된다.
다음 스크립트를 사용해본다.
이 역시 </head> 앞 부분에 넣으면 pc 에서는 된다.
그런데 모바일에서 여전히 안 된다.
그래서 페이지 맨 첫 부분에 넣는다.
<script> function fn_spread(id)
{ var getID = document.getElementById(id); getID.style.display=(getID.style.display=='block') ? 'none' : 'block'; }
</script>
그 다음 본문 페이지에서 펼침글 기능을 이용할 부분을
다음처럼 기재한다.
<button class="btn01" onclick="fn_spread('more1A');">▶더보기</button> <br />
<div class="example01" id="more1A" style="display: none;"><br />
내용1<br />
테스트<br />
<button class="btn01" onclick="fn_spread('more1A');">◀접기</button><br />
</div>
○ 두번째 펼침글 기능을 사용하려면 위 형태에서
more1A 부분을 다른 글자로 바꾸어 넣는다.
<button class="btn01" onclick="fn_spread('more2A');">▶더보기</button><br />
<div class="example01" id="more2A" style="display: none;"><br />
내용2<br />
테스트2<br />
<button class="btn01" onclick="fn_spread('more2A');">◀접기</button> <br />
</div>
위 스크립트와 함께 css 파일을 규정해 사용할 수 도 있다.
- 다만 생략해도 된다. -
[ CSS 파일 내용]
btn01, .btn02
{padding: 2px 4px 2px 4px; text-align: center; font-weight: 600; line-height: 1.4em;
box-shadow: 1px 1px 2px #333; border-radius: 15px;}
.btn01{background-color: #008DFF; color: #333;}
.btn02{background-color: #FF3E00; color: #fff;}
.example01{padding: 5px; text-align: center; border: 1px solid #008DFF;}
내용 참조 https://it-ing.tistory.com/53
=> 이 경우에도
펼침글 내용은
편집기 창에서 보이지 않는다.
편집기 창에서 보이지 않는다.
이는 결국 HTM 편집모드에서 편집해야 한다.
< 샘플 1> [방법3]- 이 경우는 모바일에서 작동 됨
HHHHHHHHHHHHHH
< 샘플 2> [방법2]- 이 경우는 모바일에서 작동 안됨
○ [pt op tr]
===== ○ [pt op tr]
● 블러거-모바일-에서-펼침글_구현하기 [문서정보] 페이지 키워드
[#M_▶더보기|◀접기|
[ 관련키워드 ]
[ 참조]
■ 본 페이지 ID 정보
SFXX--BT-블러거-모바일-에서-펼침글_구현하기
https://buddhism007.tistory.com/entry/#blog-post_10
SFXX--BT-블러거-모바일-에서-펼침글_구현하기.txt ☞
sfd8--기타_2564_06.txt ☞◆blog-post_10
불기2564-06-10
https://buddhism0077.blogspot.com/2020/06/blog-post_10.html#blog-post_10
htmback--BT-블러거-모바일-에서-펼침글_구현하기_불기2564-06-10-tis.htm
● [pt op tr] fr _M#]
댓글 없음:
댓글 쓰기
What do you think is the most important?
Do you know why this is the most important?