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

Jquery 를 이용하여 웹사이트의 소스 퍼가기를 막을 수 있습니다. 기타 용도에 따라서 단축키들을 막을 수 있습니다. 물론 완벽한 차단 방법은 아니지만 최대한 불편하게 만든다 라고 생각하시는게 맞을듯 합니다. 차단하는 단축키는 아래와 같습니다. 압축파일을 해제하시면 demo.html 파일이 있습니다. 해당 파일에는 HTML 과 SCRIPT 가 같이 포함되어 있습니다. 부분적으로 사용하고 싶거나 특정 기능만 사용하고 싶다면 아래의 스크립트를 수정하시면 됩니다. //Mouse Right Click document.addEventListener('contextmenu',function(e){ e.preventDefault(); }); //Keyboard Keys document.addEventListener..

Jquery 를 이용하여 회원이용 약관 같은 페이지의 체크박스를 모두 체크하는 기능입니다 기능을 사용하기 위해서는 jquery 를 호출하셔야 합니다. HTML 파일은 아래와 같은 구조로 되어 있습니다. 스크립트 호출 부분 입니다.

반응형으로 제작된 jQuery 사이트 메뉴 플러그인 SIDR입니다. 여타 다른 플러그인과 같은 사용법으로 하시면 됩니다. 테마는 총 3개를 지원하며, CSS 파일로 구분됩니다. 메뉴의 구동 방식은 3가지 이며, 다양한 옵션을 통해 구동위치, 기준점, 속도 등등을 제어할 수 있습니다.

다운로드 받은 파일의 압축을 풀고 index.html 파일을 웹브라우저로 열어서 보면 확인이 가능합니다. 좌측에 나열된 항목들을 체크박스로 선택해서 우측으로 이동시켜서 어떤 항목을 선택할지를 입력받는 입력폼으로 사용이 가능합니다. 위 그림 처럼 그룹화시켜서 한번 체크하면 해당 그룹에 속한 전체를 선택하는 것도 가능하네요. 그룹화 시키지 않고 하나하나 개별옵션을 선택하도록 한 예제입니다. 선택할 옵션들을 단어로 검색하는 예제입니다. 샘플로 제공해준 소스코드를 보면선택에 필요한 항목들을 조절하는 것은 그리 어려워 보이진 않네요. 출처는 https://www.jqueryscript.net/form/Groupable-Searchable-Dual-Listbox-Transfer.html 입니다.

네이버에서 만든 슬라이드 jquery 이며, 실제 네이버 서비스( 뿜, 샵윈도우, 쇼핑 검색, 스포츠 등) 에서도 사용되고 있습니다. https://codepen.io/egjs/pen/VNQPQd위의 링크에서 샘플 소스 참고 할 수 있습니다. https://d2.naver.com/helloworld/8618093 소개 글도 참고하시기 바랍니다.

버튼을 클릭하면 박스의 크기가 애니메이션 효과를 내면서 크기가 달라지는 소스입니다. 간단한 소스로 애니메이션 효과를 낼 수 있어 유용하게 사용할 수 있을듯 합니다.

이미지를 레이어팝업으로 표시해주는 간단한 jQuery 플러그인 입니다. 첨부된 파일을 다운로드 받아서 압축을 풀고 examples 폴더내의 몇개의 HTML문서를 웹브라우저로 열어보면 몇가지 유형의 샘플을 확인해볼수 있습니다. 기본 형태의 샘플은 이미지를 확대,축소, 회전 시키는게 가능합니다. 이미지뷰어로 사용되는 툴바를 변경한 예제입니다. 버튼을 클릭해서 모달을 열고 모달내의 이미지를 표시하는 예제입니다. 그 외에 전체화면으로 이미지뷰어를 표시해주거나, 마우스 스크롤을 이용해서 이미지를 확대,축소하는 등의 예제가 있네요. 비교적 간단하게 사용할수 있지만, 생각보다는 여러가지 옵션들이 지원이 되네요. 옵션에 대한 세부적인 설명과, 이벤트가 발생했을때 콜백에 대한 부분은 https://www.jquerysc..

- 라이센스 MIT - 사용 방법 1. 파일 상단에 jquery 라이브러리 파일과 textarea_MaxCharacterLimit.js 파일 링크를 걸어줍니다. 2. 입력된 글자수 출력을 위한 카운터 객체를 추가합니다. 3. TEXTAREA 객체를 추가하고 textarea_MaxCharacterLimit 함수를 호출합니다. 함수의 인자값은 아래와 같습니다. totalCharsAllowed : 입력 제한 글자수 textareaIdentifier : TEXTAREA ID spanId : 카운터 ID - 작동 예제 작동 예제를 보듯 글자수를 Byte로 제한하지 않고 실제 글자수로 체크하는 듯 합니다. 한글의 경우 조합된 문자 1개가 1로 카운팅이 됩니다.

- 라이센스 MIT - 사용 방법 1. 파일 상단에 jquery 라이브러리 파일과 auto-resize.js 파일 링크를 걸어줍니다. 2. TEXTAREA 폼을 추가하고, auto-resize 함수를 호출합니다. 3. 최소 줄수, 최대 줄수를 옵션으로 설정할 수 있습니다. minRows : 기본값 2 maxRows : 기본값 무한대 - 작동 예제

Notify는 닫기 버튼과 Font Awesome 아이콘이있는 Bootstrap 알림 표시 줄을 만드는 가벼운 jQuery 플러그인입니다. 플러그인을 사용하면 다른 jQuery / JavaScript 이벤트에서 여러 동적 알림을 트리거 할 수 있습니다. 가까운 오류, 성공, 정보 및 경고 알림 메시지를 사용자에게 쉽게 표시 할 수 있습니다. 또한 이러한 CSS3 스타일 알림 바는 최상의 사용자 경험을 제공합니다. 알림 메시지는 자동으로 사라지지만 수동으로 닫을 수도 있습니다. 라이센스는 MIT 라이센스 입니다. 1.라이브러리 및 CSS를 호출하세요. 2.버튼을 하나 만들어 보세요.클릭해주세요. 3.버튼에 각종 이벤트를 걸어 보세요. jQuery / JavaScript 이벤트 (click, mouseent..