본문 바로가기

제이쿼리

제이쿼리(jQuery) - addClass()와 removeClass() 마우스 오버시 addClass() 아웃시 removeClass() 예제 마우스를 올려보세요~ 예제 : this로 나를 제외한 나머지 선택 네이년 야후 다음 다른 예제 모든 항목에 대해서 click 이벤트 적용 네이년 야후 다음 더보기
제이쿼리(jQuery) - Selector (선택기 / 선택자) 전반적인 내용 더보기
제이쿼리(jQuery) - 선택기(Selector)로 자식요소 선택 selector를 이용해서 스타일을 바꿔보자. 우선 아래예제를 보자 위의 예제를 브라우저로 보면 아래와 같은 결과가 나온다. jQuery로 코딩된 부분을 설명하자면 li태그 에 있는 u태그의 배경색을 노란색으로 바꾸는 예제이다.JAVA항목에 태그로 감싸져 있고 jQuery에서 Q가 감싸져 있다 그래서 이들의 바탕색은 노란색이다. 다른 예를 보자 위의 예제는 myfavorites라는 id속성에 스타일을 적용하는것이다. 가 코딩이 되어 있다. jquery에서 이 아이디 안에 있는 li에다가 스타일을 적용하는것이다. 적용될 스타일은 float:left;list-style:none;margin:10px;을 주었다. 결과는 아래와 같다. id, class속성만 이해하면 어렵지 않는것 같다. 그럼 조금 더 나아가서.. 더보기
제이쿼리(jQuery) - Hello world!! 찍어보자. 1. $() 팩토리 함수(메서드, 생성자) * $() 로 CSS의 선택기(selector)와 모든 DOM요소 접근 - $("선택기").XXX메서드(); * 자바스크립트 익명 메서드(람다식) 호출 - $(document).ready(function() {....}); 2. 기본사용방법 3. 간단한 예제를 보자. 더보기
Jquery mobile(제이쿼리 모바일)에다가 구글광고 붙이기.(google adsense) 제이쿼리 모바일로 만든 모바일 웹페이지에 구글 광고를 붙이면 나는 에러가 있다. 구글 광고가 붙어있는 페이지를 로딩하면 구글 광고만 나오고 컨텐츠는 안나온다. 하다하다 검색을 하니 하나 찾긴 찾았다. 우선 이럴때는 링크 속성을 rel="external"로 주거나 data-ajax = "false"로 주고 처리를 하면 되는듯 하다. (사실 갤럭시1에서는 약간 안되는것도 있지만 2, 3는 잘됨.. 아무튼..) 잘된다. 우선 아래 소스를 js파일로 만들어서 넣고 (window).load(function(){ var ads_top = $("#adsense_top").find("iframe"); //This is where the ads will show when the page is first loaded $(.. 더보기
구글(google map) 맵 달기 (jquery, json) 구글 맵 달기 정리.(PHP, JAVASCIRPT, JQUERY, JSON) 위치 정보를 알려줄때 구글 맵을 많이 이용한다.. 아래는 소스 위주로 설명을 한다. 우선 구글 맵 api를 전반적인 설명은 아래 사이트 에서 참고 하면 된다. https://developers.google.com/maps/documentation/javascript/reference?hl=ko 참고로 자바스크립트 api를 이용하였다. 이건 구글맵 튜토리얼이다. 보고 원하는 지도에 대한 소스를 카피해서 홈페이지에 붙이면 된다. https://developers.google.com/maps/documentation/javascript/tutorial#api_key 사실 해당 홈페이지에서 제공하는 튜토리얼 만한것은 없다. 그러니 열심.. 더보기
자바스크립트(javascript) 제이쿼리(jquery)를 이용한 동적 차트 유용한 정보 개발을 하다 보면 현업(실무자)에게서 차트 및 움직이는 그래프를 만들수 있냐는 이야기를 들을 수도 있다. 특히 실시간 증권 그래프나 차트 같은것들.. 2000년도 초반이였으면 해도 그걸 어떻게 만드냐라고 반문을 했지만. 요즘은 많은 기술이 나와서 가능하다. 특히 제이쿼리나나 자바스크립트로 이용해서 만들 수 있다. 아래 두 사이트는 그런걸 참고 할 수 있는 유용한 사이트이다. 언젠간 써먹겠지.. http://www.highcharts.com http://www.flotcharts.org 더보기
Jquery mobile(제이쿼리 모바일) 에서 nav data-role="navbar"를 이용할 경우 글자수. Jquery mobile를 이용하여 모바일 페이지를 만들때 메뉴를 nav 태그를 이용해서 만들수도 있다 data-role = "nave bar"를 이용해서. 그러다 보면 글자수가 많아지거나 메뉴가 많아지면 자동으로 글을 truncation하는데 css를 조금 수정해주면 된다. 예) 메뉴 가나.. | 다라.. | 마바.. | 사아.. |아차.. 더보기
유용한 제이쿼리 메뉴 제이쿼리가 요즘 front-end에서 많이 사용되고 있다. 예전에는 플래쉬로 만든 메뉴 기능들을 제이쿼리가 많이 커버를 하고 있다. 아래 사이트는 제이쿼리에 대한 메뉴제공 사이트다. 무료도 있고 유료도 있고. 무료로 메뉴를 구현해도 깔끔한 메뉴를 만들수 있다. http://apycom.com/ 더보기