그냥 개발자 블로그

'좌에서 우로 흘러가는 슬라이드를 어떻게 만들어야 하나요?' 라는 질문이 있어서 이번 글과 영상을 제작하게 되었습니다. jquery를 이용한 슬라이드를 제작할때 우선 원리를 생각해봐야 합니다. 동작하는 방식에 따라 제작 방법이 모두 다르기 때문 입니다. jquery 슬라이드 제작에는 논리적인 사고가 필요 합니다. 우선 생각의 정리가 필요 합니다. 이번 경우는 container 안에 div를 float으로 일렬로 나열시켜서 동작을 시켜 볼겁니다. 1. 슬라이드가 시작되기 전에 3번째 div를 1번째 div 앞으로 가져와서 배너의 순서를 3,1,2 로 바꿔준다. 2. 슬라이드가 동작되면 3번째 div에 margin-left에 -(마이너스)값을 줘서 좌측으로 0.6초간 서서히 이동시킨다. (나머지 1,2는 자..

모바일웹에서 가로사이즈를 초과하는 메뉴가 있을 경우 메뉴에 슬라이드 기능을 추가하면 유용 합니다. touchMoveMenu.js 플러그인은 워크식스에서 다운로드 받을수 있으며, 기본 설치 방법은 아래와 같습니다. 다이얼미싱 전자미싱 이노비스 퀼트미싱 자수미싱 오버록미싱 컴퓨터자수기 스캔앤컷 기타 1. 제이쿼리 설치가 필요 합니다. 다이얼미싱 전자미싱 이노비스 퀼트미싱 자수미싱 오버록미싱 컴퓨터자수기 스캔앤컷 기타 2. 다운로드 받은 플러그인을 연결합니다.( 플러그인은 워크식스 홈페이지에서 다운로드 받으실 수 있습니다. ) 다이얼미싱 전자미싱 이노비스 퀼트미싱 자수미싱 오버록미싱 컴퓨터자수기 스캔앤컷 기타 3. 기본적인 스타일을 작성 합니다. 다이얼미싱 전자미싱 이노비스 퀼트미싱 자수미싱 오버록미싱 컴퓨터..

jquery에서 class를 포함하고 있는지 검사가 필요할 경우 attr을 이용합니다.그러나 class를 다중으로 작성한 경우에는 검색되지 않습니다. hasClass를 사용하면 다중 class 내에서도 정확하게 class를 찾아 냅니다. 잘못된 예 $.('div').class('on'); 올바른 예 $.('div').hasClass('on');

탭메뉴를 간단히 구현하는 플러그인 버튼1 버튼2 버튼3 버튼4 콘텐츠1 콘텐츠2 콘텐츠3 콘텐츠4 1. 제이쿼리가 연결되어 있어야 합니다. 버튼1 버튼2 버튼3 버튼4 콘텐츠1 콘텐츠2 콘텐츠3 콘텐츠4 2. 다운로드 받은 플러그인을 설치한 경로를 지정해 줍니다. ( 플러그인은 워크식스 홈페이지에서 다운로드 받으실 수 있습니다. ) 버튼1 버튼2 버튼3 버튼4 콘텐츠1 콘텐츠2 콘텐츠3 콘텐츠4 3. 기본 html 태그 및 스타일을 추가해 줍니다. 버튼1 버튼2 버튼3 버튼4 콘텐츠1 콘텐츠2 콘텐츠3 콘텐츠4 4. 페이지가 실행되면 동시에 실행될 수 있는 위치에 함수를 위치 시킵니다. 5. 플러그인은 워크식스 홈페이지에서 만나보실 수 있습니다. [문의하기] copyright ⓒ 2017. 워크식스

모바일웹에서 swipe menu가 필요할때사용.양쪽모두 swipe 이용가능 1. 제이쿼리 설치가 필요합니다. 2. 다운로드 받은 플러그인을 설치 합니다. ( 플러그인은 워크식스 홈페이지에서 다운로드 받으실 수 있습니다. ) 3. 위와 같이 레이아웃을 구성합니다. 4. 페이지 로딩시 실행되는 스크립트에 다음과 같이 함수를 추가 합니다. $('#swipemenu').swipeMenu({ type:1, // 1:양쪽, 2:왼쪽, 3:오른쪽 speed:300, // 메뉴움직임 속도 side_width:250 // 메뉴 폭 }); 5. 원하는 옵션을 설정 합니다. 6. 소스는 여기에서 다운로드 받을수 있습니다. [문의하기] copyright ⓒ 2017. 워크식스

제이쿼리를 이용한 책장 넘기는 효과를 구현한 플러그인 1. 제이쿼리를 설치해 줍니다. 2. 다운로드 받은 플러그인을 설치해 합니다. ( 플러그인은 워크식스 홈페이지에서 다운로드 받으실 수 있습니다. ) 3. 위와 같이 책의 내용을 한장씩 이미지로 추가합니다. 4. 페이지가 실해될때 자바스크립도 동시에 실행되는 위치에 함수를 작성합니다. $('#book').book({ speed:15, //페이지 넘기는 속도를 조절합니다. (추천 값 = 15) bookgb: '#666' // 페이지의 맨 앞장과 맨 뒷장의 배경을 지정 합니다. }); 5. 필요한 옵션을 적용 합니다. 6. 플러그인은 워크식스 홈페이지에서 만나보실 수 있습니다. [문의하기] copyright ⓒ 2017. 워크식스

레이어팝업 또는 토스트팝업 구현을 도와주는 플러그인 1. 제이쿼리가 설치가 필요합니다. 2. 다운로드한 플러그인을 설치합니다. ( 플러그인은 워크식스 홈페이지에서 다운로드 받으실 수 있습니다. ) 3. 위와 같이 원하는 함수명으로 함수를 만듭니다. $('body').pgpopup({ type:'toast', // 팝업형태 (toast, layer, slide) msg:'welcome', // 메시지 padding:'5px', // 여백 width:'50%', // 토스트폭, %로 지정 color:'#ffffff', // 내용 글자색 bgcolor:'#111111', // 레이어 배경색, #111111 와 같이 헥사코드 이용 transparency:'0.8', // 투명도, 0.8 과 같이 값을 입력, 최..

자동 또는 수동으로 동작 가능한 이미지슬라이드를 구현하게 해주는 플러그인 1. 제이쿼리 설치가 필요 합니다. 2. 다운로드 받은 플러그인을 설치 합니다. ( 플러그인은 워크식스 홈페이지에서 다운로드 받으실 수 있습니다. ) 3. 배너 레이아웃 및 스타일을 작성 합니다. 4. 페이지가 열릴때 플러그인 자동으로 실행될 수 있도록 함수를 작성 합니다. $(function(){ $('#banner1').slidebanner({ page:true, //페이지를 사용여부 설정 arrow:{left:'◀',right:'▶'}, //좌우 이동 사용 여부 및 버튼 모양 설정 auto:true, //배너를 자동으로 동작 여부 설정 speed:3000, //배너 변경시 속도 설정 delay:3000 //배너가 멈추어 있는 ..