PhantomJS를 이용해 서비스 개발 중 evaluate 안에서 AJAX 처리가 필요한 경우가 있어 아래 코드를 작성했다. 대상 웹페이지에 jQuery는 이미 로드된 상태라고 가정한다. “use strict”; var sys = require(“system”); var page = require(“webpage”).create(); var args = sys.args; page.open(‘http://example.com’, function(status) { var text = page.evaluate(function(arg) { var result; var category = arg[1]; jQuery.ajax({ async: false, cache: false, …
input 이나 textarea 의 내용을 클립보드로 복사하기 위해 clipboard.js 를 사용한다. 기본 clipboard.js 의 기능에 복사 후 Copied 라는 툴팁이 표시되도록 수정했다. 코드는 아래와 같다. Clipboard 데모 : http://demo.codepub.net/clipboard.html <!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <title>Clipboard Demo</title> <link rel=”stylesheet” href=”./css/clipboard.css”> <script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js”></script> <script src=”https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.6.0/clipboard.min.js”></script> <script src=”./js/clipboard.tooltip.js”></script> </head> <body> <div> <input type=”text” value=”http://www.google.com” id=”copy_text”> <button class=”copy”>COPY</button> </div> …
이전 포스팅 jQuery 모바일 브라우저 상단 플로팅 메뉴에 이어서 이번엔 모바일 브라우저 하단 플로팅 메뉴이다. 상단 플로팅 메뉴와 같이 모바일 브라우저에서 화면 하단에 항상 메뉴가 표시되도록 하는 것이다. css와 html 문서 코드는 이전 상단 플로팅 메뉴 포스트를 참고하면 된다. 다른 것은 생략하고 js 코드만 첨부한다. (function($) { $.fn.bottomFloatMenu = function(timeout, duration, interval, count) { var cfg …
모바일 쇼핑몰 솔루션 작업을 진행하다 보니 새로운 것도 참 많이 알게 된다. swipe 이벤트를 이용해서 이전, 다음 상품을 보여주려고 스크립트를 작성하고 있는데 글쎄 생각지도 못했던 캐시 문제가 발생했다. 왼쪽으로 swipe 하면 화면 전체가 왼쪽으로 애니메이션으로 이동하도록 하는데 기존 페이지의 컨텐츠를 복제해서 레이어를 생성하고 이 레이어가 이동하는 것이다. 그동안 원래 컨텐츠의 모든 엘리먼트는 hidden으로 처리하고 말이다. …
JavaScript를 이용하여 터치기기에서 좌우 swipe 방향을 체크하는 개념적인 방법이다. 기본적인 아이디어 수준의 코드이기 때문에 실제 사용하는 것은 무리가 있을 것이라 생각한다. 사용자가 기기에 터치를 하면 touchstart 이벤트를 이용해 터치가 시작된 좌표를 기록해둔다. 그런 다음 touchend 이벤트를 이용해 터치가 끝났을 때 시작점의 좌표와 종료점의 좌표를 비교해서 swipe 방향을 체크하는 것이다. iOS 기기의 Safari 브라우저에서는 터치가 끝난 …