웹솔루션개발 25년 노하우! 해피CGI의 모든것

자바스크립트와 CSS를 이용하여 제작된 아코디언 메뉴 Accordion Tab입니다. 기본적으로 HTML로 구성하고, 자바스크립트 + CSS로 제작되었습니다. 애니메이션의 속도 및 디자인은 CSS로 조절이 가능합니다. 개수제한없이 html 편집에 따라서 조절이 가능합니다. 서브 메뉴나, 액션을 가미한 설명에 사용이 가능한 소스네요

전체메뉴 아이콘을 클릭하면 좌측에서 기존 컨텐츠를 밀면서 출력이 됩니다.

RTOP는 웹 페이지에서 HTML5 비디오를 재생하는 썸네일이있는 웹 기반의 다중 기능 jQuery 비디오 플레이어입니다. 플러그인은 플레이어의 인터페이스를 포함하여 플레이어를 완전히 구성하고 아이콘을 제어합니다. 또한 GTM 을 추가하여 동영상을 추적 할 수도 있습니다 . 사용자는 인터페이스를 통해 재생, 일시 중지, 앞으로 및 볼륨 제어를 할 수 있습니다. 라이센스는 MIT 입니다. 사용법 안내 합니다. 1.라이브러리를 호출 하세요. 2. 컨텐츠를 구성하세요. 3. 플러그인을 호출 하세요. 이벤트와 옵션은 아래의 사이트에서 확인 가능 합니다. https://redtettemer.github.io/rtop-video-player/ 많은 기능을 지원하는건 아니지만 심플하게 사용하기에는 괜찮은 플레이어 같..

NiVO 슬라이더를 소개 합니다. 애니메이션 효과가 참 재미 있는 슬라이더 입니다. 사용방법 안내 드립니다. 1. 라이브러리를 호출하세요. 2. 컨텐츠를 구성하세요. 3. 플러그인을 호출 하세요. 4. 다양한 옵션과 이벤트를 걸고 싶다면 아래의 내용을 참고 하세요. 아래의 사용 가능한 effect 항목을 이용하여 다양한 방법으로 슬라이드를 표현할 수 있습니다. ( sliceDown, sliceDownLeft, sliceUp, sliceUpLeft, sliceUpDown, sliceUpDownLeft, fold, fade, random, slideInRight, slideInLeft, boxRandom, boxRain, boxRainReverse, boxRainGrow, boxRainGrowReverse )

웹페이지의 접속자가 로봇이 아닌 경우 컨텐츠를 제공하기 위한 일종의 Captcha 입니다. 퍼즐 모양의 조각난 이미지와, 퍼즐이 들어가야할 위치를 마우스를 이용하거나, 모바일기기의 터치를 이용해서 끌어다 마추는 식으로 로봇이 아니라는 것을 알아내는 식으로 됩니다. PC에서는 아래 화살표를 마우스로 클릭해서 끌어다 퍼즐이 있는 위치에 놓는 식으로 가능하고, 모바일기기에서도 화살표를 터치해서 끌어다 제자리에 가져다 놓는 식으로 이용이 가능합니다. 퍼즐의 위치가 맞으면 로봇이 아님을 검증하고, 다음 페이지로 이동을 시켜줍니다. 끌어다 놓은 퍼즐의 위치가 제자리가 아니면 위 그림 처럼 틀렸다는 표시와 함께 재시도를 하도록 그림과 퍼즐의 위치가 리셋이 됩니다.

* javascript FormPersistence HTML 양식 데이터를 보존하기위한 간단한 JavaScript 라이브러리 * License MIT License * 이용방법 첨부된 압축파일을 해제하여 원하는 웹경로에 업로드합니다 작업해야될 html 문서안에 아래와 같이 배포된 js,css 를 삽입합니다 그리고 적용할 폼태그를 구성하여 각각 id 값을 선언해줍니다 위와 같이 폼 구성을 하고 웹으로 실행하면 각 input 박스에 항목을 입력하고 Add 버튼을 클릭하면 아래와 같은 결과를 확인하실 수 있습니다 form-persistence.js 에 사용되는 스크립트 함수의 옵션등에 대한 API정보는 아래의 API문서 페이지에서 확인이 가능합니다 https://github.com/FThompson/FormP..

* jquery fancyTable fancyTable은 html 테이블을 검색하고 정렬 할 수 있도록하는 jQuery 플러그인입니다. * License MIT License * 이용방법 첨부된 압축파일을 해제하여 원하는 웹경로에 업로드 합니다 css 를 아래와 같이 호출합니다 테이블 html 태그를 구성합니다 (jquery 를 통해 tbody 태그에 테이블 내용이 삽입됩니다) 구성에 필요한 js 파일 및 코드를 삽입합니다 위와 같이 적용된 jquery 를 통해 아래와 같이 테이블 내용이 삽입되고 정렬됨을 확인할 수 있습니다 첨부된 압축파일에도 샘플 파일이 있으니 참고하시면 도움이 되실겁니다 ​ ​

다운로드 받은 파일의 압축을 해제한 후, index.html 파일을 웹브라우저로 열어서 보면 확인이 가능합니다. 여러줄로 구성된 텍스트를 일부만 화면에 표시해주고, 표시되는 끝 부분에 read more 버튼을 표시해줍니다. 더 보기 버튼을 클릭하면, 나머지 텍스트를 화면에 스르륵 표시를 해주는 jquery 플러그인 입니다. 사용법은 아래와 같습니다. 1. jquery 와 더보기 플러그인을 로드합니다. 2. 텍스트가 출력되어야 할 블록을 연결하고, 몇줄을 자르고 표시할지를 지정합니다. 3. 더보기 버튼을 클릭하면 화면에 나머지 텍스트를 표시하는 효과를 주려면 텍스트를 출력하는 블록에 data-controller 이라는 속성을 추가하고, 버튼과 연결하면 됩니다. 4. 더보기 버튼을 조절하거나, 더보기 할 텍..

웹브라우저에서 PDF view 기능을 제공하는 PDF.js 입니다. https://github.com/mozilla/pdf.js 해당 프로그램은 서버에 모듈을 설치하여 이용을 하거나 소스 다운로드를 하여 이용 할 수 있습니다. https://github.com/mozilla/pdf.js 페이지에서 서버에서 설치룰 하는 방법을 확인이 가능 합니다. 굳이 이 과정을 거치지 않고 소스를 다운받아 원하시는 위치에 업로드 하여 이용하시는게 편합니다. 아래의 페이지에서 PDF불러오는 예제소스를 확인을 할 수 있습니다. https://mozilla.github.io/pdf.js/examples/index.html#interactive-examples 첨부된 파일을 다운로드 받아 서버에 압축을 풀어 업로드를 한뒤에, ..

파일첨부를 웹페이지의 특정영역에 파일을 드롭하여 업로드를 하는 기능을 제공하는 Dropzone.js 입니다. https://www.dropzonejs.com/ 웹페이지에서 설치방법 및 이용방법 확인이 가능 합니다. 다양한 이벤트 핸들러도 존재 합니다.