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

모바일용 웹페이지를 제작할 때 상단 부분에 세줄(햄버거)이 화면을 스크롤(스와이프) 할때 숨기거나, 표시해주는 jQuery 플러그인입니다. 스크롤을 내려보면 상단에 세줄 모양의 바가 화면 스크롤을 따라서 내려오거나, 스크롤을 빠르게 내리는 경우 상단의 바가 화면에서 사라집니다. 햄거버 모양의 아이콘 외에 로고, 그 외의 아이콘 들이 추가된 예제입니다. 햄버거바를 클릭하면 메뉴 화면이 열리면서 햄버거 모양의 아이콘이 닫기를 의미하는 아이콘으로 변경시 에니메이션을 주는 예제입니다. 그 외에도 햄버거 바의 위치를 좌에서 우로 조절을 한다거나, 로고를 포함한다거나, 아래 그림 처럼 검색폼이 포함된 예제가 있습니다.

테이블 컬럼을 버튼 하나로 자유롭게 이동할수 있는 ckeditor 플러그인 입니다. 위와 같이 테이블이 있을때 위의 버튼만 누르면 이렇게 바로 위치가 바껴버립니다. 테이블을 많이 사용하시는 분들에겐 아주 유용한 플러그인 같습니다. 다만 놀랍도록 유용한만큼 유료로 판매되고 있습니다. $39 로 다소 부담스러운 가격이지만, 기능이 유용한 만큼 한번 고민해 보는것도 좋을것 같습니다.

* ckeditor - UI Color Picker - 이 플러그인은 컬러피커를 통해 에디터의 색상 변경을 도와주는 플러그인 입니다. * 라이센스(무료) - GPLV3, LGPL3, MPL * 설치방법 - 플러그인 파일을 다운로드 받아 ckeditor 가 설치된 폴더내 plugins 폴더안에 업로드 합니다. 예) http://example.com/ckeditor/plugins/uicolor - ckeditor 의 설정파일인 config.js 파일을 열어 아래 소스를 추가합니다. config.extraPlugins = 'uicolor'; - 위지윅에디터를 확인하면 아래 아이콘이 추가 된 것을 확인할 수 있습니다. - 아이콘을 눌러 컬러피커를 통해 색상코드를 선택 - 하단에 출력되는 코드를 에디터가 설치된 ..

ckeditor - LoopIndex Track Changes - 이 플러그인은 에디터 다중 사용자 환경에서 각 사용자별 텍스트 변경(추가/삭제) 사항을 추적할 수 있습니다. - 변경사항은 각 사용자에 따라 다르게 색칠되고 사용자 정보를 표시합니다. * 라이센스(무료) - GPL * 설치방법 - 플러그인 파일을 다운로드 받아 ckeditor 가 설치된 폴더내 plugins 폴더안에 업로드 합니다. 예) http://example.com/ckeditor/plugins/lite - ckeditor 의 설정파일인 config.js 파일을 열어 아래 소스를 추가합니다. config.extraPlugins = 'lite'; - 위지윅에디터를 확인하면 아래 아이콘이 추가 된 것을 확인할 수 있습니다. - 문서 내용..

웹사이트에 유용하게 적용할 Jquery Plugin 입니다 * License - MIT License (MIT) * 특징 - 수직/수평 스크롤 - 조정 가능한 스크롤 - 마우스 휠, 키보드 및 터치 지원 - CSS를 통해 즉시 사용가능한 테마와 사용자 정의 - RTL 방향지원 - 스크롤 기능의 전체 제어를 위한 옵션 매개 변수 - 사용자 정의 콜백 * 사용법 - HTML 선언부, Jquery & CSS 선언부 로 나뉘어져 있으며 자세한 코드 및 설명은 첨부된 소스를 다운로드 받고 아래의 링크를 클릭하시면 샘플코드를 확인하실 수 있습니다 http://manos.malihu.gr/jquery-custom-content-scroller/ * 요구사항 및 호환성 - Jquery Ver 1.6.0.**** 이상 ..

ckeditor 에 alert message 를 넣을수 있는 플러그인 입니다. https://www.youtube.com/watch?v=seNErarAUUg 유투브 영상으로도 해당 기능에 대한 데모를 확인하실수 있습니다.

* ckeditor - Bootstrap Glyphicon - 이 플러그인을 이용하여 에디터 작성시 아이콘을 사용할 수 있습니다. * 라이센스(무료) - GPLV3, LGPL3, MPL, MIT * 설치방법 - 플러그인 파일을 다운로드 받아 ckeditor 가 설치된 폴더내 plugins 폴더안에 업로드 합니다. 예) http://example.com/ckeditor/plugins/glyphicons - ckeditor 의 설정파일인 config.js 파일을 열어 아래 소스를 추가합니다. config.extraPlugins = 'glyphicons'; config.contentsCss = '부트스트랩CSS경로'; config.allowedContent = true; - ckeditor 툴바셋에 Glyph..

HTML 태그를 쉽게 넣을 수 있는 플러그인 입니다. HTML 까지만 쳐도 는 자동으로 완성 되어 편리합니다. html 소스 수정이 많은 이에게 좋은 플러그인 같으며, 유료 플러그인 으로 19$ 로 구매 가능합니다. 대부분 좋은 무료 플러그인도 많지만 대부분 유료 플러그인이 퀄리티 면에서 좋은것 같습니다. 사용해 보시길 추천합니다.

* ckeditor - Quicktable - 이 플러그인은 문서 작성시 손쉽게 테이블 태그 작성을 도와주는 플러그인 입니다. * 라이센스(무료) - GPLV3, LGPL3, MPL * 설치방법 - 플러그인 파일을 다운로드 받아 ckeditor 가 설치된 폴더내 plugins 폴더안에 업로드 합니다. 예) http://example.com/ckeditor/plugins/quicktable - ckeditor 의 설정파일인 config.js 파일을 열어 아래 소스를 추가합니다. config.extraPlugins = 'quicktable'; - 위지윅에디터를 확인하면 아래 아이콘이 추가 된 것을 확인할 수 있습니다. - 아이콘을 눌러 테이블 가로, 세로 개수를 설정 하면 완료.

플러그인 설치 후 상단에 보시면 아이콘이 생깁니다. 지역을 검색하실 수 있습니다. 그렇게 검색된 위치의 지도를 위지윅에 추가할수 있는 플러그인 입니다. 지도의 종류도 여러 스타일이 있으며, 지도 추가시 참 좋은 플러그인 같습니다.