일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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
- 사이트제작
- #동영상
- 해피씨지아이
- #이미지
- CGIMALL
- #홈페이지
- #해피CGI
- #image
- happycgi
- 쇼핑몰
- CSS
- #cgimall
- php
- javascript
- #솔루션
- 해피CGI
- jquery
- #홈페이지제작
- 솔루션
- #웹솔루션
- #jQuery
- #업종별
- #뉴스
- Today
- Total
목록javascript (60)
웹솔루션개발 22년 노하우! 해피CGI의 모든것
터치 및 마우스 호버효과로 만드는 가벼운 무료 오픈 소스 JavaScript 라이브러리 Atropos JavaScript, React 및 Vue.js에서 사용 가능하며 경량화된 소스입니다. 여러가지 변수를 통해 사용자 정의 설정 사용이 가능합니다. 회전 반경, 그림자 효과 관련 등 다양한 사용자 정의 설정이 가능합니다.
JavaScript 를 이용하여 Top 버튼을 클릭하면 부드럽게 Top 으로 스크롤 되는 소스 입니다. 적용방법은 아래와 같습니다. 1. CSS 를 추가 합니다. 2. JavaScript 를 호출 합니다. 3. 세부적인 설정 항목은 아래와 같습니다. 설정 항목에서 normal, Iinear 사용해 봤을 때 스크롤이 길지 않다면 Iinear 조금 더 보기 편하고 페이지가 많이 길 경우 normal 로 설정하는게 좋은 듯 합니다.
JavaScript 로 테이블을 생성합니다. 그리고 테이블의 해더를 클릭하면 정렬(소팅) 할 수 있는 소스코드 입니다. 만드는 방법은 아래와 같습니다. 1. Table 을 생성하고 고유한 아이디를 지정하세요. 단, Table 요소에서 반드시 샘플과 같은 양식으로 맞춰야 하고 th, tbody 는 필수 입니다. 2. th 요소에 CSS 스타일을 정의 합니다. 3. js/script.js 를 호출 합니다. 제일 마지막에 호출해야 합니다. Table 에 출력되는 데이터 편집은 js/script.js 에서 할 수 있습니다. 형식에 맞춰서 편집 혹은 추가하시면 됩니다.
Epub.js는 브라우저를 통해 epub 문서를 랜더링 할 수 있는 javascript 라이브러리 입니다. EPUB 형식의 파일로 현재 많은 책들이 저장되어 널리 사용되고 있습니다. EPUB에 대한 자세한 설명은 아래 페이지를 참고 하시면 도움이 되시겠습니다. https://idpf.org/epub/30/spec/epub30-overview.html https://github.com/futurepress/epub.js 페이지를 통해 사용법 확인 및 소스 다운로드가 가능 하며, 다양한 데모 확인도 가능 합니다.
JavaScript 및 HTML5 캔버스 를 사용하여 스크래치 카드 기능을 만들 수 있습니다. Vanilla JavaScript 플러그인을 사용하면 처음부터 표시될 쿠폰 코드 또는 기타 당첨 코드를 숨길 수 있습니다. 스크래치 영역 뒤에 숫자/텍스트를 배치할 수 있습니다. 사용자는 마우스 커서로 긁거나 스와이프를 터치할 수 있습니다. 또한 실시간 스크래칭 애니메이션을 보여줍니다. 라이센스는 MIT 입니다. 적용 방법 1. HEAD 에 STYLE 을 추가 합니다. 2. BODY 에는 CANVAS 코드를 추가 합니다. 3. 마지막으로 관련 스크립트를 로더 합니다. 압축파일을 해제하면 index.html 파일을 통해 바로 확인할 수 있습니다.
첨부된 파일의 압축을 해제한 뒤, 웹브라우저를 이용해서 index.html 파일을 열어보면 확인이 가능합니다. 한 주간의 요일과 시간대별로 일정을 화면에 표시할 수 있습니다. 특정 요일의 시간대에 표시되는 일정을 클릭해보면, 위 그림 처럼, 클릭한 요일의 일정을 확대해서 볼수 있도록 화면이 변경이 됩니다. 사용방법은 아래와 같습니다. js 에 채워넣을 데이터를 입력/출력 할 수 있도록 개발을 한다면, 주별 일정표시나, 한주간 예약현황 등의 페이지를 구성하는데 사용할수 있을것 같네요.
자바스크립트를 이용한 패밀리 사이트 셀렉트 박스 만들기 옵션값을 이용하여 셀렉트박스 선택시 패밀리 사이트로 이동합니다.
옵션값 인식하는 셀렉트박스, 옵션 선택 시 선택한 값이 경고창으로 알려주는 자바스크립트
첨부파일의 압축을 해제하면, examples/3step.html 파일을 웹브라우저로 열어보면 예제 확인이 가능합니다. 화면에 드래그로 이동이 가능한 다이얼로그가 열리고, 취소, 이전, 다음 단계의 버튼을 클릭함으로써 각 단계마다 위 그림과 같은 대화상자들을 이용해서 방문자가 각 단계마다의 내용을 확인하고 선택할 수 있게 됩니다. 사용방법은 아래와 같습니다.