세상과 연결

CSS3를 이용한 12달 달력 코딩하기 https://designmodo.com/calendar-jquery-css3/

제이쿼리를 이용한 이미지 슬라이드 만들기 https://designmodo.com/image-slider-jquery-css3/

제이쿼리 플러그인 모음 제이쿼리 플러그인은 무수히 많습니다. 플러그인만 잘 사용해도 아주 멋진 프로그램을 만들 수 있습니다. 저 또한 플러그인을 북마크에 따로 관리하기도 하는데요. http://plugins.jquery.com/tag/jquery/ 위 사이트 방문하면 플러그인에 대한 유익한 정보를 얻을 수 있고 프로그램 / 사용법도 얻을 수 있어요. 위 이미지를 보면 왼쪽에 어마 어마한 카테고리가 있고 그 메뉴를 클릭하면 오른쪽에엄청난 플러그인들을 확인 할 수 있습니다.

아래 사이트 클릭 하시면 사이드 슬라이드 메뉴를 만들 수 있는 파일과 예제를 확인 할 수 있어요 https://github.com/jakiestfu/Snap.js#installation Usage var snapper = new Snap({ element: document.getElementById('content')});Settings and Defaults settings = { element: null, dragger: null, disable: 'none', addBodyClasses: true, hyperextensible: true, resistance: 0.5, flickThreshold: 50, transitionSpeed: 0.3, easing: 'ease', maxPosition: 26..

모바일 네비게이션 슬라이드 아래 사이트 클릭 하면 데모를 볼 수 있습니다.http://darsa.in/sly/examples/horizontal.html 아래 사이트 클릭하면 플러그인을 다운 받으실 수 있습니다.http://darsa.in/sly/ 모바일사이드메뉴.zip 글쓰기My홈피소통방뉴스5초생활상품홍보광고적립추천상품우체통우체통우체통우체통우체통우체통우체통우체통우체통우체통우체통우체통우체통우체통우체통우체통

모바일 사이트에서는 왼쪽 상단 삼선 이미지를 클릭 시 사이드 메뉴를 노출하게 됩니다. 제이쿼리 플러그인 중에는 정말 유용한 자료가 많은 듯해요. 사용법도 무지 쉬운 모바일 사이드 메뉴 만드는 플러그인 아래 사이트 방문하시면 플러그인과 예제 파일을 다운로드 할 수 있습니다. http://mmenu.frebsite.nl/ 아래 주소를 클릭 하시면 사용법에 대한 설명을 볼 수 있어요 http://mmenu.frebsite.nl/documentation/api.html 아래는 전체소스 입니다. DemoThis is an advanced demo. Click the menu icon to open the menu.For more demos, a tutorial, documentation and support, p..

bpopup 팝업창 만들기 ('.popup').bPopup(); bpopup 팝업창 닫기 $('.popup').bPopup().close(); 팝업 호출 전, 후 , 완료 후 이벤트 $('.popup').bPopup({ onOpen: function() { alert('열리기전 호출'); }, onClose: function() { alert('닫히고나면 호출'); }}, function() { alert('열리고나면 호출');}); bpopup을 이용한 아이프레임 $('.popup').bPopup({ content:'iframe', contentContainer:'.content', loadUrl:'http://cppcomeon.tistory.com'}); $('.popup').bPopup({ foll..

1.자바스크립트 시작페이지 익스플로러에서만 작동합니다. 시작 페이지 2.자바스크립트로 즐겨찾기추가 만들기 if(window.opera) {if ($("a.jqbookmark").attr("rel") != ""){ // don't overwrite the rel attrib if already set$("a.jqbookmark").attr("rel","sidebar");}} $("a.jqbookmark").click(function(event){event.preventDefault(); // prevent the anchor tag from sending the user off to the linkvar url = this.href;var title = this.title; if (window.sideba..

자바스크립트 날짜 Date 제이쿼리날짜 자바스크립트의 날짜함수는 많이 사용되지 않지만 간혹 필요할 때가 있습니다. 사용자 화면에서 시간을 체크한 후 특정 로직을 실행하게 할경우 필요한데요. 사용법은 그리 어렵지 않으니 즐겨찾기 한 후 필요할 때 사용하시면 될 것 같습니다. Date 객체 사용법1. var 변수명 = new Date();2. var 변수명 = new Date(밀리초); 3. var 변수명 = new Date("1 January 2012");4. var 변수명 = new Date(2012, 0, 1, 12, 15, 10, 30); 1번 Date() 현재 날짜 리턴 2번 밀리초를 생성자 인자로 넣는 방법, "1970년 1월 1일 00:00:00" 을 기준으로 밀리초 단위로 지나간 시간을 입력하..

제이쿼리 setTimeout 일정시간 반복 제이쿼리를 이용하여 일정한 시간으로 함수나 특정 로직을 반복적으로 실행하기 위해서는 setTimeout을 사용하면 됩니다. 자바스크립트에는 setInterval과 setTimeout 두개가 있지만 제이쿼리에서는 setTimeout만 있습니다. 사실 이 두개의 차이는 미묘해요. setTimeout은 로직을 실행한 후 일정 시간setInterval은 일정 시간이 흐른 후 실행입니다. 제어 연산자로 비교를 하면 while(){ } setInterval 과 같음 do{}whle() setTimeout과 같음 사용법setTimeout(function(){}, 1000); 1000은 1초를 의미합니다. 5초는 5000 입니다. $(document).ready(functio..