그누보드5 주소복사 버튼 설치하기
컨텐츠 정보
- 16,401 조회
- 20 댓글
- 2 추천
- 목록
본문
1. JS 파일 다운받기
https://github.com/zenorocha/clipboard.js/tree/master/dist
위 링크 또는 (https://github.com/zenorocha/clipboard.js/archive/master.zip) 이 파일에서
clipboard.min.js 파일을 다운받습니다.
그리고 적절한 폴더에 올립니다. 예를들어 /js 폴더에 올립니다.
2. 게시판 뷰스킨에 해당내용 추가하기
저는 Basic-Board를 사용 중이라서 해당 스킨에 적용하는 방법을 적어보겠습니다.
/skin/board/Basic-Board/view/basic/view.skin.php
에 들어가서 최상단에 밑의 내용을 넣습니다.
<!--클립보드 JS 및 스타일 설정 시작-->
<script src="../js/clipboard.min.js"></script>
<script>
var clipboard = new Clipboard('.btn-clipboard', {
text: function() {
return 'http://<?php echo $_SERVER[HTTP_HOST].$_SERVER[REQUEST_URI]; ?>';
}
});
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
</script>
<style>
button.btn-clipboard {display:inline-block;margin:0;padding:7px;line-height:12px;border:1px solid #ccc;background:#FFFFFF;color:#000;text-decoration:none}
button.btn-clipboard:focus, button.btn-clipboard:hover {color:#FF0000;}
</style>
<!--클립보드 JS 및 스타일 설정 끝-->
스타일은 원하시는대로 넣으시면 됩니다. 그냥 예시로 넣었으니 참고하시구요.
js 파일 위치 확인하시고요.
참고로 짧은 주소 사용하시는 분은 주소 부분에
return '<?php echo G5_URL."/".$bo_table."/".$view['wr_id'];?>';
위와 같이 넣으면 됩니다.
3. 주소복사 버튼 설치하기
이제 주소복사 버튼을 넣는 방법입니다. 실제로 원하는 위치에 넣으면 됩니다.
저는 스크랩 신고 버튼 왼쪽에 넣어줬습니다. 부트스트랩 코드가 들어가서 부트스트랩 쓰시는 분들은 편하게 쓰실 수 있을겁니다.
<?php if(G5_IS_MOBILE) {?>
<button class="btn-clipboard cursor at-tip" data-toggle="tooltip" data-trigger="hover" data-placement="top" data-original-title="주소가 복사되었습니다.">주소복사</button>
<?php } ?>
<?php if(!G5_IS_MOBILE) {?>
<button class="btn-clipboard cursor at-tip" data-toggle="tooltip" data-trigger="click focus" data-placement="top" data-original-title="주소가 복사되었습니다.">주소복사</button>
<?php } ?>
위 내용만 넣으면 끝입니다. 이미지를 넣어도 되고요. 전 글자가 제일 무난한 것 같아서 글자를 넣었습니다.
내용을 살펴보면 모바일과 PC의 툴팁관련 코드가 다릅니다. 이건 한번 테스트 해보시면 될 듯 하네요.
4. 현재 홈페이지 적용 사항
뷰스킨 파일에서
최상단에
<!--클립보드 JS 및 스타일 설정 시작-->
<script src="../js/clipboard.min.js"></script>
<script>
var clipboard = new Clipboard('.btn-clipboard-subject', {
text: function() {
return '<?php echo G5_URL."/".$bo_table."/".$view['wr_id'];?>';
}
});
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
</script>
<style>
button.btn-clipboard-subject {display:inline-block;margin:0;padding:5px 7px;line-height:12px;border:0px solid #ccc;background:#FFFFFF;color:#555;text-decoration:none}
button.btn-clipboard-subject:focus, button.btn-clipboard-subject:hover {color:#000}
</style>
<!--클립보드 JS 및 스타일 설정 끝-->
위 코드를 넣어서 자바스크립트와 스타일을 잡아줬구요.
<?php
if($attach_list) {
echo '<div class="list-group'.$view_font.'">'.$attach_list.'</div>'.PHP_EOL;
}
?>
위 내용 바로 위에
<?php if(G5_IS_MOBILE) {?>
<div class="list-group-item break-word" style="padding:5px 8px; border-width:0px 0px 1px 0px;">
<button class="btn-clipboard-subject cursor at-tip" data-toggle="tooltip" data-trigger="hover" data-placement="top" data-original-title="주소가 복사되었습니다."><i class="fa fa-share-alt"></i> 주소복사 : <?php echo G5_URL."/".$bo_table."/".$view['wr_id'];?></button></div>
<?php } ?>
<?php if(!G5_IS_MOBILE) {?>
<div class="list-group-item break-word" style="padding:5px 8px; border-width:0px 0px 1px 0px;">
<button class="btn-clipboard-subject cursor at-tip" data-toggle="tooltip" data-trigger="click focus" data-placement="right" data-original-title="주소가 복사되었습니다."><i class="fa fa-share-alt"></i> 주소복사 : <?php echo G5_URL."/".$bo_table."/".$view['wr_id'];?></button></div>
<?php } ?>
위 내용을 넣어서 클립보드 위치를 상단에 위치시켰습니다.
모바일에서도 잘 되고 PC에서도 당연히 잘 되고요.
이상 소스를 제공해주신 사과님과 Tail 님에게 감사의 인사 드립니다.
-
등록일 2020.10.10그누보드 SMTP 외부메일 설정하는 방법댓글 26
-
등록일 2020.10.03그누보드5에 실시간 채팅 구축하기댓글 13
-
등록일 2020.09.26
-
등록일 2020.09.24도커로 메일서버 구축하기댓글 4
관련자료
-
서명우성짱의 NAS를 운영하고 있습니다.
저의 즐거움이 여러분의 즐거움이면 좋겠습니다.
-
링크
