티스토리

스토브 훌로구

검색하기

블로그 홈

스토브 훌로구

stove99.tistory.com/m

스토브 님의 블로그입니다.

구독자: 4

방명록 방문하기

주요 글 목록

jQuery 로 탭 만들어 보기 예제 소스 다운로드 on, off 이미지로 탭 만들기 (요즘은 거의 이렇게 안 쓰지만 불가피하게 쓸 경우가 있는것 같아서..) 탭1 첫번째 패널 끝 탭1 두번째 패널 끝 탭2 첫번째 패널 끝 탭2 두번째 패널 끝 탭2 세번째 패널 끝 이미지 대신 class 로 간단하게 on/off 탭메뉴 만들기 첫번째메뉴 두번째메뉴 첫번째 패널 끝 두번째 패널 끝 첫번째메뉴 두번째메뉴 세번째메뉴 첫번째 패널 끝 두번째 패널 끝 세번째 패널 끝 공감수 1 댓글수 0 2018. 10. 12.
Javascript 로 초성검색하기 어떤 훌륭한 분이 한글을 분리해주는 라이브러리를 맨들어줘서 그분의 라이브러리를 활용한 초성 검색 예제를 만들어 보았다. 라이브러리 : https://github.com/e-/Hangul.js/ 검색어 : ex) ㅎㄱ or 한국 코드 검색어 : 공감수 4 댓글수 0 2018. 6. 26.
jQuery 로 탭메뉴를 맹글어 보아요~ 최종적으로 맹글어질건 아래와 같은, 사이트 메인화면 중간중간에 들어가는 탭메뉴들이다.(클릭하면 클릭됨) 1제목이 나오는부분.....11111 2제목이 나오는부분.....22222 무우우우우우우우.....1111 5무우우우우우우우ㄴ.....2222 요농이 요느마111111111111 요농이 요느마22222222 ㄷㄹㄴㄹㄴㄹㄴㄷㄹㄴㄹ1111 ㄷㄹㄴㄹㄴㄹㄴㄷㄹㄴㄹ2222 html ※ 버튼의 롤오버 이미지 파일명은 ***_on.* ***_off.* 요렇게 해야 클릭했을때 이미지가 바뀐다. 첫번째 탭메뉴 1 제목이 나오는부분..... 2 제목이 나오는부분..... 무우우우우우우우..... 5무우우우우우우우ㄴ..... 요농이 요느마 요농이 요느마 ㄷㄹㄴㄹㄴㄹㄴㄷㄹㄴㄹ ㄷㄹㄴㄹㄴㄹㄴㄷㄹㄴㄹ css javascript.. 공감수 44 댓글수 8 2014. 10. 15.
네이버맵 커스텀 컨트롤(CustomControl) 버튼 지도에 추가하기 네이버 지도에 커스텀 버튼을 넣을라고 공식 API 문서를 디벼보면서 추가해 볼려고 했더니 생각대로 잘 넣어지지 않았다 -.- 구글님에게 이것저것 디벼보면서 커스텀 버튼을 뽓 넣었다. API 문서좀 잘 맹글어 주지하는 아쉬움은 있지만 뭐 어쩌나~~ 버튼을 쪽바로 넣기 위해서는 로 버튼을 한번 뽓 감싸줘야 된다. 솟스 결과 공감수 3 댓글수 0 2014. 4. 29.
jQuery 로 탭메뉴 보였다 안보였다 맹글기 탭을 클릭할때 탭메뉴 이미지가 on, off 되고 해당되는 서브메뉴 div 가 보였다 안보였다 하는 샘플을 맹글어 보았다. 주석을 싹 달아놨으니 응용하는데 큰 문제는 없을것이다. ※ 롤오버 이미지 이름은 프로그램 편의상 xxxxxx.png, xxxxxx_on.png 요렇게 해야 쪽바로 작동한다. ※ png 파일이 아니라 gif 나 뭐 다른 확장자면 소스중에 .toggle() 요부분에다 옵션으로 지정할 수는 있다. 고건 주석으로 설명되 있음. html 서브1룰루랄라~ 서브2 서브3 서브4 서브5 서브6 서브7 javascript var tabMenu = $("#tabMenu ul>li>a"); var tabSubMenu = $("#tabSubMenu>div"); // 모든 서브메뉴 안보이게 tabSubMe.. 공감수 29 댓글수 3 2014. 4. 10.
jQuery로 Outer HTML 가져오기 예를들어 요런 HTML 이 있다 치면 Alone by Zsolt Zsigmond $("#sample").html(); 로는 sample 안쪽의 html 만 가져올수 있다. Alone by Zsolt Zsigmond sample 까지 포함한 html을 가져오기 위한 jQuery 함수는 없는것 같다. 찾아보면 있을지도 -_-? 아무튼 sample 까지 포함한 outer HTML 을 가져오기 위해 outerHTML() function 을 추가해 보자 $.fn.outerHTML = function() { var el = $(this); if( !el[0] ) return ""; if (el[0].outerHTML) { return el[0].outerHTML; } else { var content = el.wr.. 공감수 17 댓글수 2 2012. 11. 6.
jQuery 로 페이지를 벗어날때 확인창 띄우기 웹에서 글을 작성하다 뒤로가기, 창닫기, 리프레쉬등등 실수로 페이지를 벗어날때 요런창이 뜨는 사이트가 있다. IE9에서 크롬에서 jQuery 를 이용해서 죠런 기능을 구현할려면 요렇게 하면 된다. 단, 글쓰기 버튼을 클릭해서 글을 저장한 후 페이지를 이동할때도 저런 메시지가 뜨기 때문에, 고럴땐 checkUnload 값을 false 로 바꿔준 후 submit 이나 페이지를 이동해야 한다~ $("#saveBtn").on("click", function(){ checkUnload = false; $("#saveForm").submit(); }); 공감수 18 댓글수 1 2012. 6. 8.
jQuery 로 원하는 갯수만큼 checkbox 선택하기 티켓 예매하는 사이트 같은데서 보면 인원수를 선택하고 그 인원수만큼만 좌석을 선택하는게 있다. 고런걸 한번 jQuery를 이용해서 간략하게나마 맹글어 보겠다. 저쪽 아래의 소스 코드로 맹글어질 것은 아래와 같다. 테스트로 클릭해 보셈~ ※ 요것은 IE7~9, 크롬에서 정상적으로 테스트 됬다. 인원수 선택 : 1명 2명 3명 4명 5명 1 2 3 4 5 6 7 8 9 10 11 12 소스코드 인원수 선택 : 1명 2명 3명 4명 5명 1 2 3 4 5 6 7 8 9 10 11 12 jQuery 를 하면서 매번 느끼는 거지만 jQuery가 없었다면 우쨋을까 하는 생각이 든다. 저런걸 쌩 자바스크립트로 구현할려면..... 암울하기 짝이없다. 나는 jQuery 빠돌히릿~♥ ※ IE9 에서 $(":checked".. 공감수 5 댓글수 1 2011. 11. 24.
jQuery 로 메뉴 접었다~ 펼쳤다~ 구현하기 jQuery 를 이용하면 드럽게 복잡해질 자바스크립트가 매우매우매우매우매우 심플해 진다. 간단한 몇 라인의 코딩만으로 쉽게 간지나는 것을 맨들 수 있다. 고것을 설명하기 위해 접었다 펼쳐졌다 하는 간단한 메뉴를 만들어 보았다. 본인이 디자이너가 아닌 관계로 화면은 쫌 그지같지만 css 만 적용시키면 쓸만한 있어 보이는 메뉴를 바로 맨들 수 있다. 대충 요렇게 하는 것이다 라고 설명을 하는 것이니 디자인 과감히 생략한다. 우선 처음으로 맨들어볼 메뉴는 요렇다.( 클릭하면 접었다 펼쳐졌다 접었다 펼쳐졌다 함 ) 메뉴1-1 메뉴1-2 메뉴1-3 메뉴1-4 메뉴1-5 메뉴1-6 메뉴2-1 메뉴2-2 메뉴2-3 메뉴2-4 메뉴2-5 메뉴2-6 요런 모양을 맨들기 위한 html 마크업은 요렇게~ html 태그에 o.. 공감수 103 댓글수 39 2011. 11. 18.
jQuery 로 해보는 체크박스(checkbox) 전체선택, 선택해제 예제 맨들어볼 기능은 아래와 같다. 많이들 보는 형태의 테이블이다. 각 row 에 체크박스가 있고 헤더에 있는 체크박스를 선택하면 모든 체크박스들이 싹다 선택되고 하는 고런 기능이다~ 대충 뭐 어떤 기능인지는 알고 있을테니 자세한 기능 설명은 생략한다. (직접 클릭해 보기 바람) 체크박스 전체선택 테스트 제목 날짜 제목1 날짜1 제목2 날짜2 제목3 날짜3 제목4 날짜4 제목5 날짜5 제목6 날짜6 소스는 요렇다. 얼핏보면 은근 복잡해 보이기도 한데 그냥 별 생각없이 예제를 만들다 보니 그런것도 있고~ jQuery 의 함수들을 이것저것 복합 다양하게 일부러 쓴 경향도 있다. 이왕이면 여러가지 것들을 써 봄으로써 몰랐던 jQuery 의 쓰임새도 추가적으로 파악할 수 있지 않을까 하는 고런 마음에서 -_-;; j.. 공감수 9 댓글수 2 2011. 11. 15.
jQuery로 테이블 tr 동적으로 추가,삭제 하기 v2 저번에 맹글었던거에서 옵션을 추가하는 기능을 추가해보았다. 이 예제에서 꽤 많은 jQuery 셀렉터와 함수들을 사용한것 같은데 소스를 이해해 보면서 jQuery 사용법을 살살 익혀봐도 좋을것 같다. 만들어질 것은 다음과 같다. (직접 클릭해 보기바람) 옵션추가 옵션명 항목명 필수항목 가격 재고 옵션추가 항목추가 삭제 항목추가 삭제 항목추가 삭제 항목추가 삭제 소스 옵션추가 옵션명 항목명 필수항목 가격 재고 옵션추가 항목추가 삭제 항목추가 삭제 항목추가 삭제 항목추가 삭제 2011/11/11 - [Javascript 예제] - jQuery로 테이블 tr 동적으로 추가,삭제 하기 2011/11/07 - [jQuery Plugin] - 자작 훌러그인 : jQuery blingLink v0.1 (링크 롤오버시 .. 공감수 39 댓글수 33 2011. 11. 11.
jQuery로 테이블 tr 동적으로 추가,삭제 하기 jQuery를 사용해 테이블을 동적으로 변화시키는 예제를 맹글어 보았다. jQuery 로 맹글어서 왠만한 브라우져에서는 다 작동할 것이라 예측한다. 살짝 응용하면 다른 재미진 것도 할 수 있을듯~ 만들어질 것은 다음과 같다. (직접 클릭해 보기바람) 옵션명 항목명 필수항목 가격 재고 옵션추가 항목추가 삭제 항목추가 삭제 항목추가 삭제 항목추가 삭제 소스 옵션명 항목명 필수항목 가격 재고 옵션추가 항목추가 삭제 항목추가 삭제 항목추가 삭제 항목추가 삭제 2011/11/09 - [Javascript] - javascript Array 에 protoype으로 remove 함수 추가하기 2011/11/07 - [Javascript] - javascript 로 PC에서 접속했는지 모바일 기기에서 접속했는지 체크하.. 공감수 5 댓글수 3 2011. 11. 11.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.