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

* DiagonalSlideshow 소개 - 대각선으로 이미지 및 컨텐츠를 슬라이드 하여 볼 수 있는 컨텐츠입니다 * DiagonalSlideshow 사용법 - 첨부된 압축파일을 다운로드 하여 원하는 작업 경로에 업로드 한후 압축을 해재합니다 디자인 문서파일 html파일을 열고 아래와 같이 상단에는 css 파일선언과 하단에는 위에 압축을 해재하여 생긴 js 파일을 불러옵니다 결과는 아래와 같습니다 첨부된 압축파일에 js,css 및 보다 자세한 샘플소스가 있으니 참고하면 도움이 될것 같습니다

* Colorbox License - MIT License * Colorbox 소개 - 사진, 그룹화, 슬라이드 쇼, 아약스, 인라인 및 아이프레임 콘텐츠를 지원합니다. - 경량 : 10KB의 JavaScript (gzipped 5KB 미만). - CSS를 통해 제어되므로 스타일을 다시 지정할 수 있습니다. - 소스 파일을 변경하지 않고 콜백 및 이벤트 훅으로 확장 할 수 있습니다. - JS에 설정되며 기존 HTML을 변경하지 않아도됩니다. - 이미지를 사진 그룹에 미리로드합니다. * Colorbox 사용방법 첨부된 압축파일을 해제하여 원하는 경로에 업로드합니다 jquery , colorbox js파일과 css 파일을 경로에 맞게 불러옵니다 라이트 박스 레이어 팝업 이미지를 보여주기 위한 스크립트를 호출..

웹페이지에 간단하게 툴팁을 추가할수 있는 스크립트 입니다. 다운로드 받은 파일의 압축을 해제한 후 example/GetTip Example #1.html 라는 HTML문서를 웹브라우저로 열어보면 확인이 가능합니다. 마우스 오버시 상하좌우 어느쪽에 툴팁을 표시할것인지 정할수 있고, 얼마나 오랫동안 오버를 해야 나오는지 툴팁이 나온후에 어느 정도 유지하는지 시간을 제어할수가 있습니다. 마우스를 오버하거나, 입력박스에 포커스를 주거나, 특정 버튼을 클릭하거나 했을때 화면에 툴팁을 추가할 수 있습니다. 특정 객체에 툴팁을 추가하는 방법이 생각보다는 쉽네요. HTML 태그를 이용해서, 1. jquery 를 사용할 수 있게 추가하고, 2. js/jquery.gettip.js 를 이용하도록 추가합니다. 3. 툴팁이 ..

커서가 드래그 가능한 부분 위에 있을때만 드래그가 가능합니다. 드래그 가능한 영역 위의 특정 영역에서는 드래그가 되지 않도록 할 수 있습니다. handle 옵션으로 드래그 가능한 영역을 지정하고 cancel 옵션으로 드래그 불가한 영역을 지정합니다.

드래그 및 정지 이벤트를 사용하여 드래그 가능한 레이어 기능을 활용 할 수 있습니다. 드래하여 영영을 움직이면 숫자가 증가 합니다. 위 기능을 활용하면 드래그를 시작할때, 드래그 중에, 드래그를 멈출때 각각 다른 처리를 해줄 수 있습니다.

원형, 방사형으로 마우스 클릭후 설정을 늘렸다줄였다 할 수 있는 소스로 일종의 수치값을 설정하여 보여주는 퍼포먼스를 가진 roundslider UI 를 지원합니다. 모바일용 터치, 마우스 스크롤, 키보드 액션도 지원되어 유용한 설정툴을 만들수 있습니다. 본 소스의 장점은 아래와 같습니다. 1) CSS를 통해 매우 쉽게 사용자 정의 가능 2) 모든 CSS3 애니메이션 지원 3) 범위 슬라이더 지원 4) 선형 스텝 증분 5) 터치 지원 6) 키보드 지원 7) 마우스 스크롤 지원 8) 오픈 소스 ( MIT 라이센스 하에 있음 ) 위와같은 다양한 타입의 설정이 가능합니다. 수치값을 text 로 설정도 할 수 있어 정확한 수치값을 기입하여 적용하는 UI 도 가능합니다. 다양한 항목에서 이용이 가능한 RoundSl..

네이버 스마트에디터는 JavaScript로 구현된 웹기반 Wysiwyg 에디터 입니다. 소스를 다운받아 이용이 가능한 에디터는 Ver2.x 로 제한 되어 있으며, 네이버의 각종 서비스에서 제공되는 스마트에디터 Ver3.x 버전은 공개되지 않고 있습니다. http://naver.github.io/smarteditor2/demo/ 페이지에서 최신버전의 소스를 다운로드가 가능합니다. 데모페이지 주소 : http://naver.github.io/smarteditor2/user_guide/ 에디터의 설치 방법 및 기능 안내등은 아래 페이지를 통해 확인이 가능 합니다. http://naver.github.io/smarteditor2/user_guide/

Jquery 로 제작된 시계모양의 UI를 통해서 시간을 입력받기 위한 스크립트입니다. 첨부된 파일을 다운로드해서 압축을 풀어보면 index.html 파일을 웹브라우저를 이용해서 열어보면 확인이 됩니다. 열어 보면 입력박스만 있는데 입력박스를 마우스로 클릭해보면 아래 그림과 같이 시간을 선택하고 분을 선택하는 시계를 이용해서 입력박스에 시간을 입력할수 있습니다. 시계를 조절하는 몇가지 옵션이 있는데, 입력박스를 클릭했을때 시계를 이용해서 시간을 입력받도록 적용하는 방법은 https://www.jqueryscript.net/time-clock/Material-Time-Picker-Plugin-jQuery-MDTimePicker.html 위 페이지의 옵션의 이름, 설정된 값등이 나와 있습니다.

부드러운 이동 애니메이션을 위한 Easing jquery으로 오브젝트의 자연스러운 가속도 움직임을 적용하기에 적합합니다. 단조로운 사이트에 자연스러운 움직임을 추가할 수 있으며, 다양한 영역에 적용이 가능합니다. 단조로운 움직임과, 부드러운 움직임의 데모를 비교하면 확실히 느껴지네요.

체크박스, 라디오 박스, 셀렉트 박스 등 여러 폼타입과 위젯을 하나의로 그룹화해서 쓸수 있는 jqueryui 입니다. 첫번째 박스는 가로 방향의 도구 모음 박스이며, 두번째는 모바일 장치, 각종 기타 기기에 사용할 수 있는 세로 방향의 도구모음 박스입니다. 디자인된 다양한 폼 양식을 사용할려면 적합 합니다.