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

JQuery 플러그인을 활용한 동영상 풀 스크린 배경 으로 만들고, 여러 동영상을 사용하여 슬라이드 쇼로도 만들 수 있습니다. 다수의 동영상을 이용하여 슬라이스 쇼도 가능하며, 설정 가능한 옵션에는 자동재생여부, 컨트롤 기능 사용여부, 축소기능 사용등의 설정을 하실 수 있습니다.

* surveyJS 소개 surveyJS를 통해 JSON에서 설문 조사를 작성하고 모든 프로세스를 관리 할 수 ​​있습니다 (필드 유효성 검증, 로컬 스토리지 및 양식 데이터) 제공되는 주요 기능은 아래와 같습니다 - 질문, 답변 및 피드백 메시지를위한 HTML - 백엔드로 보내기 전에 양식 데이터 - AJAX 호출 성공 / 오류 / 종료 및 유효성 검사를위한 콜백 함수 * License - MIT License 첨부된 압축파일을 다운받아 원하는 웹경로에 업로드 합니다 제공되는 샘플파일을 참조하여 css, js, html 을 구성하도록 합니다 제공 되는 샘플파일인 example-1.html 을 참조하시기 바라며 출력되는 결과물은 아래와 같습니다javascript 및 jquery 를 이해하실 수 있는 분께..

CSS sticky position 및 Intersection Observer API 를 사용하여 스태킹 카드 효과를 구현합니다 내용을 카드인터페이스에 담아 여러장으로 구성하여 접을 수 있습니다 사용방법은 아래와 같습니다 첨부된 압축파일을 해제하여 아래와 같이 css , js 파일을 불러오도록 합니다 HTML,CSS,J 구성은 아래와 같습니다 각 item 별 내용들을 삽입할 수 있습니다 sticky css position 속성값을 사용하여 .stack-cards__item 요소에 적용할 수 있습니다 StackCards 쌓기 효과를 초기화하는데 사용할 객체를 정의 할 수 있습니다 Intersection Observer API가 지원 intersectionObserverSupported === true)되고..

isystkSlider 는 다양한 기능들을 지원하는 이미지 슬라이더 프로그램 입니다. 다운로드 받은 파일의 압축을 해제한후 나오는 dist/index.html 파일을 웹브라우저로 열어보면 데모를 확인이 가능합니다. 위 예제는 단순한 이미지 슬라이더의 예제입니다. 이미지 슬라이더 + 갤러리 형태의 예제입니다. 모바일에서 사용하면 좋을만한 예제입니다. 샘플용 HTML파일의 소스코드를 열어보면 이미지 슬라이더를 만들기 위한 HTML태그들을 어떻게 구성해야 하는지 확인이 가능합니다 슬라이더를 작동시키는 다양한 옵션들이 존재하네요.

지하철 노선도를 표현하는 jQeury 플러그인 입니다. MIT 라이센스 입니다. 사용법은 생각보다 심플하지만 맵에 요소를 배정하는 작업은 한땀 한땀의 노력이 필요하겠네요 ^^; "> 아래의 속성을 참고하여 수정하셔서 사용하시면 됩니다. data-columns 데이터 열을 뜻 합니다. data-rows 데이터 행을 뜻 합니다. data-cellSize 각 셀의 너비와 높이를 뜻합니다. ( 셀은 정사각형입니다. ) data-legendId 지도 범례에 추가될 HTML 요소의 ID를 지정할 수 있어요. data-textClass 지도에서 텍스트 레이블에 사용될 CALSS 를 지정하세요. data-gridNumbers 그리드에 숫자를 표시하거나 숨기려면 TRUE, FASLE 로 설정하세요. data-grid 맵..

Javascript jQuery 를 이용하여 조직도를 만들 수 있습니다. API 안내와 여러가지 버젼으로 제공되지만 ... 저는 jQuery Version 만 사용해 봤습니다. toggle 도 가능해서 데모를 볼때는 괜찮다 생각 했지만 다운로드 받아보니 역시나 바로 실행이 되진 않네요 ^^; 데모파일에서상단에 CSS, JS 경로만 수정해 주시면 됩니다. 를 아래처럼 변경하세요.

모바일에서 시간을 선택하는 jquery 플러그인입니다. 다운로드 받은 파일의 압축을 풀면 나오는 index.html 파일을 메모장이나 텍스트 편집기로 열어보면 위 코드를 아래 처럼 변경을 해서 저장하면, 웹브라우저로 열어보면 확인이 가능합니다. NPM을 설치가 가능하면, https://github.com/loebi-ch/jquery-clock-timepicker 위 링크를 참고하면 되겠습니다. 예제 화면에는 위 그림 처럼 시간과, 분을 입력해둔 다양한 케이스의 입력폼을 볼수 있네요. 시간이 입력된 입력폼을 클릭해보면 위 그림 처럼 아날로그 시계모양이 화면에 표시가 되고 시계에 표시되는 시간을 클릭해서 입력폼에 입력된 시간을 조절할 수가 있네요. 웹페이지에 시계를 표시하기 위한 다양한 옵션들이 제공이 되며..

jQuery 와 CSS flexbox 로 만들어진, 반응형의 사진 갤러리 입니다. 첨부된 파일의 압축을 풀어서 나오는example/index.html 파일을 웹브라우저 열어보면 데모를 확인이 가능합니다. 반응형이어서, 화면의 크기에 맞게 이미지의 배열이 적당하게 조절이 됩니다. 이미지를 클릭해보면 해당 이미지가 light box 로 팝업이 됩니다. 좌우 화살표를 이용해서 다음 이미지나, 이전 이미지로 슬라이드도 됩니다. 위 그림 처럼 index.html 파일의 소스코드도 상당히 간단합니다.

Accordion 으로 이용할 수 있는 jQuery 플러그인 입니다. 다운로드 받은 파일의 압축을 해제하고 demo/index.html 파일을 웹브라우저로 열어보면 샘플확인이 가능합니다. 가벼운 프로그램이어서 지원되는 옵션은 몇가지는 안됩니다만, 딱 필요한것은 있네요. 기본 예제와, 아코디언으로 활용한 예제 펼쳐진 부분들을 픽스를 시켜버린 예제와, 약간의 애니메이션을 추가한 예제등등이 있네요. 어떤 항목이 열리고 닫히고 했었는지 이벤트를 얻어서 화면에 표시해주는것도 되긴 하네요. 하나의 예제에 대한 화면과, 예제를 위한 HTML와 스크립트 소스코드를 비교해서 보면, 많이 어렵다거나 복잡하진 않네요. 위 화면에 대한 소스코드 예제 가볍고, 쉽다보니 활용하기가 수월해보이네요.

jQuery 와 Bootstrap 을 이용한 드랍다운 메뉴 입니다. 사용법 1.head 에 css 를 정의 하세요. 2.body 에 메뉴 구조를 만들거나 기존 코드를 활용하여 변경하세요. ... ... 3.body 최하단에 스크립트를 호출하세요. ... ... $(function () { $('#bootnavbar').bootnavbar(); })