일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- work6.kr
- 개발자
- 웹퍼블리셔
- 튜닝
- plugin
- 쇼핑몰제작
- 커스터마이징
- jQuery Plugin
- 워크식스
- 홈페이지제작
- 웹디자이너
- 웹에이전시
- 사이트제작
- PHP
- 안드로이드
- 웹디자인
- 3D프린터
- 홈페이지
- 웹퍼블리싱
- 제이쿼리
- 쇼핑몰구축
- CSS
- 웹개발자
- 플러그인
- 쇼핑몰
- 포트폴리오
- 프로그래머
- JQuery
- 홈페이지구축
- 고도몰
- Today
- Total
목록제이쿼리 (31)
그냥 개발자 블로그
모바일웹에서 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. 상단 배너 기본구조의 html 태그를 위와 같이 작성 합니다. 오늘은 더이상 보지 않기 닫기 4. 페이지가 실행될때 자동으로 실행될 수 있도록 함수를 작성 합니다. $('#banner1').dropdwonbanner({ todayClose:'.todayclose', //오늘은 더 이상 보지 않기 버튼을 설정 합니다. close:'.close', /..
자동 또는 수동으로 동작 가능한 이미지슬라이드를 구현하게 해주는 플러그인 1. 제이쿼리 설치가 필요 합니다. 2. 다운로드 받은 플러그인을 설치 합니다. ( 플러그인은 워크식스 홈페이지에서 다운로드 받으실 수 있습니다. ) 3. 배너 레이아웃 및 스타일을 작성 합니다. 4. 페이지가 열릴때 플러그인 자동으로 실행될 수 있도록 함수를 작성 합니다. $(function(){ $('#banner1').slidebanner({ page:true, //페이지를 사용여부 설정 arrow:{left:'◀',right:'▶'}, //좌우 이동 사용 여부 및 버튼 모양 설정 auto:true, //배너를 자동으로 동작 여부 설정 speed:3000, //배너 변경시 속도 설정 delay:3000 //배너가 멈추어 있는 ..
엣지, 익스플로러, 크롬 등에서 스크롤바에 스타일을 적용할 수 있게 해주는 플러그인 내용 1. 제이쿼리가 설치되어 있어야 합니다. 내용 2. 다운로드 받은 플러그인을 설치 합니다. ( 플러그인은 워크식스 홈페이지에서 다운로드 받으실 수 있습니다. ) 내용 3. 설치를 원하는 엘리먼트에 아이디를 부여합니다. 내용 4. 페이지가 실행될때 동시에 실행할 수 있도록 함수를 작성해 줍니다. $('#test').thinScrollbar({ scrollbarcolor : '#ddd', // 스크롤바 배경색을 결정 합니다. 헥사코드로 작성해야 하며 기본값은 #ddd 입니다. slidercolor : '#555' // 스크롤바 색을 결정 합니다. 헥사코드로 작성해야 하며 기본값은 #555 입니다. }); 5. 필요한 옵..
브라우저 종류에 관계 없이 select box에 스타일을 적용할 수 있게 해주는 플러그인 옵션1 옵션2 1. 제이쿼리를 설치가 필요 합니다. 옵션1 옵션2 2. 다운로드 받은 플러그인을 설치 합니다. ( 플러그인은 워크식스 홈페이지에서 다운로드 받으실 수 있습니다. ) 옵션1 옵션2 2. select 태그 및 적용 시킬 스타일을 작성 합니다. 옵션1 옵션2 3. 페이지가 열릴때 자동으로 실행되게 함수를 작성 합니다. 4. 플러그인은 워크식스 홈페이지에서 만나보실 수 있습니다. [문의하기] copyright ⓒ 2017. 워크식스
[소개] 원페이지 사이트에 사용하는 페이지 플러그인으로 스크롤 페이지간 상하 이동을 부드럽게 만들어 줍니다. [플러그인명] pageScroll.js [버전] 3.1웹표준을 고려한 수정 3.0각 섹션별 스크롤 높이 리턴 기능 추가 2.0 페이지 클릭 후 동작 추가 가능하도록 수정 1.0최초작성 [사용법] 1. 플레이그라운드에 홈페이지에서 제공하는 cdn을 복사하여 붙여 넣습니다. (제이쿼리와 제이쿼리 ui가 사전에 선언되어 있어야 합니다.) 2. 페이지 마다 id를 부여 합니다. 아이디는 원하는 값을 다르게 부여 합니다. 3. 페이지에 해당 하는 요소를 작성 한 후 for에 클릭시 이동할 id 값을 넣어 줍니다. 4. 페이지 그룹에 해당하는 엘리먼트에 pageScroll을 실행해 줍니다. [옵션설명] $(..