본문 바로가기

javascript37

간단한 jQuery 갤러리 간단한 jQuery 갤러리간단한 클릭이벤트 레이아웃 갤러리.클릭시 하단 박스와 그아래 텍스트를 변경한다. 대략적인 레이아웃 박스구조. html소스 총 5명의 사진을 올릴것이다. 이미지는 썸네일이미지5장, 보여줄이미지 5장. 유사반복되는 중간에 생략했다. 1234567891011121314151617181920212223242526아이돌 갤러리 아이유 소유 아이유 Colored by Color Scriptercs 클릭시 하이퍼링크의 주소와 제목이 하단이미지박스의 주소와 텍스트으로 된다 1cs이 주소와 제목이 아래에 적용12 텍스트cs jQuery없이 스크립트로만 구현하면 길어진다.12345678910111213141516171819function showPic(whichpic) { var source = .. 2015. 10. 30.
DOM 스크립트 소스-소스 코드 예제 DOM 스크립트-소스 코드 예제 에이콘풀판사 DOM 스크립트 요약본 http://channy.creation.net/project/domscripting/ 간단히 살펴보는 자바스크립트 역사자바 스크립트 문법 익히기문서 객체 모델(DOM)이란? Test: alert title 속성 자바스크립트로 만드는 온라인 사진첩 Image Gallery 1: 자바 스크립트 없는 페이지Image Gallery 2: 사진 넣기Image Gallery 3: 사진 및 텍스트 넣기Image Gallery 4: 스타일 꼭 알아야 할 핵심 기본기 Example: 스크립트 분리로 팝업 창 만들기 사진첩 기능 개선하기 Image Gallery 1Image Gallery 2Image Gallery 3 실행시에 마크업 코드 생성하기 Te.. 2015. 2. 22.
jquery 플러그인 다단네비게이션 심플 jquery 플러그인 다단네비게이션 출처는 http://apycom.com/menus/8-white-smoke.html 여기서 색깔에따라원하는것을 받을 수 있다 다좋지만 문제는 span남발이며 jquery의 특성인 옵션 부가기능이 없다.그냥 단순하게 사용하고싶은이에게 추천 2010. 4. 2.
jQuery 다단 네비게이션 플러그인 jQuery 다단 네비게이션 플러그인 다단 네비게이션을 jQuery를 통해 쉽게 만들어보자 목표는 흔히보는 아래 그림과 같은 네비게이션을 구해볼것이다. 출처는http://plugins.jquery.com/project/jfastmenu 기본 html 메인메뉴는 5개로나누어진다.홈,그림,음악,방명록,잡다이것을 리스트로 코딩하자 홈 그림 음악 방명록 잡다 세분화한 카테고리로 그림안에 일반,디자인,미술가를 더 넣을것이다.또 거기에 좀더 넣어 다단계로 만든다.아래와같은 결과. Home 그림 일반 디자인 팝아트 옵아트 패브릭 에벌린 미술가 다빈치 미켈란젤로 음악 방명록 잡다 소스는 다음과 같다. Home 그림 일반 디자인 팝아트 옵아트 패브릭 에벌린 미술가 다빈치 미켈란젤로 음악 방명록 잡다 jquery로 작동 .. 2010. 4. 1.
jQuery 이미지 슬라이드 플러그인 jQuery 이미지 슬라이드 플러그인 이 플러그인은 가운데 그림을 클릭시 확대 그리고 양쪽그림을 클릭시 다음그림을 슬라이방식으로 보여준다, 다운은 여기서 http://plugins.jquery.com/files/jquery.slidingGallery-1.1.js.txt 먼저 html 부터 보자 스크립트는 $(function() { $('div.gallery img').slidingGallery(); }); 확인은 아래링크에서 http://sianasiatiger.cafe24.com/study/JP_slidgall.html 2010. 3. 30.
jQuery 1.4 변경점 jQuery 1.4 변경점 지난 1월달에 jquery 1.4가 나왔다. 변화된점을 요약. 참고한 출처는 여기다http://firejune.com/1527.자세히 설명되있으므로 참조 collection방식 프로그램밍을 해본 이들이라면 c언어를 접해봤을 것이고 클래스(class)에 대해 알것이다.집합된 객체(object)에 변수 함수등을 설정해준다. 이번에 나온 jquery 1.4도 이와 비슷하게 지원된다. 먼저 종전에 사용한 방법을 보자 아래의 html에서 아이디(id), css, 실행함수를 나오도록 해보자 jquery 1.4 그리고 종전의 방식으로 여기에 추가해보자 $('a').attr('id', 'new') .css({'color':'#fcc','font-size':'28px' }) .click(fun.. 2010. 3. 17.
jquery .live()메소드 jquery .live()메소드 live란 말뜻대로 살아있는 이벤트 핸들러이다..... 현재 있지않은 엘리먼트에 이벤트를 줄수있다. 나를누르면~ 위와 같은 html에 아래와 같은 소스 $("p").live("click", function(){ $(this) .after("새문장이뜨네요 또 누르면"); }); 클릭하면 아래 문장이뜨고 또 그걸 클릭하면 또 문장이 뜰것이다 http://api.jquery.com/live/ 위링크에 가서 demo를 보며 확인할 수 있다. 2010. 3. 17.
jquery ajax 요청 절대경로 다른도메인 ajax 요청 절대경로 다른도메인 ajax 요청하기 위 포스팅에서 ajax로 요청하는 방법을 보았다. 문제는 상대경로는 문제없이 읽어들일수 잇는데. 절대경로 즉 다른 도메인이나 서비스를 제공하진 않는 사이트라면 그렇지않다. 이는 대부분의 브라우저가 페이지를 다운로드한 서버외에 다른 서버에 HTTP요청하는 것을 막고있기 때문이다. 즉 보안적으로 브라우저의 당연히 갖춰야할 조취라 할수있다. XSS 크로스 사이트 스크립팅(Cross-Site Script) 앞서 말한 ajax요청등을 악의적으로 사용하는경우를 말한다. 예로들자면 나쁜코드가 다른사용자의 브라우저에서 수행되도록 하는공격,게시판이라든가 쿠키에 접근가능한 일이 가능해진다.요즘 거의 이런일이 없고 보안상 잘준비되있다. 절대경로, 다른도메인에서 읽기 하지만.. 2010. 3. 16.
jquery ajax 요청 함수 jquery ajax 요청 함수 여러 예제를 봤겠지만 요청방식에는 다음과 같은 종류가 있다. getJSON get post ajax 위의 방식으로 요청하는 파라메터는 ajax빼고는 비슷하다 url 데이타 함수 이순서로 입력.예제를 참고하자 $.get('/stest.php', {'param':'jquery'}, function(data) { ...}); 가장간단한 방식은 load이다. load 어떤 위치의 test.html을 불러온다면 $('#test').load('/test.html'}); load는 가장간단한 방식니다. 데이타형식이 객체라면 post 아니면get 방식으로 불러온다. 또 차이점은 문서의 일부분을 불러올수있다는점 $('#test').load('/test.html' #part}); 위의 소스.. 2010. 3. 15.
입력 검색 폼(form) 꾸미기 간단한 검색 폼 간단한폼을 만들어보고 jQuery를 이용하여 label의 텍스트가 검색폼에 들어가게하여 라인을 줄여볼것이다. 입력하세요 css에서 label을 블럭 엘리먼트로 변경해준다. label{ display:block;} 그러면 흔히 볼수있는 다음과 같이모습을 볼수있을것이다. 입력하세요 한라인 줄이기 위의 결과물은 label엘리먼트가 한블럭 차지하여 혹시사이트가 작은공간을 요구할때 불편사항을 줄수도있다.따라서 css변화를 주어 겹치게할것이다. var $search = $('#search').addClass('overlabel'); html에서 클래스를 그냥주지않고 위와같이 jQuery를이용한것은 후에 별도로 같은 구문을 사용할 필요가있기에 변수로 지정해준것이다.그리고 css는 다음과 같다. .ov.. 2010. 2. 22.