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

기본적인 텝소스효과입니다. $('.tabs').tabslet(); 위 소스로 선언하여 첫번째 텝위치를 지정합니다. $('.tabs').tabslet({ active: 2 }); active 값을 조절하여 처음 로딩시 텝메뉴의 위치를 지정할수 있습니다. 이외 마우스 오버시 텝소스가 변경되거나, Animation 으로 페이드인/아웃 등 다양한 효과를 가진 텝소스를 구현할 수 있습니다.

Jquery 를 이용하여 드랍메뉴를 이쁘게 만들어둔 예제 입니다. 모바일에서 사용하면 더 좋을듯 합니다. 메뉴 구성 및 사용방법도 비교적 간단 합니다. 압축파일을 해제 하시면 index.html 파일이 있습니다. 태그로 구성이 되어 있습니다. 원하시는 항목을 추가 추가 하실 수 있고 클릭시 링크를 연결할 수 있습니다. 필요할 경우 드랍 서브 메뉴를 마음대로 추가 하시면 됩니다.

HTML 과 JAVASCRIPT 의 JQUERY 를 이용하여 MP3 플레이어를 만든 샘플 입니다. 라이센스 : The MIT License 사용 방법은 매우 간단 합니다. 다운로드 받으신 압축 파일을 해제하여 하신 후 폴더에 접근하시면 index.html 파일을 엽니다. 위의 data-src 속성의 값이 mp3 파일명입니다. songs 폴더에 mp3 파일을 지정했지만 샘플 코드에 보시면 songs 가 없습니다. songs 폴더를 만드셔도 되고 다른 폴더를 지정하셔도 됩니다. audioInitialVolume 는 기본 볼륨 값을 설정하시면 됩니다. backgroundBanners 는 mp3 파일을 재생할때 보여지는 이미지 입니다. 배열 형식으로 되어 있습니다. 형식을 유지한채 사용하시면 됩니다. 몇가지 아..

JQuery를 이용하여 진행표시줄을 bar 형태로 만들어 주는 소스입니다. 위 예제를 보면 알수 있듯이 진행도를 상태바로 보여주는 JQuery UI기능 중 하나입니다. 어렵지 않게 소스코드를 작성하고 여러모로 유용하게 사용할 수 있습니다. Value 값으로 진행바가 표시되며, 여러 가지로 이용이 가능합니다. 그외에도 다양한 활용을 할 수 있는 옵션이 있으니 해당 사이트를 참고하세요.

jquery + xml 을 이용해서 제작된 달력을 화면에 출력해주고, 일정등을 확인할수 있는 달력 스크립트 입니다. 다운로드 받은 파일의 압축을 풀어서 웹서버에 업로드 한후에 웹브라우져로 접속해보면 아래 그림과 같은 화면이 나오게 됩니다. 아무런 일정이 없는 빈 달력이 나오는데, events.xml 을 메모장이나, 에디트플러스 같은 문서편집기로 열어서 보면 아래와 같은 포맷을 가진 XML데이터를 조작해서 1 여름휴가 2016-8-28 2016-9-05 9:00 10:00 #ffb128 http://www.google.com 위 그림과 같이 달력에 일정을 표시해주는게 가능해지네요. 지금은 일정에 대한 데이터는 xml 로 전달받고 화면에 출력하는게 전부인 상황이지만, 약간 더 개발을 한다면 웹에서 일정을 확..

* tidyTime.js - 사용자에게 더 친근한 방법으로 시간을 표시하여 제공하는 jQuery 플러그인 * 기능소개 - 간소한 구조 쉬운사용 - 동적 웹사이트 및 앱에서 작동 - 독립 실행형 시계로 사용가능 ex) 시간별 멘트 출력(08:15 - 8시 15분이 지난다, 12:01 - 정오 12시 지나서 음악을 듣자) * 사용방법 - 상단에 기본제공되는 스크립트 파일과 문구가 출력될 tidyTime class설정 js.js 에는 아래와 같은 tidyTime 옵션을 설정할 수 있는 스크립트가 있는데 8 시 15분 뒤에 나올 메시지에 대한 설정이 가느하도록 되어있으며 해당 스크립트를 js 파일로 호출하지 않고 별도로 문서에 가져와서 설정을 하여도 됩니다 before, after 옵션 중간에 들어갈 문자는 t..

jQuery를 이용한 Dialog 레이어 팝업 띄우는 소스입니다. 대화창 형태로 Dialog 레이어를 띄울 수 있으며, 레이어창을 이동하거나, 닫거나, 사이즈 조절도 가능한 소스입니다. 속성 중 여러 효과나, 기본 크기, 최대 높이, 최대 가로크기 등을 설정할 수 있습니다. position 값을 통해 초기 오픈 위치지정도 가능합니다.

JAVASCRIPT 프로그램을 작성하기 위해서 많은 개발자들이 사용하는 Jquery 가 있다면, 이를 PHP로 Jquery 를 이용하는 코드를 미리 작성해서 PHP프로그램 코딩만으로 Jqeury 의 효과를 볼수 있는 라이브러리입니다. 다운로드 받은 파일의 압축을 해제해서 웹서버에 업로드 하고, 웹브라우져로 호출을 해보면 확인이 가능합니다. 아직은 Jquery에서 지원하는 모든 기능 및 Plugin 들이 지원되는것 같지는 않습니다. 아마 개발중일듯 하네요. 샘플코드를 보면 PHP 프로그램 코드들이지만, 마치 Jquery 를 이용해서 javascript 로 기능을 구현하는 방식의 스타일이네요.

위 조건의 카운트 뿐만아니라 레이아웃이 변경되거나, 특정 시간뒤에 콜백되어 다른 효과를 줄수 있는 기능등 다양한 기능을 구현할 수 있는 만능 jQuery Countdown 플러그인입니다.

jquery 를 이용해서 개발된 웹페이지의 입력박스 기능을 이용해서 여러가지 아이콘중 사용자가 원하는 아이콘을 입력받을수 있는 아이콘피커 입니다. 위 그림 처럼 아이콘을 화면에 표시해주고 그중에 하나를 선택하는 용도로 사용이 가능합니다. 아이콘을 여러 분류로 구분해둘수 있으며, 해당 하는 분류를 선택하면 분류해둔 아이콘을 모아서 보여주고 선택할수 있게 되며, 특정 단어로 아이콘을 검색해내는 기능도 구현이 되어 있네요. 다운로드 받은 압축파일의 압축을 해제해서 demo/index.html 을 IE나, 크롬 같은 웹브라우져로 열어보면 각 상황에 대해서 어떻게 사용이 가능할런지에 대한 사용법 및 예제등을 확인이 가능합니다. 아이콘을 약간씩 바꾼다면 음식점 홈페이지의 메뉴접수나, 어떤 문의의 분류정도를 입력받는..