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

스크립트와 css 로 다중선택이 가능한 셀렉트 박스입니다. 좌측 셀렉트 박스에서 키워드를 다중선택이 가능합니다. 선택한 키워드는 우측에 출력이 됩니다. 검색기능을 지원합니다. 목록이 길경우 검색박스에 문자를 입력하면 목록에 있는 키워드에서 자동으로 검색됩니다 해당 사이트에서 소스에 대한 설명과 소스를 다운로드 받으실수 있습니다.

쉽게 파일을 업로드 할수 있는 19$ 의 유료 플러그인 입니다. 파일 업로드를 쉽게 할수 있으며, 위지윅 내에 파일다운로드가 바로 생겨서 좋은 플러그인 입니다. 위 버튼을 누르면 바로 파일을 선택할수 있습니다. 파일을 선택하는 즉시 업로드 되며 위지윅내에 파일 다운로드 가 바로 생성됩니다. 간단히 파일을 업로드 하기에는 좋은것 같습니다.

* Jquery Slideshow Feature List 소개 - Jquery 로 제작된 Slideshow 이며 슬라이드 탭에 대한 설정과 마우스가 영역으로 이동되었을때 애니메이션에 대한 작동여부, 슬라이드탭에 대한 전환시간에 대한 설정이 가능합니다 Jquery 1.3 버전이상 이용할 수 있습니다 * 설치 및 사용방법 - 첨부된 압축파일을 원하는 웹서버에 공간에 다운로드하여 압축을 해제하고 jquery 파일과 슬라이드에 필요한 js를 아래와 같이 선언합니다 탭메뉴의 동작을 할수있게 슬라이드 함수를 및 탭 아이디값과 탭이동시 보여줘야될 영역에 대한 id 값을 선업합니다 탭메뉴와 슬라이드 영역에 대한 id값 선언과 내용을 작성하여 완성합니다

ckeditor 본문안에 텍스트를 트윗할 수 있는 기능입니다 다운받은 파일을 압축을 해제하여 ckeditor/plugins/tweetabletext 에 압축을 해제합니다 ckeditor/config.js 파일을 열어서 아래와 같은 플러그인 추가구문을 찾아서 추가해주면 됩니다 config.extraPlugins = 'tweetabletext';

* Jquery Drop down Menu 소개 - 크로스 브라우저 호환성 - CSS 메뉴로 액세스 할 수 있습니다. - 최적화 된 검색 엔진 - jQuery 드롭 다운 메뉴의 정렬되지 않은 목록 (LI 및 UL HTML 태그) 구조 지우기 - 설치 및 업데이트가 쉽습니다. - 환상적인 애니메이션 및 전환 효과 - 여러 가지 미리 색칠 된 색 구성표 - CSS로 완전히 사용자 정의 할 수있는 스타일링 * 설치방법 및 사용방법 - jquery 버전은 최소 1.3.2 버전 이상이면 되며 첨부된 파일을 다운로드 하여 원하시는 웹루트 디렉터리에 업로드하고 압축을 해제합니다 작업해야될 html 문서안에 jquery.js 와 menu.js 를 호출합니다 샘플소스의 태그 class들은 menu.css 에 선언되어있으..

원하는 가장자리에 슬라이트로 메뉴를 출력할 수 있도록 하는 PC 모바일 모두 사용이 가능한 jQuery plugin 입니다. http://mmenu.frebsite.nl/examples.html 에서 샘플을 확인하실 수 있습니다. MIT license 에 벗어나지 않는 범위에서 자유로이 사용 가능합니다.

다운로드 받은 파일의 압축을 풀어서 jigzaw.html 을 웹브라우저로 열어보면 됩니다. 위 그림을 아래 그림 처럼 퍼즐로 마추면 되는건가 봅니다. 배경에 원본그림이 있어서 몇개 찾아서 마춰보긴 했습니다만 다 마추려면 시간이 꽤 걸릴듯 하네요. 퍼즐로 사용할 이미지들이 몇개 있네요. 이미지파일의 이름을 소스코드내에 입력만 하면 그 사진을 잘라서 퍼즐마추기가 되네요. 출처는 https://www.sourcecodester.com/javascript/5479/jigzaw-puzzle.html 입니다.

버튼을 클릭하면 화면에 이펙트가 생기는 스크립트 입니다. 클릭했을때 화면에 보이는 몇가지 유형의 효과가 있지만, 스크린샷으로 저장하기는 쉽지가 않네요. 소스코드도 단순해서 버튼에 동적인 효과를 줄때 쉽게 사용이 가능할것 같네요 출처는 http://www.htmldrive.net/items/show/1846/animateClick-with-jQuery 입니다. 각 클릭했을때 어떤 효과가 생기는지는 아래의 데모를 통해서 바로 확인이 가능합니다. http://www.htmldrive.net/items/demo/1846/animateClick-with-jQuery

* ckeditor - Simple Button - 이 플러그인은 문서내에 일반 또는 링크 버튼을 간편하게 생성할 수 있게 도와줍니다. * 라이센스(무료) - GPLV3, LGPL3, MPL * 설치방법 - 플러그인 파일을 다운로드 받아 ckeditor 가 설치된 폴더내 plugins 폴더안에 업로드 합니다. 예) http://example.com/ckeditor/plugins/simplebutton - ckeditor 의 설정파일인 config.js 파일을 열어 아래 소스를 추가합니다. config.extraPlugins = 'simplebutton'; - 위지윅에디터를 확인하면 아래 아이콘이 추가 된 것을 확인할 수 있습니다. - 버튼에 들어갈 문구와 링크 URL, 버튼 색상을 선택하면 완료 - 버튼..

엑셀과 같은 타입의 테이블 효과로 스프레드 시트와 같은 행에 의해 입력 구조화된 데이터 행을 생성할 수 있습니다. jquery 를 ui 위젯을 지원하며, HTML5 입력 유형을 포함하여 주요 웹 브라우저와 호환성이 좋으며, 활발한 업데이트가 진행되는 소스입니다. ┼, X 아이콘을 클릭하시면 테이블이 1칸씩 추가되거나 선택된 tr 영역이 삭제되게 됩니다. 기본 방식은 위와같이 간단한 방식이며, 각 항목별 데모표 형식을 다운받아 적용할 수 있습니다.