jQuery8 highlight.js를 tistory에서 사용하기. 얼마전 까지 블로그에서 SyntaxHighlighter를 사용 했습니다.기능도 많고, 좋은데... 뭔가 약간 마음에 들지 않아서..정확하게 이야기 하면.. 블로그에 이쁘게 붙는 느낌이 안 들어서 ^^;;;;다른 소스 하이라이터를 찾아 보다가.. highlight.js를 찾았습니다. 이 하이라이터가 마음에 드는건... 테마가 다양하고, 홈페이지에 붙어 있는데..이질감이 많이 들지 않는다는 점입니다.하지만, 마음에 들어도..쓰기 힘들다면, 말짱 도루묵이겠죠?그런데, 이 놈은.. 쓰는 것도 SyntaxHighlighter보다 편하네요 ^^;아주 딱이네요. 이제 사용법을 설명 드리겠습니다. 먼저 http://softwaremaniacs.org/soft/highlight/en/download/ 여기로 갑니다. 원.. 2013. 1. 17. [jQuery] if문으로 요소(element)가 있는지 확인하기. 자바스크립트에서는 아래와 같이 해당 id가 있는지(exists) 체크를 합니다. if (document.getElementById('myDiv')) { alert('myDiv exists'); } 하지만, jQuery에서는 아래와 같이 확인합니다. if ($('#myDiv').length) { alert('myDiv exists'); } 2009. 11. 19. [jQuery] JSON에서 데이터 읽어 오기. jQuery를 사용해서 JSON의 데이터를 읽어서 사용하는 예제입니다. JSON Data { 'US' : {'AK' : 'Alaska', 'AL' : 'Alabama'}, 'CA' : {'AB' : 'Alberta', 'MB' : 'Manitoba'} } jQuery 스크립트 $.getJSON('/state.json',function(data) { $.each(data.US, function(key,state) { $($select_state).append('' + state + ''); }); }); 설명 /stat.json 이라는 파일에서 JSON 데이터를 읽어 와서 data에 넣습니다. $.each로 data안에 'US'의 내용을 하나씩 읽어서 key과 state에 넣습니다. 아래 append예제는.. 2009. 11. 19. [jQuery] 애니메이션 후 삭제하기. selectedLi.slideUp("normal").remove(); 이런식으로 slideUp()이후에서 remove()를 하려고 하면, 바로 애니메이션이 보일려고 하다가, 바로 삭제 되어 버립니다. 이럴 경우에는 callback을 이용해서 remove()를 넣어 주시면, 의도한 대로 애니메이션이 실행되고 나서 삭제 작업이 실행 됩니다. selectedLi.slideUp("normal", function() { $(this).remove(); } ); 2009. 11. 19. jQuery UI 선택 메뉴 jQuery UI 선택 메뉴 플러그인은 HTML의 select 기능을 확장 할 수 있도록 제작 되었습니다. 느낌이 전혀 다른 선택 메뉴 및 아이콘 옵션을 추가해서 계층 구조로 만들 수 있습니다. 그리고, 마우스 동작과 키보드 제어 및 테마 기능까지 갖추고 있습니다. 웹사이트 바로 가기 데모 보기 바로 가기 다운로드 2009. 11. 17. jQuery를 사용해서 폼 기본값 넣기. 폼에서 기본값을 넣어 주고.. 포커스가 가면 그 값을 지워주는 코드 입니다. defaultValue에 대한 자바스크립트 코드는 이곳을 참고 하세요. $(document).ready(function() { $('input[type=text]').focus(function() { if($(this).val() == $(this).attr('defaultValue')) { $(this).val(''); } }) .blur(function() { if($(this).val().length == 0) { $(this).val($(this).attr('defaultValue')); } }); }); 위와 같은 코드를 넣어 주고.. 아래와 같은 코드를 사용하시면 됩니다. 이렇게 해 주면.. "입력해주세요."가 기본값.. 2009. 10. 30. Flash에서 z-index 문제 해결 방법... Flash를 홈페이지에 넣고... jquery로 z-index로 모달을 만들어서 사용 할려고 하면, flash가 z-index와는 아무 상관 없이.. 떡하니.. 위에 나오는 문제가 발생합니다. 이를 해결 하는 방법은 아래와 같습니다. 여기에서 사용한 swfobject.js는 아래 주소의 swfobject 최신 버전을 사용했습니다. 주소 : http://code.google.com/p/swfobject/ Alternative content 테스트 레이어 분명히 test 위치해 있는데.. flash가 떡하니 위로 나오는 문제가 발생합니다. 해결 방법은 간단합니다. Alternative content 테스트 레이어 params에 wmode: 'opaque'를 추가해 주면 아래와 같이 정상적으로 출력 됩니다. .. 2009. 9. 21. jQuery를 이용한 클라이언트 측 폼 검증(Form Validation) 주소 : http://vanadiumjs.com/ 웹 페이지를 작성하다 보면 폼검증에만 많은 시간을 낭비 할 경우가 많습니다. 서버 측에서도 하지만, 클라이언트에도 폼을 검증하기 위해서 각 폼의 이름과 내용을 확인하면서 자바 스크립트를 짜게 되죠. 하지만, 이 jQuery 플러그인을 사용 한다면, 그런 걱정이 반으로 덜 것 같습니다. VanadiumJS는 클라이언트 사이드에서 폼 검증을 하는 파워풀한 jQuery plugin입니다. Ajax를 이용해서 서버측 결과 값도 받을 수 있습니다. 이 플러그인을 사용하시면 2가지 방법으로 폼을 검증 하실 수 있습니다. JSON 구조를 이용한 검증. 인라인 검증 그리고 사용 방법은, 정말 허망 하다 싶을 정도 간단합니다. 제가 게으른 관계로 사이트에서 캡쳐해서 간단.. 2009. 9. 5. 이전 1 다음
