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

설명 과거 클립보드 복사 버튼을 제작할 때 자바스크립트의 내장 함수를 사용하였으나, 브라우저가 다양해지고 버전이 높아짐에 따라 위 소스를 사용할 수 없게 되었습니다. 이를 해결하기 위해 플래시(SWF)파일을 이용한 ZeroClipboard 라는 API가 사용되었지만, 이또한 최근 브라우저마다 플래시 차단을 하는 경우가 있어 위 기능이 작동되지 않는 상황입니다. 이 소스는 Jquery를 이용하여 간단히 클립보드 복사를 할 수 있으며, IE 11, Chrome, Safari, FireFox 브라우저에서 테스트되었습니다. 첨부파일 목록 index.html jquery-3.2.1.min.js 사용방법 (첨부파일의 index.html 파일의 소스를 통해 확인가능) HTML 파일 상단에 jquery-3.2.1.mi..

간단한 jQuery를 이용하여 고퀄리티의 페이징을 구현할 수 있습니다. 해당 페이지로 이동하면 3가지 타입의 페이징을 미리보고, 체험해볼 수 있습니다. 관련파일은 이 페이지 상단의 다운로드 버튼을 통해, 또는 위 페이지로 이동하셔서 아래의 부분에서 다운로드가 가능합니다. 방법은 간단하며, 위 사이트내에 자세히 안내되어 있습니다. 크롬이로 이동하셔서 번역기를 이용해주셔도 좋겠습니다. ^^ 압축파일을 다운받으시면 관련 css파일과 js파일, html파일등을 확인하실 수 있습니다. [방법안내]

우측의 오픈메뉴 버튼을 클릭하면 좌측에 사이드메뉴 출력 3단꼐의 사이드 메뉴이고 하부메뉴로 갈시 레이어가 이전메뉴의 레이어를 밀어내면서 출력이됩니다. 모바일 웹이나 앱에 사용될수 있는 메뉴형태입니다. 총 3가지 타입이 있습니다. 상위레벨의 메뉴가 밀려나는 형태 상위메뉴를 덮고 백링크가 출력되는 형태 위의 두가지를 합친 형태가 있습니다.

요소의 크기 설정 및 정보를 반환하는 jQuery함수 Dimensions 메소드의 너비, 높이를 반환하거나, 브라우저의 너비, 높이를 반환하는 jQuery함수 Dimensions 또는 메소드 초기 너비, 높이값을 지정된 너비, 높이로 변경하는 함수도 있습니다. 초기 로딩시 메소드별 다른 스타일을 일괄 동일한 스타일로 변경할 수 있습니다.

지정된 요소를 지우는 jQuery 함수 Remove Elements 버튼 클릭시 선택한 모든 요소를 지우거나, 선택한 자식요소를 지우는 jQuery 함수 Remove Elements 입니다. jQuery - Remove Elements jQuery - Remove함수에는 remove() 는 선택한 모든 요소를 지우는 함수입니다. empty() 는 선택한 자식 요소를 지우는 함수입니다. 버튼 클릭시 모든 요소가 삭제 됩니다. 버튼 클릭시 해당 영역내 자식 요소가 모두 지워집니다. 각각의 함수의 기능을 보고 적절한 곳에 적용해서 사용가능합니다.

* ckeditor - Fixed toolbar on top - 이 플러그인은 문서 내용이 길어질때 스크롤을 내려도 툴바를 페이지 상단에 고정시켜 주는 플러그인 입니다. - 문서가 길어지더라도 이미지 삽입, 폰트 스타일 등 툴바 기능을 손쉽게 사용할 수 있습니다. * 라이센스(무료) - GPLV3, LGPL3, MPL * 설치방법 - 플러그인 파일을 다운로드 받아 ckeditor 가 설치된 폴더내 plugins 폴더안에 업로드 합니다. 예) http://example.com/ckeditor/plugins/fixed - ckeditor 의 설정파일인 config.js 파일을 열어 아래 소스를 추가합니다. config.extraPlugins = 'fixed'; - 문서에 스크롤바를 내려보면 아래처럼 툴바가 ..

* ckeditor - Yet Another QR-Code Image Generator - 이 플러그인은 에디터내 QR코드를 생성하여 삽입하도록 도와줍니다. * 라이센스(무료) - GPLV3, LGPL3, MPL, MIT * 설치방법 - 플러그인 파일을 다운로드 받아 ckeditor 가 설치된 폴더내 plugins 폴더안에 업로드 합니다. 예) http://example.com/ckeditor/plugins/yaqr - ckeditor 의 설정파일인 config.js 파일을 열어 아래 소스를 추가합니다. CKEDITOR.config.extraPlugins = 'yaqr'; - CKEditor의 언어가 세팅되지 않았다면 아래처럼 세팅합니다. CKEDITOR.config.language = 'en'; - 아..

간단한 소스 추가만으로 세로로 스크롤이 되는 기능을 사용하실 수 있습니다. 우선 http://richhollis.github.io/vticker/ 에서 다운을 받으시거나 첨부해드리 파일을 다운 받아 서버에 업로드를 합니다. 출력될 문구 1 출력될 문구 2 출력될 문구 3 HTML 파일에 상기 소스를 추가 하시면 부분에 있는 문구가 출력이 되면서 스크롤이 됩니다. 기본적으로는 한줄이 출력이 되나 옵션을 통해 스크롤시간등을 조절하실 수 있습니다. 옵션은 http://richhollis.github.io/vticker/methods/ 에서 확인이 가능하며 상기와 같은식으로 추가하셔서 사용하시면 됩니다.

* ckeditor - Code Snippet - 이 플러그인은 에디터네 소스코드 삽입시 구문 강조를 도와줍니다. * 라이센스(무료) - GPLV3, LGPL3, MPL * 설치방법 - 플러그인 파일을 다운로드 받아 ckeditor 가 설치된 폴더내 plugins 폴더안에 업로드 합니다. 예) http://example.com/ckeditor/plugins/codesnippet - ckeditor 의 설정파일인 config.js 파일을 열어 아래 소스를 추가합니다. config.extraPlugins = 'codesnippet'; - 툴바에 추가된 아래 아이콘을 눌러 소스코드를 입력합니다. - 입력 후 [확인] 버튼을 누르면 에디터에 아래와 같이 소스코드가 강조되어 보여집니다.

포커스 되었을때 Placeholder value 가 삭제되는 에니메이션 효과 입력부분에 마우스클릭 포커스 하시면 입력되어 있는 Placeholder value 값이 우측부터 촤측으로 삭제가 되는 애니메이션입니다. 사이트에서 위의 Placeholdem.js 를 클릭하시면 해당 스크립트 소스를 확인 할수 있습니다.