목록plugin (20)

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

[해피CGI][cgimall]Draggable Step Wizard Plugin - jQuery Dialog Wizard

첨부파일의 압축을 해제하면, examples/3step.html 파일을 웹브라우저로 열어보면 예제 확인이 가능합니다. 화면에 드래그로 이동이 가능한 다이얼로그가 열리고, 취소, 이전, 다음 단계의 버튼을 클릭함으로써 각 단계마다 위 그림과 같은 대화상자들을 이용해서 방문자가 각 단계마다의 내용을 확인하고 선택할 수 있게 됩니다. 사용방법은 아래와 같습니다.
웹프로그램밍 자료실/JAVA 자료 2022. 8. 31. 09:06
[해피CGI][cgimall]Minimal User-friendly Date Time Picker - jQuery Dateandtime.js

다운로드 받은 파일의 압축을 해제한뒤에, index.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. 달력 아이콘을 클릭하면, 위 그림 처럼 날짜를 선택하는 달력이 화면에 표시가 됩니다. 달력의 년도-월 을 변경하거나, 시간을 선택하는 인터페이스는 아래와 같습니다. 달력을 사용하는 방법은 아래와 같습니다.
웹프로그램밍 자료실/JAVA 자료 2022. 8. 11. 09:04
[해피CGI][cgimall]Datepicker - Lightpick

JavaScript 를 이용하여 단일 날짜 선택, 다중 날짜 선택을 지원하는 Datepicker 입니다. 특이사항은 여러가지 샘플을 제공해서 1개를 커스터마이징 하여 사용하기 보다는 자신에게 맞는 Picker 를 사용할 수 있습니다. 물론 자신에게 맞는 Picker 가 없다면 커스터마이징을 해야겠지요. 라이센스는 MIT 라이센스 입니다. 기본코드는 아래와 같은 형식으로 구성되어 있습니다. demo.js 를 제공하여 index.html 파일은 여러가지 Picker 를 한번에 볼 수 있습니다. Picker 샘플은 아래와 같이 있고 다 소개해 드리기 보다는 대표적인 것들만 소개해 드립니다. 기본 Picker 다중선택 6개월 기간 제한 Picker 단일 켈린더에 범위 선택 Picker 2개의 켈린더에 범위 선택..
웹프로그램밍 자료실/JAVA 자료 2022. 8. 1. 09:04
[해피CGI][cgimall]Dynamic Calendar

Dynamic Calendar 는 추가 라이브러리를 필요로 하지 않습니다. data-lang 라고 하여 나라별 언어를 설정할 수 있습니다. 사용방법은 https://www.codehim.com/date-time/dynamic-calendar-in-javascript-with-example/ 에서 확인 가능합니다. 소스파일 보시면 data-lang 설정이 있으며 en, id, fr 3가지 설정가능 하며 한국어가 없어서 ko 항목을 추가 적용하여 소스를 제공했습니다.
웹프로그램밍 자료실/JAVA 자료 2022. 7. 29. 09:05
[해피CGI][cgimall]작은 원형 로딩 표시기 - jquery-spinner.js

- 라이센스 MIT - 사용 방법 1. 파일 상단에 Jquery 라이브러리와 플러그인 js 파일, 플러그인 css 파일을 링크합니다. 2. 컨텐츠를 생성하고 플러그인을 호출합니다. 3. 어떤 작업을 시작한 후 로딩 표시를 출력합니다. 4. HTTP/AJAX 요청이 완료된 후 로딩 표시를 숨깁니다. 5. 로딩 표시와 숨김 애니메이션의 속도를 조절할 수 있습니다. 6. 플러그인을 비활성화 시킬 수 있습니다. - 작동 예제
웹프로그램밍 자료실/JAVA 자료 2022. 7. 27. 09:08
[해피CGI][cgimall]범위 슬라이더로 텍스트 확대/축소 JQuery 플러그인

- 라이센스 MIT - 사용 방법 1. 파일 상단에 Jquery 라이브러리와 content-zoom-slider.min.js 파일을 링크합니다. 2. 플러그인에서 사용되는 Font Awesome Iconic Font 사용을 위해 css를 링크합니다. 3. 확대/축소 툴바를 만듭니다. 4. 텍스트 영역을 추가하고 플러그인을 호출합니다. 5. 확대/축소 범위를 설정할 수 있습니다. 6. 초기 출력 비율을 설정할 수 있습니다. 7. 확대/축소 단계를 설정할 수 있습니다. - 작동 예제
웹프로그램밍 자료실/JAVA 자료 2022. 7. 26. 09:07
[해피CGI][cgimall]Simple Stopwatch Plugin With jQuery - jsRapStopwatch

다운로드 받은 파일의 압축을 해제한 뒤 index.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. 시간이 지나는 도중에, 시간 위를 클릭하면 시간이 멈추는 효과가 있습니다. 사용방법은 아래와 같습니다. 플러그인의 설명대로 특정 웹페이지에 어느 정도 머물렀는지 파악하기 위한 용도로 활용해봄직 하네요.
웹프로그램밍 자료실/JAVA 자료 2022. 7. 21. 09:05
[해피CGI][cgimall]접근성과 확장성에 중점을 둔 탭 브라우징 jQuery 플러그인 Skeletabs

접근성과 확장성에 중점을 둔 탭 브라우징 jQuery 플러그인 Skeletabs 스크린 리더 와 키보드 사용자의 편의를 사용하여 다양한 응용버전도 있으며, 다양한 개발자의 창의적인 응용도 용이하도록 제공되고 있습니다. 다양한 매개변수 및 옵션을 제공하고 있으며, 라이트 버전 및 다크버전 두가지 테마로 구성되어 있습니다.
웹프로그램밍 자료실/JAVA 자료 2022. 7. 20. 09:05
[해피CGI][cgimall]Sortable List View With jQuery - treeSortable

첨부파일을 다운로드하고, 압축을 해제하면 나오는 index.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. Jqurey UI를 기반으로 제작이 되었습니다. 트리형 메뉴를 드래그 앤 드랍을 이용해서 트리 구조를 변경하거나, 새로운 메뉴를 생성하고, 삭제하는 UI를 구현을해 둔 프로그램입니다. 사용방법은 아래와 같습니다.
웹프로그램밍 자료실/JAVA 자료 2022. 7. 15. 11:10
[해피CGI][cgimall] lightbox gallery plugin

jQuery 를 이용하여 라이트 박스를 만들 수 있습니다. 사용자 정의가 가능합니다. 이미지, 비디오(YouTube, Vimeo, Wistia, Brightcove), Soundcloud 트랙, IFRAME 및 AJAX 콘텐츠를 지원하도록 제작되었습니다. 반응형 으로 제작 되었습니다. MIT 라이센스 입니다. 사용법은 간단 합니다. 1. 라이브러리 호출 2. 컨텐츠 선언 빨간색은 라이트박스에 보여질 썸네일 입니다. 파란색은 리스트에 보여질 썸네일 입니다. 3. 실행 var foo = $('#gallery'); foo.poptrox(); 실행화면 입니다.
웹프로그램밍 자료실/JAVA 자료 2021. 9. 13. 09:23
Prev 1 2 Next