jquery lesson3 (학습 56일차 TIL)

210901 오늘은 제이쿼리로 완벽하진 않지만, navigation 동작과 탭메뉴, 메인 배너 슬라이드의 기본적인 원리에 대해서 학습했다.

Must Remember

• hover 효과를 주고자 할 때 마우스가 떠날 때는 더 넓은 범위에서 적용 되는 것을 고려하자.
• 효과는 스크립트 작성 순서에 영향을 받는다.
• 제이쿼리는 mobile용을 따로 사용해야 한다.
• .trigger() method는 강제로 이벤트를 변경시켜준다.

jquery mobile

• mobile 기기의 방향을 전환 할 때 화면의 너비가 달라지는 것에 대비해 항상 바른 위치에 있도록 animation 적용한다.

let bannerNum = 0;
let bookW = $('body > section').width();
$('body > section').bind('orientationchange', function(e) {
  $('book_frame').stop().animate({'left':-bookW * bannerNum}, 300);
});

// in mobile
$('body > section').bind('swipeleft', function() {
  $('.next').trigger('click'); // trigger()를 사용해 클릭한 것처럼 강제로 이벤트 발생 하도록
});
$('body > section').bind('swiperight', function() {
  $('.prev').trigger('click'); 
});