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

여러개의 날짜를 선택할 수 있는 Javascript 로 제작된 달력입니다. 다운로드 받은 파일의 압축을 해제한후 demo/index.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. 날짜를 입력받기 위한 입력폼을 클릭해보면 아래 그림과 같이 달력이 화면에 표시가 됩니다. 일반적인 달력들은 보통 1개의 날짜를 선택하기 위한 목적으로 사용이 됩니다만, 이 달력 프로그램은 위 화면의 달력에서 쉬프트키를 누르고 날짜를 클릭하면 해당 구간을 지정할 수 있는 특징이 있습니다. 검은색 계열의 스킨도 있네요. 보통의 달력 프로그램들 처럼 날짜를 입력 받는 폼이 있는 위치에 달력을 표시하는 기능도 있네요. Jquery 와 같은 라이브러리를 이용하지 않고 순수 Javascript 로만 제작된 달력 프로그램입니다.

위 처럼 개별 체크를 하다가, 모두 체크를 클릭시 일괄 체크가 되며, 다시한번 체크시 일괄 해지되는 간단한 전체선택 jquery 모두체크 폼입니다. 위 처럼 check-all 이라는 class 와 check01 이라는 class 를 이용하여 적용되는 방식입니다. 위 처럼 class 모두체크 항목에는 class 명을 check-all 로 선언하고 개별 체크항목에는 class 명을 check01 로 선언해주어 checkbox 의 name 값이나 id 값에 구애받지 않고 일괄 체크선택, 체크해제 방식을 간단하게 구현할 수 있습니다.

jquery 를 이용해서 제작된 숫자를 입력받기 위한 가상 키패드 입니다. -/+ 버튼을 이용하거나 숫자를 클릭해서 입력박스에 숫자를 채울수 있습니다. 다운로드 받은 파일의 압축을 해제하고 index.html 파일을 웹브라우저에서 열어보면 확인이 가능합니다. 입력박스를 클릭하면 위 그림 처럼 화면에 키패드가 표시되고, 키 패드에 있는 숫자를 클릭하거나, 화살표로 된 위,아래 버튼을 클릭해서 숫자를 조절해서 원하는 숫자를 입력박스에 숫자를 입력하는 툴입니다. 숫자를 하나씩 지우거나(DELETE), 초기화(CLEAR)하거나, 클릭한 숫자들을 입력박스에 넣거나(DONE) 취소(CANCEL) 하는게 가능합니다. 약간 아쉬운게 IE에서는 지원이 안되네요. bootstrap 는 사용을 해도 되고, 없어도 되긴 하지..

* jquery Dropdown 가볍게 이용가능한 jquery Dropdown 플러그인 입니다 지원 브라우저는 익스플로러8이상 , 크롬, 사파리, 파이어폭스 브라우저를 지원하며 jquery 버전은 1.4 이상 지원합니다 * License MIT License * 설치방법 첨부된 압축파일을 해제하여 원하는 웹루트 디렉터리에 업로드합니다 적용하고자 하는 html 문서를 열어 head 부분에 js , css 를 호출합니다 위와 같은 선택박스가 출력되게끔 아래와 같이 html 과 script 를 삽입합니다 그리고 아래와 같이 함수 호출을 통해 원하는 내장기능을 호출할 수 있습니다 위와 같은 구문을 웹브라우저로 실행하면 아래와 같이 선택된 영역을 따로 표기도 가능합니다 첨부된 압축파일안에 index.html 파일..

