사이트 왼쪽에 하단에 리모콘이 나오네요... 무척 좋은 기능인 듯하네요
본문
http://www.dealbada.com/bbs/board.php?bo_table=gal_free&wr_id=50006&page=1
홈에서는 왼쪽하단에 리모콘이 나오지 않다가..
게시글 view화면
스크롤을 하면 아래와 같이 화면 왼쪽 하단에...
리모콘이 나오네요~~
정말 제대로된 리모콘 기능이네요
위로, 댓글, 목록, 페이지 넘김...
이런건 어떻게 구할까요??
답변 1
해당부분 소스보기로 가져오셔서 tail.php 파일에 넣으시고 링크부분 수정하시면 될꺼에요...
게시판 뷰페이지에서만 나오게 처리하시고요.
[ex]
<?php if($wr_id){?>
<style>
#remotecon {
position: fixed;
margin-left: -605px;
width: 80px;
z-index: 10;
border: 1px solid #c8d0d7;
background: #fff;
}
#remotecon h3 {
padding: 4px 6px;
text-align: center;
border-bottom: 1px solid #c8d0d7;
background: #f2f5f9;
}
#remotecon .row {
padding: 4px 0;
text-align: center;
line-height: 13px;
border-bottom: 1px solid #c8d0d7;
}
#remotecon .row a {
color: inherit;
outline: none;
text-decoration: none !important;
}
#remotecon img.norm {
height: 25px;
}
#remotecon img.small {
height: 20px;
}
#remotecon .btn_b01 {
padding: 0px;
}
</style>
<div id="remotecon">
<h3 class="">리모컨</h3>
<div class="row">
<span><a href="<?php echo $prev_href ?>" class="btn_b01">
<img class="norm" src="http://cdn.dealbada.com/data/img/prev.png" />
</a></span>
<span><a href="<?php echo $next_href ?>" class="btn_b01">
<img class="norm" src="http://cdn.dealbada.com/data/img/next.png" />
</a></span>
</div>
<div class="row">
<a href="#hd"><img class="small" src="http://cdn.dealbada.com/data/img/top.png" /><span>맨위로</span></a>
</div>
<div class="row">
<a href="#bo_vc"><img class="small" src="http://cdn.dealbada.com/data/img/comment.png" /><span> 댓 글 </span></a>
</div>
<div class="row">
<a href="<?php echo $list_href ?>">
<img class="small" src="http://cdn.dealbada.com/data/img/list.png" /><span> 목 록 </span>
</a>
</div>
</div>
<script>
(function($) {
// https://css-tricks.com/snippets/jquery/draggable-without-jquery-ui/#article-header-id-1
$.fn.drags = function(opt) {
opt = $.extend({handle:"",cursor:"move"}, opt);
if(opt.handle === "") {
var $el = this;
} else {
var $el = this.find(opt.handle);
}
return $el.css('cursor', opt.cursor).on("mousedown", function(e) {
$(this).css('bottom', "");
if(opt.handle === "") {
var $drag = $(this).addClass('draggable');
} else {
var $drag = $(this).addClass('active-handle').parent().addClass('draggable');
}
var z_idx = $drag.css('z-index'),
drg_h = $drag.outerHeight(),
drg_w = $drag.outerWidth(),
pos_y = $drag.offset().top + drg_h - e.pageY,
pos_x = $drag.offset().left + drg_w - e.pageX;
$drag.css('z-index', 1000).parents().on("mousemove", function(e) {
$('.draggable').offset({
top:e.pageY + pos_y - drg_h,
left:e.pageX + pos_x - drg_w
}).on("mouseup", function() {
$(this).removeClass('draggable').css('z-index', z_idx);
});
});
e.preventDefault(); // disable selection
}).on("mouseup", function() {
if(opt.handle === "") {
var top = $(this).css("top");
var left = $(this).css("left");
localStorage.setItem("remotecon", top + ":" + left);
$(this).removeClass('draggable');
} else {
$(this).removeClass('active-handle').parent().removeClass('draggable');
}
});
}
})(jQuery);
$(function() {
var remotecon = $("#remotecon");
var loc = localStorage.getItem("remotecon");
var top, left;
if(loc) {
var locs = loc.split(":");
top = locs[0];
left = locs[1];
} else {
var browserHeight = window.innerHeight || document.body.clientHeight;
top = (browserHeight - remotecon.height() - 40) + "px";
left = "50%";
}
remotecon.css("top", top);
remotecon.css("left", left);
remotecon.drags();
});
</script>
<?php }?>
답변을 작성하시기 전에 로그인 해주세요.