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

웹페이지에 바코드를 생성해서 출력하는 스크립트입니다. 첨부파일을 다운로드 받아서 압축을 해제한후 example/index.html 파일을 웹브라우저로 열어서 보면 간단한 소스코드로 바코드를 생성해서 화면에 출력하는 예제를 확인해볼 수 있습니다. 예제로 제공되는 코드와, 생성되는 바코드를 봤을때, 웹페이지 화면에 바코드를 생성하면서 아래와 같이 몇가지 옵션을 줄수도 있는걸로 확인이 되네요. 지원하는 바코드 프로토콜이 아래와 같습니다.

* ckeditor - Keep TextSelection Keep TextSelection는 위지윅 모드와 소스 모드 사이를 전환 할 때 텍스트 선택을 유지하도록 도와줍니다. * 라이센스(무료) - MIT * 설치방법 - 플러그인 파일을 다운로드 받아 ckeditor 가 설치된 폴더내 plugins 폴더안에 업로드 합니다. 예) http://example.com/ckeditor/plugins/textselection - ckeditor 의 설정파일인 config.js 파일을 열어 아래 소스를 추가합니다. config.extraPlugins = 'textselection'; - 에디터 위지윅 모드에서 원하는 부분을 선택하고 [소스] 버튼을 눌러 소스 모드로 접속하면 위지윅 모드에서 선택한 부분의 선택이 유..

* ckeditor - Spacing Sliders Spacing Sliders는 편집기에서 CSS 값인 line-height 와 letter-spacing 값을 슬라이더로 조절하도록 도와줍니다. * 라이센스(무료) - GPLV3, LGPL3, MPL * 설치방법 - 플러그인 파일을 다운로드 받아 ckeditor 가 설치된 폴더내 plugins 폴더안에 업로드 합니다. 예) http://example.com/ckeditor/plugins/spacingsliders - ckeditor 의 설정파일인 config.js 파일을 열어 아래 소스를 추가합니다. config.extraPlugins = 'spacingsliders';

라운드 형태의 스크롤 디자인부터 rail 형태의 스크롤바등 여러개의 모양으로 변경하여 이용할 수 있는 크로싱 스크롤 소스입니다. 사용조건은 아래와 같습니다. 소스내에 아래의 style 소스와 js 소스를 반드시 입력되어있어야 합니다. 또한 각 style 소스내에 id 값을 가진 css 소스도 삽입되어야 합니다. 위 조건을 만들어주셨다면 라는 각 class 명에 삽입될 scrollbar-dynamic 등으로 구분된 class 명칭을 작성하시면 해당 스크롤 바의 모양을 이용하여 적용할 수 있게됩니다.

날짜나 시간을 확인하고 선택가능한 달력 플러그인입니다. 첨부된 파일의 압축을 해제해서 examples/demo.html 웹브라우저로 열어보면 확인이 가능합니다. 한 6가지 정도 예제가 있네요 1. 날짜 + 시간 2. 날짜 + 시간(초는 제외) 3. 년도 와 월 4. 시간(시분초) 5. 시간(시분) 등등의 웹페이지에서 날짜와, 시간을 입력받을수 있는 플러그인입니다.

아래 영역은 각각 드래그 가능한 영역입니다. Item 영역을 드래그 하면 순서를 변경할 수 있습니다. Drag me down 영역은 드래그 하면 복사되어 해당 위치로 들어갑니다. 복사된 영역을 드래그 하면 item 영역처럼 이동이 됩니다. sortable id 값은 ul 에 들어가 있어야 하고 draggable id 값은 li 에 들어가 있어야 위와 같이 동작합니다.

수직, 수평 스크롤바를 사용자가 정의 및 설정하는 제이쿼리 플로그인 소스입니다. 다양한 기능 및 동작 기능을 제공합니다. 스크롤 막대 좌우크기, 바 모양, 상하 이동 버튼 스타일, 스크롤바 이동 효과 등등 다양한 스타일 및 동작을 제공합니다. 기본 제공되는 소스는 물론 다양한 매개변수를 통해 사용자 정의 설정이 가능합니다.

제이쿼리를 이용하여 원 스크롤링 사이트 만드는 자바스크립트 소스입니다. 웹 및 모바일 모두 지원하는 레이아웃용 제이쿼리 플러그인 이며, 다중의 레이어를 겹쳐서 스크롤하여 구성하는 원페이지 스크롤링 사이트 제작용 소스입니다. 반응형이며, 트렌디한 사이트 레이아웃에 사이트 제작시 유용합니다.

jquery로 제작된 accordion 을 이용한 이미지 슬라이드 입니다. 예제를 확인하는 방법은 다운로드 받은 파일의 압축을 해제한후에 accordion_example/index.html 파일을 웹브라우저로 열어서 보면 됩니다. 위 그림 처럼 이미지가 화면에 표시가 되고, 마우스가 오버되는 이미지로 슬라이드 되는 효과를 볼수 있습니다. HTML 소스코드를 이용해서 적용하는 방법도 상당히 단순해 보이네요. 1. jquery 와 Accordion.js 파일을 include 시켜줍니다. 2. div와 li , img 태그를 이용해서 이미지를 보여주는 코드를 작성합니다. 3. div 에 지정한 class 를 이용해서 작동하도록 자바스크립트를 넣어줍니다. 비교적 간단하게 이미지슬라이드를 구현할수가 있네요. 출처..

* ckeditor - Open Link Open Link는 편집기에서 마우스 우클릭시 노출되는 메뉴에 링크 삽입 메뉴를 사용할 수 있게 합니다. * 라이센스(무료) - GPLV3, LGPL3, MPL * 설치방법 - 플러그인 파일을 다운로드 받아 ckeditor 가 설치된 폴더내 plugins 폴더안에 업로드 합니다. 예) http://example.com/ckeditor/plugins/openlink - ckeditor 의 설정파일인 config.js 파일을 열어 아래 소스를 추가합니다. config.extraPlugins = 'openlink';