TerseBanner 는 jquery 슬라이드 배너입니다 * TerseBanner 소개 TerseBanner는 jQuery carousel 플러그인입니다. 대부분의 carousel 플러그인과 비교하여 terseBanner는 대부분의 요구 사항을 충족하기 위해 가장 일반적으로 사용되고 쉽습니다 터치 스크린 이벤트 지원 * 설치방법 첨부된 압축파일을 해제하여 원하는 웹루트 디렉터리에 업로드 합니다 슬라이드를 적용할 html 문서 상단에 css 를 불러옵니다 슬라이드 처리할 배너이미지를 아래와 같이 구성합니다 하단에 압축파일에 들어있는 js 파일들을 불러옵니다 그리고 하단에 슬라이드 이미지 영역을 감싸고 있는 div class 인 banner-index 를 지정하여 스크립트를 실행합니다 웹브라우저 실행시 결과..

css와 자바스크립트를 사용하여 마우스 오버시 하단에서 텍스트가 나타남과 동시에 마우스의 방향대로 원근감이 느껴지는 카드입니다.

다운로드 받은 파일의 압축을 해제한 후 index.html 파일을 웹브라우저로 열어서 보면 확인이 가능합니다. Wix.com 같은 웹사이트 빌더에서 자주 보이는 웹페이지 안의 특정 공간에 포커스가 생기면 해당 박스를 드래그를 이용해서 크기를 조절하거나, 위치를 조절해서 화면에 배치시키는 jquery + jquery ui 플러그인 입니다. 사용법은 1. jquery 와 jquery ui 를 로드해줍니다. 2. stageltem.js 를 로드해줍니다. 3. 드래그 및 리사이즈를 하고자 하는 DIV를 만들어주고, stageItem 을 실행시켜줍니다. 4. 드래그가 특정 범위 안에 속하게 한다거나, 리사이즈 핸들러의 색상을 조절하거나, 드래그 되는 박스끼리 중첩이 되는 속성을 여부는 아래와 같은 옵션으로 제어가..

MIT 라이센스의 반응형 웹에디터 입니다. #라이센스 MIT 라이센스 입니다. #기능 - Microsoft Word 및 Excel에서 붙여 넣기 기능 - 사용자 정의 테이블 선택, 병합 및 분할 기능 - 미디어 삽입, 이미지 업로드 기능 - CodeMirror, KaTeX(수학기호)를 사용할 수 있습니다. - 반응형 에디터 입니다. #지원 브라우저 #실행 이미지

jQuery를 이용하여 UP / DOWN 되는 스톱위치 플러그인 입니다. 시간을 다운 또는 업 시켜서 보여주고 싶은 분들은 사용하시면 좋겠네요. 먼저 jQuery Library 를 호출하세요.script> script> 타임을 출력할 컨테이너를 만드세요. span> runner 플러그인을 해당 컨터이너 요소에 초기화 합니다. (다양한 옵션을 줘서 초기화 할 수 있습니다.) $('#runner').runner(); 그 다음 runner 플러그인을 실행하시면 됩니다. $('#runner').runner('start'); 그 외에 다양한 옵션들이 있어 종료 타임을 설정할 수 있고 시작, 스탑, 리셋들을 추가하여 스톱위치로 만들 수 있습니다.

입력받은 문자열이 비밀번호로 사용하기에 적당한지를 몇가지 규칙에 마춰서 체크해주는 스크립트입니다. 다운로드 받은 파일의 압축을 해제하고, index.html 파일을 웹브라우저로 열어보면 샘플확인이 가능합니다. 비밀번호칸에 아무것도 입력하지 않은 경우 한글자씩 입력을 해보면 안전한 비밀번호가 되기 위해서 필요한 조건이 만족하면 아래에 만족시킨 항목들이 녹색으로 변경이 됩니다. 비밀번호의 유효성을 체크하는 규칙이 아주 복잡한 규칙은 아니며, 입력한 비밀번호가 최소한 소문자가 1개, 최소한 대문자가 1개, 최소한 숫자가 1개, 최소한 특수문자가 1개, 최소한 8글자에서 15글자 정도에 만족하는지 여부에 의해서 만족하면 위 그림 처럼 만족된 조건의 항목을 하나씩 체크로 표시를 해줍니다. 웹페이지에서 사용하는 방..