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

웹페이지에 심플한모양의 그래프를 쉽게 출력할 수 있는 Jquery 플러그인입니다. 다운로드 받은 파일의 압축을 풀고 index.html 을 웹브라우저로 열어서 보면 위와 같은 그래프가 표시되는게 확인이 가능합니다. index.html 파일의 소스코드를 보면 그래프를 구성하는 라벨, 그래프의 높이, 바의 굵기, 바의 색상 등을 javascript 소스코드내의 텍스트를 조절해서 변경하는게 가능합니다. 출처는 http://xaviershay.github.io/tufte-graph/ 입니다.

다운로드 받은 파일의 압축을 해제한 후에 웹서버에 업로드 하고 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 를 이용해서 작성된 이미지 슬라이드 스크립트입니다. 시간이 지남에 따라서 이미지 상단 우측에 시계방향으로 다음 이미지로 변경되기 까지의 카운트다운 표시가 됩니다. 마우스를 오버하면 위 그림 처럼 이전 이미지, 다음 이미지를 선택할 수 있는 화살표가 표시되고, 화살표를 클릭하면 우측상단의 카운트다운을 표시하던 부분이 일시정지 하는 모양으로 바뀌고 이미지가 바뀌지 않네요. 이미지 슬라이드를 위해서 작성된 HTML 소스코드와, Javascript 소스코드는 단순하긴 합니다만, 그만큼 슬라이드가 동작하는 부분에 대해서는 다양하게 제어할수 있도록 구현된 건 아닌듯 하네요. 출처는 http://www.htmldrive.net/items/show/667/jQuery-Countdown-Image-Slide..

License Released under the [GNU GPL license v3](https://www.gnu.org/licenses/gpl-3.0.html) 터치 친화적 인 Flickity 갤러리 및 Isotope 기반 필터 기능을 갖춘 반응이 빠른 제품 그리드 레이아웃입니다. 각 그리드 항목이 Flickity 이미지 슬라이더 인 반응 형 동위 원소 구동 제품 격자 레이아웃입니다. 작은 카트 아이콘 애니메이션은 제품이 장바구니에 추가되었음을 나타냅니다. 제품 필터는 동위 원소 필터 기능을 사용합니다. 일부 예시적인 미디어 쿼리는 레이아웃을 적응시키는 방법을 보여주기 위해 사용됩니다.