자바스크립트 실행을 위아래 두번 나오게 할수 있을까요? 채택완료
제가 책장 넘기는 어떤 스크립트를 사용해서 페이지를 만들었는데요
페이지를 넘기는 버튼이 다음과 같이 아래에 있습니다.
내용내용내용
<nav>
<a id="bb-nav-prev" href="#" class="bb-custom-icon bb-custom-icon-arrow-left">Previous</a>
<a id="bb-nav-next" href="#" class="bb-custom-icon bb-custom-icon-arrow-right">Next</a>
</nav>
그리고 아래에는 다음과 같은 자바스크립트가 있습니다.
</p>
<p><script>
var Page = (function() {
var config = {
$bookBlock : $( '#bb-bookblock' ),
$navNext : $( '#bb-nav-next' ),
$navPrev : $( '#bb-nav-prev' ),
$navFirst : $( '#bb-nav-first' ),
$navLast : $( '#bb-nav-last' )
},
init = function() {
config.$bookBlock.bookblock( {
speed : 800,
shadowSides : 0.8,
shadowFlip : 0.7
} );
initEvents();
},
initEvents = function() {
var $slides = config.$bookBlock.children();</p>
<p> // add navigation events
config.$navNext.on( 'click touchstart', function() {
config.$bookBlock.bookblock( 'next' );
return false;
} );</p>
<p> config.$navPrev.on( 'click touchstart', function() {
config.$bookBlock.bookblock( 'prev' );
return false;
} );</p>
<p> config.$navFirst.on( 'click touchstart', function() {
config.$bookBlock.bookblock( 'first' );
return false;
} );</p>
<p> config.$navLast.on( 'click touchstart', function() {
config.$bookBlock.bookblock( 'last' );
return false;
} );
// add swipe events
$slides.on( {
'swipeleft' : function( event ) {
config.$bookBlock.bookblock( 'next' );
return false;
},
'swiperight' : function( event ) {
config.$bookBlock.bookblock( 'prev' );
return false;
}
} );</p>
<p> // add keyboard events
$( document ).keydown( function(e) {
var keyCode = e.keyCode || e.which,
arrow = {
left : 37,
up : 38,
right : 39,
down : 40
};</p>
<p> switch (keyCode) {
case arrow.left:
config.$bookBlock.bookblock( 'prev' );
break;
case arrow.right:
config.$bookBlock.bookblock( 'next' );
break;
}
} );
};</p>
<p> return { init : init };</p>
<p> })();
그런데 페이지를 넘기는 버튼을 컨텐츠의 위, 아래 두번 놓고 싶어서
<nav>
<a id="bb-nav-prev" href="#" class="bb-custom-icon bb-custom-icon-arrow-left">Previous</a>
<a id="bb-nav-next" href="#" class="bb-custom-icon bb-custom-icon-arrow-right">Next</a>
</nav>
이 소스를 위쪽에다가 그대로 복사해서 썼더니
위쪽은 먹는데
아래쪽은 다음으로 가는 버튼이 먹지 않습니다.
짐작컨데 두번 나와서 그러지 않나 싶습니다.
페이지 이동하는 자바스크립트를 향한 버튼을 위아래 두번 사용하고 싶은데
방법이 없을까요?
답변 2개
class 형태로 사용.
</p>
<p>//상단코드 생략</p>
<p>var Page = (function() {</p>
<p> </p>
<p> var config = {</p>
<p> $bookBlock : $( '#bb-bookblock' ),</p>
<p> $navNext : $( '.bb-nav-next' ), // 클래스 이름을 사용하여 위아래에 있는 모든 버튼을 선택</p>
<p> $navPrev : $( '.bb-nav-prev' ), // 클래스 이름을 사용하여 위아래에 있는 모든 버튼을 선택</p>
<p> $navFirst : $( '.bb-nav-first' ), // 클래스 이름을 사용하여 위아래에 있는 모든 버튼을 선택</p>
<p> $navLast : $( '.bb-nav-last' ) // 클래스 이름을 사용하여 위아래에 있는 모든 버튼을 선택</p>
<p> },</p>
<p> //하단코드 생략</p>
<p>댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인