jQuery 6

JQuery로 별과 도표 만들기

별과 도표(서울시장 득표율) 를 만들어 보자 [소스] script src='http://code.jquery.com/jquery-latest.js'> $(document).ready(function() { var ctx = $('#mycanvas')[0].getContext('2d'); //연필로 그리기 (별만들기) ctx.beginPath(); ctx.moveTo(100, 100); ctx.lineTo(200, 100); ctx.lineTo(110, 160); ctx.lineTo(150, 70); ctx.lineTo(180, 160); // 시작 선을 서로 연결해 준다. closePath ctx.closePath(); ctx.stroke(); ctx.beginPath(); // x좌표, y좌표, 반지름..

IT 관련/Html5 2011.11.03

JQuery Canvas를 이용한 무지개 만들기

JQuery를 이용하여 무지개를 만들어 보도록 하자 Canvas는 포토샵의 Layer개념으로 봐도 된다. .gamelayer { position: absoulte; top : 0px; left : 0px; } $(document).ready(function() { var canvas = $('#mycanvas')[0]; var ctx = canvas.getContext('2d'); // 무지개 만들기 //fillRect(x좌표, y좌표, 가로크기, 세로크기) ctx.fillStyle = 'rgb(255,0,0)'; ctx.fillRect(0, 0, 50, 100); ctx.fillStyle = 'rgb(255,100,0)'; ctx.fillRect(50, 0, 50, 100); ctx.fillStyle ..

IT 관련/Html5 2011.11.03

JQTouch 활용

jqtouch/jqtouch.css를 보면 활용 가능한 목록을 볼 수 있다. 사용시(body부분에서) 아이디가 jqt아래로 들어가야 된다. ... jqtouch.js를 보면 사용 가능한 애니메이션을 볼 수 있다. (selector로 된부분을) html파일에서 class='cube'로 하여 사용할 수 있다. [자 그럼 이제 코딩을 해보자] 이건 그냥 복사해서 쓰자 ---------------------------------------------------------------------------------------------------------- var jQT = $.jQTouch({ icon: 'kilo.png', statusBar: 'black' }); $(function(){ // Custom ..

IT 관련/Html5 2011.10.14

JQuery 활용

class 가 toolbar이면 이미 세팅된 JQuery에 의해 toolbar의 디자인이 입혀진다. head부분의 스크립트는 가져다 쓰면 되고, 이 부분만 있으면 기본은 해결 된다. JQuery에서는 아이디 앞에 항상 #이 붙는다. 으로 링크를 걸어주면 로 자동으로 화면 전환을 해준다. class명에 button back로 설정해 놓으면 자동으로 back버튼이 생성되고, 링크는 #으로 한다. class에 button flip은 좌우로 돌면서 화면이 전환된다. li에 class ='arrow'를 주게 되면 오른쪽에 화살표가 붙는다. --------------------------------------------------------------------------------------------------..

IT 관련/Html5 2011.10.13

JQuery에 대하여

JQuery라 해서 자바스크립트에서 사용하는 SQL Query인줄 알았다. 하지만 아니었다. ㅠ.ㅠ 향상된 페이지를 위한 플러그 인 (JQTouch) - 자바스크립트 라이브러리라 보면 된다. JQuery의 장점 - 복잡하게 사용하던 함수를 쉽게 사용할 수 있다. [자 그럼 비교해 보자] ------------------------------------------------------------------------------------ function sayHello() { document.getElementById('foo').innerHTML = 'hi there'; } click me ----------------------------------------------------------------..

IT 관련/Html5 2011.10.13
반응형