본문 바로가기

jQuery38

간단한 jQuery 갤러리 간단한 jQuery 갤러리간단한 클릭이벤트 레이아웃 갤러리.클릭시 하단 박스와 그아래 텍스트를 변경한다. 대략적인 레이아웃 박스구조. html소스 총 5명의 사진을 올릴것이다. 이미지는 썸네일이미지5장, 보여줄이미지 5장. 유사반복되는 중간에 생략했다. 1234567891011121314151617181920212223242526아이돌 갤러리 아이유 소유 아이유 Colored by Color Scriptercs 클릭시 하이퍼링크의 주소와 제목이 하단이미지박스의 주소와 텍스트으로 된다 1cs이 주소와 제목이 아래에 적용12 텍스트cs jQuery없이 스크립트로만 구현하면 길어진다.12345678910111213141516171819function showPic(whichpic) { var source = .. 2015. 10. 30.
jQuery 페이지 스크롤링(scrolling) 플러그인 jQuery 페이지 스크롤링(scrolling) 플러그인 클릭에따라 페이지로 가는 플러그인이다. CSS3로 구며줬고 변경가능은 페이지이동시 속도(duration)이다. 미리보는 데모 http://sianasiatiger.cafe24.com/study/Jp_scroll.html HTML 코드 네비게이션은 다음과 같이 구성한다. 아이디명, 클래스명을 잘봐두자 ↑ Prev ↓ Next Comments Reply 맨위로 콘텐츠 html소스는 다음과 같다.클래스의명을 post로 해주었다. 포스팅 1내용물,그림등 포스팅 2내용물,그림등 포스팅 3내용물,그림등 포스팅 4내용물,그림등 포스팅 5내용물,그림등 네비게이션 네비게이션은 페이지이동해도 유지하도록 고정으로 해준다. #nav-dock { position: fix.. 2010. 7. 6.
jQuery 컨퍼런스 샌프란시스코에서 열린다. 2010 jQuery 컨퍼런스 jQuery 컨퍼런스가 샌프란시스코에서 려린다 기간은 4월 24~25일 링크는 http://events.jquery.org/2010/sf-bay-area/ 돈많거나 갈수있는분은 가보시길 ㅎㅎ 2010. 4. 14.
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.
입력 검색 폼(form) 꾸미기 간단한 검색 폼 간단한폼을 만들어보고 jQuery를 이용하여 label의 텍스트가 검색폼에 들어가게하여 라인을 줄여볼것이다. 입력하세요 css에서 label을 블럭 엘리먼트로 변경해준다. label{ display:block;} 그러면 흔히 볼수있는 다음과 같이모습을 볼수있을것이다. 입력하세요 한라인 줄이기 위의 결과물은 label엘리먼트가 한블럭 차지하여 혹시사이트가 작은공간을 요구할때 불편사항을 줄수도있다.따라서 css변화를 주어 겹치게할것이다. var $search = $('#search').addClass('overlabel'); html에서 클래스를 그냥주지않고 위와같이 jQuery를이용한것은 후에 별도로 같은 구문을 사용할 필요가있기에 변수로 지정해준것이다.그리고 css는 다음과 같다. .ov.. 2010. 2. 22.
jquery text() 메소드 jquery text() 메소드 .text() 메소드는 주요기능으로 텍스트값을 반환하는역할을 한다. alert( $('p').text() ); html은 나를 출력하시오 기본적으로 엘레먼트의 텍스트를 반환하여 출력하게 되어있다. $('p') : p라는 엘리먼트에 접근한다 .text() : 그엘리번트의 텍스트 값을 찾느다. alert : 경고창으로 뜨도록 위와 같이 하면은 경고창에'나를 출력하시오' 라고 나올 것이다.이번에는 괄호안에 값을 넣었을 경우를 보자 $('p').text('나를 출력'); html은 나 말고... 값이 대체 되기도 한다. 화면에는 원래나와야되는 '나말고...' 대신 '나를 출력'이 나타날것이다.정확히 말하면 대체 되는 것이 아니라 덮어지는 것이다. 2010. 2. 20.