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

위의 테이블을 사이즈를 줄이면위와 같이 쉽게 만들어주는 jquery 소스 입니다.변화를 주는 사이즈는 CSS 에서 조절하면 됩니다.이후 스크립트로 merge(병합), move(이동), span 등 으로 조절할 수 있습니다.해당 부분은https://github.com/codefog/restables?tab=readme-ov-file위의 링크에서 잘 설명 되어있으니 참고하시면 되겠습니다.

위와 같이 버튼에 오른쪽 버튼을 누르면 메뉴를 만들어 줄 수 있는 jquery 입니다.사용법은 간단합니다. items 으로 메뉴를 만들고,callback 에서 각 키에 따라 해당 메뉴에 따라 작동하는 스크립트를 작성하면 됩니다.해당 버튼에 다양한 기능을 넣고 싶을때에 오른쪽 버튼을 활용하여 여러 메뉴로 확장하기에 좋은 jquery 로 보입니다.

마우스를 따라 다니는 블랙홀 디자인 입니다.간단한 배경 애니메이션이 필요하실 때 사용 해도 좋을거 같습니다.자세한 내용은 데모에서 확인할 수 있습니다.html

297가지의 언어의 소스코드를 하이라이팅 처리가 가능한 플러그인 Prismjs 입니다.소스 다운로드는 아래 페이지에서 할 수 있습니다.https://prismjs.com/download.html#themes=prism-okaidia&languages=markup+css+clike+javascript 원하는 스킨과 언어를 선택하여 하단에 JS와 CSS 다운로드 버튼을 클릭하여 다운로드 하시면 됩니다.샘플은 아래 페이지를 확인 해주세요 (okaidia 스킨)https://prismjs.com/index.html?theme=prism-okaidia 다른 스킨의 샘플은 홈페이지에서 오른쪽 테마를 클릭하면 보실수가 있습니다.

다양한 브라우저를 지원하는 심플한 클립보드에 텍스트를 복사하는 플러그인 Clibboardjs 입니다.사용방법이 어렵지 않아 웹디자이너분들도 활용을 할 수 있습니다.사용방법은 https://clipboardjs.com/ 페이지에서 샘플과 함께 확인이 가능 합니다.npm install 필요없이 ZIP 파일을 다운로드 받아서 압축을 풀고 업로드 하여 진행 하시면 됩니다.

- 작동 원리이 플러그인은 간단한 API를 통해 HTML 구성 요소 로딩을 처리합니다. 서버에서 구성 요소를 가져와 대상 컨테이너에 주입합니다. 로딩 프로세스 동안 구성 요소의 최종 레이아웃과 일치하는 스켈레톤 화면을 표시합니다.플러그인은 템플릿 변수를 통한 동적 데이터 주입을 지원합니다. 로드된 구성 요소 내에서 콘텐츠를 채우기 위해 데이터 객체를 전달할 수 있습니다. 이는 사용자별 콘텐츠, 동적 텍스트 또는 HTML 템플릿에 삽입해야 하는 모든 가변 데이터에 적합합니다.스켈레톤 로더는 실제 구성 요소 페치 시간 동안만 실행됩니다. 이는 인위적인 지연이 아닌 실제 로딩 상태를 반영하는 자연스러운 로딩 경험을 만들어냅니다.- 라이센스MIT- 사용 방법1. 최신 jQuery 라이브러리를 로드한 후 필요한 ..

- 설명SignPad는 HTML5 캔버스를 사용하여 디지털 서명 패드를 만드는 가볍고 터치 기능이 있는 jQuery 플러그인입니다. 온라인 계약, 사용자 계약 또는 디지털 포기서에 이상적입니다. 사용자는 문서를 인쇄, 서명 및 스캔하는 대신 화면에서 직접 서명할 수 있습니다.이 서명 패드 플러그인은 사용자가 전자적으로 문서에 서명할 수 있게 하고 실행 취소 및 지우기 기능을 지원합니다. PNG 이미지(base64)로 서명을 캡처하여 사용자 ID와 타임스탬프가 있는 JSON 형식으로 서버로 전송합니다.- 라이센스MIT- 사용 방법1. jQuery 라이브러리를 불러옵니다.2. jQuery 라이브러리 뒤에 signpad.js 스크립트를 포함합니다.3. 서명 패드를 렌더링할 빈 div 요소를 만듭니다.4. 기본..

Zebra  Accordion 은 가볍고, 여러 브라우저에서 사용 가능하며, 사용자 정의가 쉬운 jQuery 아코디언 플러그인으로, 대규모 콘텐츠 그룹을 효과적으로 구성하는 데 유용합니다.# 특징 CSS를 통해 높은 수준의 사용자 정의 가능모든 탭은 확장/축소될 수 있습니다마우스를 올리면 탭이 확장될 수 있습니다.브라우저 창 크기에 맞게 자동 스크롤ARIA 속성을 통해 접근 가능가볍고 사용하기 편리함 # 사용방법 1. Css2. HTML3. JavaScript# 옵션정보https://github.com/stefangabos/Zebra_Accordion 사이트에는 속성과 이벤트에 대한 안내가 되어 있습니다. 활용하여 사용하시려면 참고 바랍니다.

위의 이미지를 보면 쉽게 이해가 가능한데, 특별히 js 를 쓰지 않고, html data 속성으로 js 기능을 사용할수 있습니다.data-check-field 에 field5 를 주면 field5 값을 가진 name 은 모두 checked 가 됩니다.이렇게 사용 가능하게 해주는 jquery js 입니다.https://cdn.jsdelivr.net/gh/scintilla0/jquery.databind@latest/jquery.databind.min.jsCDN 을 사용하셔도 되고, github 에서 js 를 다운로드 받으셔서 사용하셔도 됩니다.https://www.jqueryscript.net/demo/easy-data-binding/그리고 위의 데모 사이트를 보시고, 활용하시면 되겠습니다.

시작일과 종료일 범위 선택 기능이 강력한 Date Range Picker 입니다.싱글 달력으로도 이용이 가능 합니다.https://www.daterangepicker.com/#examples 페이지를 통해 구동되는 샘플들을 코드와 함께 확인이 가능 합니다. 각종 제공되는 옵션들도 https://www.daterangepicker.com/#options 페이지에서 같이 확인이 가능 합니다.