일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- #웹솔루션
- #happycgi
- #CSS
- #해피CGI
- #솔루션
- #jQuery
- #이미지
- #cgimall
- #뉴스
- 사이트제작
- CGIMALL
- #업종별
- 홈페이지제작
- 해피씨지아이
- jquery
- 게시판
- #동영상
- #쇼핑몰
- happycgi
- 홈페이지
- 솔루션
- 쇼핑몰
- 웹솔루션
- 해피CGI
- #홈페이지제작
- javascript
- php
- #image
- #홈페이지
- CSS
- Today
- Total
목록jquery (87)
웹솔루션개발 22년 노하우! 해피CGI의 모든것
사이트에서 CSS 및 JQuery 를 이용한 플러그인 참고하실 수 있으며, 예제 사이트와 함께 소스를 확인해 보실 수 있습니다.
jQuery에서 조작하고 싶은 엘리먼트를 찾기 위한 셀럭터 연습 사이트입니다. jQuery에서 제공하는 엘리먼트를 쉽게 찾아서 제어 가능하고 다양한 포퍼먼스 활용도 가능합니다. 원하는 선택형태를 입력하고 지정된 토클키를 클릭하면 클릭한 엘리먼트를 바로 확인 가능합니다. 기본부터 여러가지 이용가능한 엘리먼트가 많으니 유용하게 이용할 듯합니다. 참고로 익스에서는 사용이 원활하지 않으니, 크롬이나, 파이어폭스를 활용해서 이용해보세요.
자동 스트롤 좌우 이동 및 페이지 포인트 출력 한화면에 여래개를 출력 하는등 다양하게 표현가능합니다. glider.js 파일과 jquey 를 이용해 표현하고 있습니다. 페이지에서 jquery와 glider.js 파일을 호출 스크립트를 삽입하고 아래와같이 적용하기만 하면 됩니다. DIV 코드에 위와 같이 DIV의 element로 사용하시면 됩니다. 사용은 아래와같이 사용가능합니다. 자세한 소스 및 참고 내용은 소스를 확인하시면 됩니다. Autoplay: data-glider-autoplay Autoplay (RTL): dir="rtl" data-glider-autoplay Controls: data-glider-controls Controls (RTL): dir="rtl" data-glider-contro..
데모상 1~100번까지의 영역을 슬라이더에 적용되어있으며, 해당 지정된 영역만큼의 슬라이더 객체수를 만들어 보여줄수 있는 슬라이더 소스입니다. 데모소스에서 index.html 파일내에 스크립트 소스중 total 갯수를 수정하시면 원하시는 영역만큼 지정되게 됩니다. 현재는 단순한 값의 번호만을 변경할 수 있습니다만 위 소스를 응용하여 다양한 이미지 및 효과등을 구현할수도 있을거라 보여지네요.^^
라이센스 : MIT 라이센스 메인화면,소개페이지 등에 유용하게 쓰일수있는 멀티스크롤 jquery플러그인 입니다. 홈페이지에서 방문자에게 가장 깊은 인상을 주는 페이지라면 당연히 메인페이지죠^^ 이런 메인페이지 혹은 업체 소개페이지등에 방문자를 사로잡을수있는 화려한 스크롤 엑션을 보여주기위한 플러그인입니다^^ 위의 스크린샷에서 볼수있듯이 화살표방향으로 스크롤되며 화면이 전환됩니다^^ 어떻게 쓰냐에따라 참유용할것으로 보여집니다^^ 위의 스크린샷을 보면 알수있듯이 소스도 간단하며 사용하기 편합니다. 위의 첨부파일을 다운받아보시면 예제 소스가 여럿 있으니 자신의 사이트에 적절히 이용하면 좋을것으로 보여집니다^^
라이센스 : MIT 라이센스 툴팁, 레이어, 공지, 이미지레이어 등의 간단하면서 홈페이지 구성함에 있어 꼭필요한 jquery를 모아둔 플러그인입니다. 데모사이트에서 아래와같은 예제와 함께 소스도 제공해주기때문에 쉽게 접근이 가능합니다. 아래와같이 한눈에 데모소스를 확인할수있어 쉽게 접근이 가능합니다. 또한 위의 첨부파일을 확인해보면 알수있듯이 위의 데모사이트에서 제공해주는 것외에 여러 예제를 직접 만들어둔 소스가 있으므로 해당 소스파일을 직접 참고하셔도 좋을것같습니다^^
jquery 를 이용해서 간단하게 사용이 가능한 컬러피커 스크립트입니다. 입력박스를 위한 컬러피커가 기본이긴 한데, 그 외에도 다양한 형태로 사용이 가능하다는 것을 데모로 보여주네요. 컬러피커로 투명도를 조절하는 것은 잘 안보였는데, 지원이 되네요. http://labs.abeautifulsite.net/jquery-minicolors/ 그 외에도 RGB로 색상입력값을 받을수 있거나, 특정 영역에 선택한 색상을 확인시켜주거나 등 여러가지를 해볼수 있겠네요. 위 사이트에서 컬러피커를 사용하기에 필요한 API 레퍼런스를 이용해서 비교적 간단하게 홈페이지에 적용할수 있을걸로 보이네요.
마우스 클릭 앤 드래그를 통해 자유롭게 옮기는 Sortable JQuery 소스입니다. 소스도 비교적 간단해서. 다양한 곳에 이용 가능합니다. 드래깅이 가능한 객체수도 제한이 없어서. 다양한 곳에 포퍼먼스로 이용이 가능합니다. 객체영역을 마우스 클릭 앤 드래그해서 원하는 위치로 순서를 바꿀수 있습니다. API를 보면 알수 있듯 기본 적인 기능외에도 다양한 기능을 제공하고 있습니다.
* jquery TouchTouch - 최적화 된 사진 갤러리로 사이트에 일련의 사진을 쉽게 표시할 수 있는 jquery plugin * License - MIT License * 주요 기능 - css3 애니메이션 및 전환 - 화면을 가득 채우고 방향의 변화에 반응하는 반응형 css 인터페이스 - 필요할 때만 사진을 미리로드 - 스와이프 지원 - 여러 갤러리 지원 * 사용방법 - 첨부된 파일을 다운받아 압축을 해제 후 아래와 같은 코드들을 삽입하여 갤러리를 구성할 수 있습니다 자세한 내용은 첨부된 파일의 index.html 파일을 참조하시면 좀 더 이해가 빠르실 겁니다 헤더 선언부 갤러리 썸네일 선언부 스크립트 선언부
다운로드 받은 파일의 압축을 풀고 index.html 파일을 웹브라우저로 열어보면 쉽게 확인이 가능합니다. 자바스크립트로 구현된 숫자 입력툴입니다. 둥근 부분에 표시되는 영역을 마우스로 클릭해서 끌면 색깔이 칠해지는 부분이 늘었다, 줄었다 하면서 그 양을 수치로 표시해주는 기능입니다. 다양한 샘플들이 많은데, 1. 어느정도인지 수치를 표시하지 않는 형태 2. 숫자만큼 색칠하는 영역이 늘어나지는 않지만, 시계바늘과 같은 형태로 수치를 표시하는 샘플 3. 수치를 입력받아서 원형의 그래프를 생성해버리는 예제 4. 마우스 휠을 위,아래로 조절하는 이벤트를 이용해서 수치를 증가시키거나, 감소시키는 예제 위 예제 외에도 몇가지 예제들이 더 있네요. 시간을 입력받아야 하거나, 퍼센테이지를 표시하거나 하는 용도로 활용..