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

인기있는 최신 브라우저에서는 복사명령 메소드를 이용하여 복사가 가능하지만 그 외 브라우저에서는 플래시 기반의 접근법을 이용한 복사기능을 이용하였습니다. 해당 소스는 플래시 없이 다양한 브라우저에서 이용가능합니다. 위 소스를 이용시 태그내 텍스트를 복사할 수 있습니다. 지원브라우저는 Chrome 42+, Firefox 41+, IE 9+, and Opera 29+ 입니다.

FancyBox 소개 - FancyBox는 웹 페이지의 이미지, HTML 콘텐츠 및 멀티미디어를 별도 박스에 표시하는 도구입니다. 라이센스 - MIT, GPL License FancyBox 기능 - 이미지, HTML요소, SWF, 아이프레임, Ajax 요청 - 설정 및 CSS를 통한 사용자 정의 - 마우스 휠 플러그인이 페이지에 포함된 경우 FancyBox뿐만 아니라 마우스 휠 이벤트에 응답 - 확대된 항목 아래 그림자 추가 설치방법 - 첨부된 zip 파일을 압축을 풀고 웹루트 디렉터리에 업로드 한 다음 웹브라우저로 실행하면 다음과 같은 샘플화면을 볼 수 있습니다 작은이미지들이 많거나 갤러리 형태의 웹페이지에 적용하면 꽤 괜찮은 효과를 볼 수 있을거 같네요

alertify 소개 - 웹 브라우저에서 별도의 디자인이 된 대화상자를 역동적으로 볼 수 있습니다 라이센스 - MIT License alertify 기능 - CSS를 편집하여 작업자의 필요에 맞게 모양을 변경할 수 있음 - CONSOLE.LOG 제공 - 크로스 브라우저 및 플랫폼 사용가능 - 데스크톱, 노트북, 태블릿 또는 모바일장치 에서 사용가능 설치 및 사용방법 첨부된 압축파일을 다운받아 압축을 풀고 example 폴더에 index.html 을 웹브라우저에서 실행을 하면 예제를 볼 수 있으면 해당 html 파일을 열어보면 샘플코드도 확인가능합니다 아래와 같이 alertify 선언 및 설정을 하고 HTML의 문구와 조합하여 사용할 수 있게 됩니다

부드럽고 쫀득쫀득한 효과의 특이한 jquery메뉴 플러그인 입니다. Gooney 스타일의 메뉴라고 하는데 검색을 해보니 끈적하고 부드러운 이런 뜻이군요 ^^ 데모에서 메뉴를 한번 클릭해보시면 왜 저런 스타일의 메뉴인지 한번에 아실수 있습니다. 위 이미지와 같이 재미있는 형태로 메뉴들이 나타나며. 이미지는 사용하지 않고 jquery 및 css3로만 구성되어 있습니다. 데모페이지 및 상세페이지에서도 사용법을 확인하실 수 있으며 상세페이지에서 파일 다운로드시 관련 css와 jquey 데모 html 파일이 함께 첨부되어 있습니다. http://www.htmldrive.net/items/show/1836/Gooey-menu-plugin-with-jQuery 포트폴리오 또는 원페이지 형태의 이벤트 페이지를 만들때 ..

css 만으로 마우스 오버시 해당영역을 다이나믹하게 흔들수 있는 csshake 로 주요영역에 흔들거리는 효과를 주는데 유용합니다. css 소스만으로 버튼영역을 마우스 오버시 흔들거리는 효과를 줄 수 있습니다. 각 버튼 영역별로 흔들거리는 효과가 조금씩 차이가 있으며, 각 항목별로 각각의 css 소스를 다르게 사용합니다.

input, textarea, div 등 다양한 html 요소내 text 정보를 손쉽게 선택하고 선택해제할 수 있는 JQuery 소스입니다. 해당 소스 제공사이트를 보시면 선택시 필요한 javascript 함수와, 선택해제시 필요한 javascript 함수가 나누어져서 있습니다. 사이트 구성시 다양한 부분에 활용 가능합니다. ie10이상, 크롬, 사파리, 파이어폭스 등 다양한 브라우저에서 정상작동되네요.

HTML,CSS,Javascript 를 이용해서 클라우드 텍스트 형태로 출력해주는 스크립트입니다. 첨부파일을 다운로드 받아서 압축을 풀어보면 examples 라는 폴더 안에는 3가지 샘플이 있습니다. index.html 가장 기본형태의 샘플이네요. rectangular.html 둥근형태가 아니라, 사각형의 영역에 글자들을 표현하는 예제입니다. vertical_words.html 조금 특이한 형태이긴 합니다만, 각 텍스트들의 의미를 쉽게 파악이 되지는 않을것 같기도 합니다. 텍스트 단어, 글자크기(무게?) 클릭했을때 이동하는 URL조절, 마우스를 올렸을때 타이틀 정도를 조절이 가능하도록 구현되어 있으며, 단어를 추가하거나 하는 게 상당히 쉬워 보이긴 합니다. 몇가지 단어를 한글로 바꿔보니 알파벳보다는 결과..

영어,러시아어,스패인어등 다양한 국가별 언어를 지원하는 키보드 jquery 소스로 layout 값으로 각각의 언어를 지원하는 키보드를 만들어줍니다. 위 input 항목에 마우스를 클릭시 위와같은 키보드화면을 브라우저에서 확인할 수 있습니다. 지원되는 다양한 언어로 변환할 수 있어 특정 나라전용으로 사용이 가능합니다. http://mbut.github.io/jquery.mlkeyboard/jquery.ml-keyboard.min.js http://mbut.github.io/jquery.mlkeyboard/jquery.ml-keyboard.css 를 다운로드 받아 제공되는 jquery 소스를 이용하여 나라별 언어에 맞는 키보드를 선택하여 사용할 수 있습니다.

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

Input 태그 그룹내 정보를 삭제하는 IE 전용 기능을 모든 브라우저에서 이용 가능합니다. 기존에 IE10, IE11에서만 사용가능한 input 삭제 기능을 모든 브라우저에서 이용할 수 있는 자바스크립트 + CSS 소스입니다. 해당 사이트에서 제공되는 소스에서는 input 박스에 롤 오버시 리턴버튼이 출력되도록 제어하는 소스도 있습니다. 다양한 부분에 편의기능으로 넣으면 좋더군요...