간단한 자바스크립트 실행방법 (function)
본문
안녕하세요, 아주 간단한 질문인데요
아래 js파일을 불러오는 메인의 html이 있는데
버튼 클릭했을때 function nextPage 함수 실행하면서 특정 페이지로 이동하게 하려면
<button onclick="javascript:nextPage(11);"> 버튼이다 </button>
이렇게 하면 되는거 아닌가요? 펑션이 실행이 안되서 여쭤봅니다.
alert('hel') 이런걸로 실험하면 되는데 이상하네요
감사합니다~
아래는 js 파일의 시작부터 function nextPage() 부분 대부분입니다
var PageTransitions = (function() {
var $main = $( '#pt-main' ),
$pages = $main.children( 'div.pt-page' ),
$iterate = $( '#iterateEffects' ),
animcursor = 1,
pagesCount = $pages.length,
current = 0,
isAnimating = false,
endCurrPage = false,
endNextPage = false,
animEndEventNames = {
'WebkitAnimation' : 'webkitAnimationEnd',
'OAnimation' : 'oAnimationEnd',
'msAnimation' : 'MSAnimationEnd',
'animation' : 'animationend'
},
// animation end event name
animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ],
// support css animations
support = Modernizr.cssanimations;
function init() {
$pages.each( function() {
var $page = $( this );
$page.data( 'originalClassList', $page.attr( 'class' ) );
} );
$pages.eq( current ).addClass( 'pt-page-current' );
$( '#dl-menu' ).dlmenu( {
animationClasses : { in : 'dl-animate-in-2', out : 'dl-animate-out-2' },
onLinkClick : function( el, ev ) {
ev.preventDefault();
nextPage( el.data( 'animation' ) );
}
} );
$iterate.on( 'click', function() {
if( isAnimating ) {
return false;
}
if( animcursor > 67 ) {
animcursor = 1;
}
nextPage( animcursor );
++animcursor;
} );
}
function nextPage(options ) {
var animation = (options.animation) ? options.animation : options;
if( isAnimating ) {
return false;
}
isAnimating = true;
var $currPage = $pages.eq( current );
if(options.showPage){
if( options.showPage < pagesCount - 1 ) {
current = options.showPage;
}
else {
current = 0;
}
}
else{
if( current < pagesCount - 1 ) {
++current;
}
else {
current = 0;
}
}
var $nextPage = $pages.eq( current ).addClass( 'pt-page-current' ),
outClass = '', inClass = '';
switch( animation ) {
case 1:
outClass = 'pt-page-moveToLeft';
inClass = 'pt-page-moveFromRight';
break;
case 2:
답변 1
이 경우 nextPage 함수는 PageTransitions 함수에 의해 감싸지게 됩니다.
소스가 짤려서 안보이지만 클래스를 만드는 팩토리펑션으로 보이는데
var pageTransition = PageTransition(); 으로 생성하는 부분이 없나요?
만약 있다면 window.pageTransition.nextPage(11); 뭐 이런식으로 호출하면 될 것 같네요.
전체 코드입니다. 말씀하신대로 해보겠습니다~
친절한 답변 감사드립니다
var PageTransitions = (function() {
function button1_click(){
alert("버튼1을 누르셨습니다.");
document.build_info.action="<?php echo G5_SUPER_URL?>"+'/module/db_insert1.php';
document.build_info.submit();
}
var $main = $( '#pt-main' ),
$pages = $main.children( 'div.pt-page' ),
$iterate = $( '#iterateEffects' ),
animcursor = 1,
pagesCount = $pages.length,
current = 0,
isAnimating = false,
endCurrPage = false,
endNextPage = false,
animEndEventNames = {
'WebkitAnimation' : 'webkitAnimationEnd',
'OAnimation' : 'oAnimationEnd',
'msAnimation' : 'MSAnimationEnd',
'animation' : 'animationend'
},
// animation end event name
animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ],
// support css animations
support = Modernizr.cssanimations;
function init() {
$pages.each( function() {
var $page = $( this );
$page.data( 'originalClassList', $page.attr( 'class' ) );
} );
$pages.eq( current ).addClass( 'pt-page-current' );
$( '#dl-menu' ).dlmenu( {
animationClasses : { in : 'dl-animate-in-2', out : 'dl-animate-out-2' },
onLinkClick : function( el, ev ) {
ev.preventDefault();
nextPage( el.data( 'animation' ) );
}
} );
$iterate.on( 'click', function() {
if( isAnimating ) {
return false;
}
if( animcursor > 67 ) {
animcursor = 1;
}
nextPage( animcursor );
++animcursor;
} );
}
function nextPage(options ) {
var animation = (options.animation) ? options.animation : options;
if( isAnimating ) {
return false;
}
isAnimating = true;
var $currPage = $pages.eq( current );
if(options.showPage){
if( options.showPage < pagesCount - 1 ) {
current = options.showPage;
}
else {
current = 0;
}
}
else{
if( current < pagesCount - 1 ) {
++current;
}
else {
current = 0;
}
}
var $nextPage = $pages.eq( current ).addClass( 'pt-page-current' ),
outClass = '', inClass = '';
switch( animation ) {
case 1:
outClass = 'pt-page-moveToLeft';
inClass = 'pt-page-moveFromRight';
break;
case 2:
outClass = 'pt-page-moveToRight';
inClass = 'pt-page-moveFromLeft';
break;
case 3:
outClass = 'pt-page-moveToTop';
inClass = 'pt-page-moveFromBottom';
break;
case 4:
outClass = 'pt-page-moveToBottom';
inClass = 'pt-page-moveFromTop';
break;
case 5:
outClass = 'pt-page-fade';
inClass = 'pt-page-moveFromRight pt-page-ontop';
break;
case 6:
outClass = 'pt-page-fade';
inClass = 'pt-page-moveFromLeft pt-page-ontop';
break;
case 7:
outClass = 'pt-page-fade';
inClass = 'pt-page-moveFromBottom pt-page-ontop';
break;
case 8:
outClass = 'pt-page-fade';
inClass = 'pt-page-moveFromTop pt-page-ontop';
break;
case 9:
outClass = 'pt-page-moveToLeftFade';
inClass = 'pt-page-moveFromRightFade';
break;
case 10:
outClass = 'pt-page-moveToRightFade';
inClass = 'pt-page-moveFromLeftFade';
break;
case 11:
outClass = 'pt-page-moveToTopFade';
inClass = 'pt-page-moveFromBottomFade';
break;
case 12:
outClass = 'pt-page-moveToBottomFade';
inClass = 'pt-page-moveFromTopFade';
break;
case 13:
outClass = 'pt-page-moveToLeftEasing pt-page-ontop';
inClass = 'pt-page-moveFromRight';
break;
case 14:
outClass = 'pt-page-moveToRightEasing pt-page-ontop';
inClass = 'pt-page-moveFromLeft';
break;
case 15:
outClass = 'pt-page-moveToTopEasing pt-page-ontop';
inClass = 'pt-page-moveFromBottom';
break;
case 16:
outClass = 'pt-page-moveToBottomEasing pt-page-ontop';
inClass = 'pt-page-moveFromTop';
break;
case 17:
outClass = 'pt-page-scaleDown';
inClass = 'pt-page-moveFromRight pt-page-ontop';
break;
case 18:
outClass = 'pt-page-scaleDown';
inClass = 'pt-page-moveFromLeft pt-page-ontop';
break;
case 19:
outClass = 'pt-page-scaleDown';
inClass = 'pt-page-moveFromBottom pt-page-ontop';
break;
case 20:
outClass = 'pt-page-scaleDown';
inClass = 'pt-page-moveFromTop pt-page-ontop';
break;
case 21:
outClass = 'pt-page-scaleDown';
inClass = 'pt-page-scaleUpDown pt-page-delay300';
break;
case 22:
outClass = 'pt-page-scaleDownUp';
inClass = 'pt-page-scaleUp pt-page-delay300';
break;
case 23:
outClass = 'pt-page-moveToLeft pt-page-ontop';
inClass = 'pt-page-scaleUp';
break;
case 24:
outClass = 'pt-page-moveToRight pt-page-ontop';
inClass = 'pt-page-scaleUp';
break;
case 25:
outClass = 'pt-page-moveToTop pt-page-ontop';
inClass = 'pt-page-scaleUp';
break;
case 26:
outClass = 'pt-page-moveToBottom pt-page-ontop';
inClass = 'pt-page-scaleUp';
break;
case 27:
outClass = 'pt-page-scaleDownCenter';
inClass = 'pt-page-scaleUpCenter pt-page-delay400';
break;
case 28:
답글이 수정이 안되는데 3열부터 6열까지 버튼클릭은 제가 복사하다 이상한 소스가 들어갔네요 ㅠ
길이 제한이 있어서 후반부 답글로 답니다. case부터 이어집니다.
case 60:
outClass = 'pt-page-rotateCubeTopOut pt-page-ontop';
inClass = 'pt-page-rotateCubeTopIn';
break;
case 61:
outClass = 'pt-page-rotateCubeBottomOut pt-page-ontop';
inClass = 'pt-page-rotateCubeBottomIn';
break;
case 62:
outClass = 'pt-page-rotateCarouselLeftOut pt-page-ontop';
inClass = 'pt-page-rotateCarouselLeftIn';
break;
case 63:
outClass = 'pt-page-rotateCarouselRightOut pt-page-ontop';
inClass = 'pt-page-rotateCarouselRightIn';
break;
case 64:
outClass = 'pt-page-rotateCarouselTopOut pt-page-ontop';
inClass = 'pt-page-rotateCarouselTopIn';
break;
case 65:
outClass = 'pt-page-rotateCarouselBottomOut pt-page-ontop';
inClass = 'pt-page-rotateCarouselBottomIn';
break;
case 66:
outClass = 'pt-page-rotateSidesOut';
inClass = 'pt-page-rotateSidesIn pt-page-delay200';
break;
case 67:
outClass = 'pt-page-rotateSlideOut';
inClass = 'pt-page-rotateSlideIn';
break;
}
$currPage.addClass( outClass ).on( animEndEventName, function() {
$currPage.off( animEndEventName );
endCurrPage = true;
if( endNextPage ) {
onEndAnimation( $currPage, $nextPage );
}
} );
$nextPage.addClass( inClass ).on( animEndEventName, function() {
$nextPage.off( animEndEventName );
endNextPage = true;
if( endCurrPage ) {
onEndAnimation( $currPage, $nextPage );
}
} );
if( !support ) {
onEndAnimation( $currPage, $nextPage );
}
}
function onEndAnimation( $outpage, $inpage ) {
endCurrPage = false;
endNextPage = false;
resetPage( $outpage, $inpage );
isAnimating = false;
}
function resetPage( $outpage, $inpage ) {
$outpage.attr( 'class', $outpage.data( 'originalClassList' ) );
$inpage.attr( 'class', $inpage.data( 'originalClassList' ) + ' pt-page-current' );
}
init();
return {
init : init,
nextPage : nextPage,
};
})();
테스트해보고 답글 답니다. 소스때문에 답글이 많아지네요 양해부탁드립니다 ㅠ
javascript: window.PageTransitions.nextPage(4);
라고 하니까 다음페이지 넘어가는거로 실행이 되고 4페이지로 가지는 않네요.
아마 showPage라는게 3번정도 나와서 이거 같은데 이건 동작을 안하네요 아마 펑션이 아니여서 그런거같은데
저도 좀더 연구해보겠습니다 ㅠ 그래도 넥스트페이지라도 도움 주셔서 감사합니다 :)
답변을 작성하시기 전에 로그인 해주세요.