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

드래그 앤 드랍을 사용하기 쉽도록 구성되어 있네요. 압축 파일을 해제 하신 후 해당 폴더로 가시면 index.html 파일이 있습니다. index.html 파일을 열어보시면 구조는 매우 심플하며 디자이너도 쉽게 가져와서 사용할 수 있는 수준으로 되어 있습니다. index.html 파일에서 수정시 주의하셔야 할 사항은 div id 입니다. 아래의 이미지를 참고해 주세요. 사용해 보니 무겁지도 않으며 DIV 내용에 다른 제약 사항도 없어서 괜찮네요 ^^

clappr 웹 전용 플레이어 입니다. HTML5 를 이용한 플레이어 입니다. explorer 9 까지는 지원되는데 explorer 8은 지원되지 않습니다. ^^ ( Window 7 도 지원되지 않습니다. ) 옵션 값을 이용하여 여러가지 기능을 컨트롤 할 수 있습니다. -플레이어 크기 조절 -플레이어 자동재생 -루트 기능(반복재생) -오류 메시지를 원하시는 텍스트로 보여줄 수 있습니다. ( 특정 언어를 셋팅하고자 하실 경우 language 파일을 만들어야 합니다. ) -키보드 컨트롤 설정 -뮤트 기능(음소거) -확장자 없는 URL 에 대응하여 mimeType 설정 -HLS 버퍼 길이 설정 -배속기능(playbacklate) 그 외에도 다양한 기능이 있습니다.

위와같은 기본 형태부터 팝업의 위치를 변경할 수 있는 이벤트 배경색상을 원하는 색상으로 변경하는 이벤트 등 다양한 효과를 가진 레이어형 팝업입니다. jquery 1.4.3 이상으로 선언하셔야만 작동이 가능하며, 이벤트 별 자세한 jquery 문법은 홈페이지에서 확인하시기 바랍니다.^^

Jquery 를 이용해서 인스타그램에 등록해둔 사진을 자신의 웹사이트에서 보여줄수 있는 API의 예제입니다. API를 이용하기 위해서는 인스타그램 사이트에 로그인을 한후에 https://www.instagram.com/ API키를 사용하기 위해서 http://instagram.pixelunion.net/ 위 주소로 이동한 후 토큰를 생성해야 합니다. 생성한 토큰을 첨부된 파일의 압축을 풀면 나오는 index.php 파일의 소스코드에 추가하고, 웹서버에 업로드 한후 웹브라우저를 이용해서 해당파일의 URL로 접속해보면 인스타그램에 추가해둔 사진중 자바스크립트의 소스코드에서 설정한 개수만큼을 가져와서 화면에 보여줄수 있는 게 확인이 됩니다. 자신이 운영하는 웹사이트에, 인스타그램을 간편하게 연동해서 인스타그램..

* ckeditor - Simple Ruler - 이 플러그인은 플러그인은 에디터내 자선을 표시하여 문서 좌우 여백을 쉽게 조절할 수 있도록 도와줍니다.. * 라이센스(무료) - GPL3 * 설치방법 - 플러그인 파일을 다운로드 받아 ckeditor 가 설치된 폴더내 plugins 폴더안에 업로드 합니다. 예) http://example.com/ckeditor/plugins/simple-ruler - ckeditor 의 설정파일인 config.js 파일을 열어 아래 소스를 추가합니다. config.extraPlugins = 'simple-ruler'; - 에디터 실행시 자선이 표시됩니다.

* ckeditor - Statistics of the number of characters - 이 플러그인은 에디터 작성시 입력한 문자, 단어, 선택된 문자, 소스의 카운트를 보여주는 플러그인입니다. * 라이센스 - 상업용 무료 (http://js.plus/licensing) * 설치방법 - 플러그인 파일을 다운로드 받아 ckeditor 가 설치된 폴더내 plugins 폴더안에 업로드 합니다. 예) http://example.com/ckeditor/plugins/jsplus_stat - ckeditor 의 설정파일인 config.js 파일을 열어 아래 소스를 추가합니다. config.extraPlugins = 'jsplus_stat';

다운로드 받은 파일의 압축을 해제한 후에 웹서버에 업로드 하고 index.php 를 웹브라우져로 접속하면 확인이 됩니다. 검색하려는 단어를 입력하고 find 버튼을 클릭하면 텍스트중에서 검색어로 입력한 단어가 하이라이팅이 됩니다. 한글도 하이라이팅처리가 잘 되네요. 출처는 https://www.sourcecodester.com/javascript/9100/search-highlight-jquery.html 입니다.

스크린샷과 같이 Add Tab 버튼을 클릭하면 tab data 화면으로 텝소스를 추가하고, content 내용에 생성된 텝을 클릭시 출력되는 내용을 입력할 수 있습니다. 위 jquery 소스를 베이스로 하여 위 jquery 버전의 js 를 선언한후 텝관련 js 소스를 선언하여 간단하게 사용이 가능합니다.

* smallipop 소개 - jquery 를 이용한 툴팁 플러그인 * License - MIT License * 요구사항 - jquery 1.5.2 이상 * 사용방법 - 첨부된 압축파일을 다운로드 한후 아래와 같이 필요한 css , js 파일을 복사하여 사용중인 javascript , css 폴더로 옮겨줍니다 lib/jquery-smallipop.js lib/query-x.x.x.min.js lib/modernizr-x.x.x.js css/jquery-smallipop.css css/animate.min.css 그리고 적용할 html 문서상단에 파일을 추가해줍니다 추가된 라이브러리 파일을 토대로 아래와 같이 툴팁코드를 적용할 수 있습니다 첨부된 압축파일에는 테스트 샘플파일(tests/tests.html..

다양한 설문 조사 관련 JQUERY CSS 예제를 보실 수 있습니다. POLL 데모사이트 : https://codepen.io/iaian/pen/bpoGKZ POLL Answers 데뫄이트 : https://codepen.io/iamtimjenkins/pen/jPoQJr