자바스크립트9 [자바스크립트] Apple.com의 슬라이드 갤러리 애플 사이트의 구성중 하나인 슬라이드가 되는 이미지 갤러리를 구현해 봤습니다. 예제를 먼저 보실 수 있습니다. 배경색, 이미지 깨짐이 발생할 수 있습니다. 미리보기 CSS와 마크업을 조금 다듬으면 좀더 보기 좋을것 같습니다. 코딩은 간단하니 소스를 직접 참고하시면 되겠습니다. 소스는 첨부합니다. 그럼 즐프하세요~~ 2011. 1. 14. [자바스크립트] 탭 메뉴 만들기 이 글은 다음 블로그에 있던 포스팅을 재 정리 한겁니다. 그쪽이 워낙 개판으로 정리가 안되어 있어서요. 이번에는 간단하게 탭 메뉴를 만들어 보겠습니다. 실제로는 메뉴가 아니고 탭을 선택하면 공통영역에 콘텐츠를 바꾸는 아주 소스가 널려있는 그 기능. 실제로는 별게 아닙니다. 자 데모를 작동해 보시죠. 데모 보기(탭 메뉴를 클릭하시거나 마우스를 올리시면 작동합니다. 이미지는 깨질 수 있습니다.) 동적으로 사용할 수 있도록 구성해 보았으니 한번씩 써보시고 문제가 있거나 개선점이 있으면 피드백하셔도 됩니다.(사실 제이쿼리는 롤링이나 탭 기능을 합쳐 놓았습니다. 그게 훠얼씬 사용하기 쉽죠. ^^;; ) 위 이미지와 같이 각 사이트명 또는 숫자에 마우스를 올리거나 클릭하면 하단의 영역이 바뀝니다. 따로 설명하지 않.. 2010. 12. 29. [자바스크립트] JSON 데이터를 이용한 컨텐츠 노출 스킨 변경 - 번외편(?) 이번 포스팅은 이전 4번의 포스팅으로 마무리 지었던 소스에 몇가지 기능을 더 추가한 버젼입니다. 멋지게 표현하면 스핀오프 시리즈라고 할까요? ^^ 상세보기에서 이전글/다음글을 볼 수 있는 기능과 썸네일 보기에서 핸들을 잡고 움직이면 콘텐츠가 움직이는 기능입니다. 모두 제가 이전에 포스팅 했던 소스들을 그대로 사용을 했으며 따로 보시길 원하시면 WEB > Javascript 카테고리에 보시면 있습니다. 혹시 모르니 제일 아래쪽에 링크도 쏴 드리죠. 결코 조회수를 늘리기 위함이 아닌... 하하하;;; 자 이제 미리보기를 통해 사용할만 하신지 확인해 보세요. 데모 실행해보기(실제 작동되는 예제입니다. 리스트/상세/썸네일 보기를 클릭해 보세요. 이미지는 깨질 수 있습니다.) 원래는 width가 935 픽셀이였는.. 2010. 12. 29. [자바스크립트] 이미지 슬라이드 이 자료는 현재 버그가 있습니다. 버그가 수정되기 전까지는 추천드리지 않습니다. 필요하시면 아래 링크의 다른 글을 참고하시기 바랍니다. jQuery 를 이용한 이미지 로테이트 이미지가 슬라이딩 되는 자바스크립트입니다. 아래 예제를 보시면 됩니다. 이미 Jquery 를 이용해서 많이들 사용하시고 계신데요. 저는 Jquery를 사용하지 않고 짜봤습니다. 공부하실 목적이나 JQuery 프레임워크가 부담스러우신 분들 사용하시면 되겠습니다. 미리보기 이 소스는 다음 블로그에 상세히 설명을 했던 소스입니다. 파일은 첨부합니다. 첨부된 파일의 이미지 경로 부분은 환경에 맞게 수정해서 사용하셔야 합니다. 아~ 그리고 파일 타입은 ANSI타입입니다. 위 예제는 UTF-8입니다. 한글이 깨지길래 인코딩을 바꿔서 하나 더 .. 2010. 12. 29. [자바스크립트] JSON 데이터를 이용한 컨텐츠 노출 스킨 변경 - #4 4번째 포스팅이네요. 이번에는 죽이되든 밥이되든 마무리 하려 합니다. 사실 많이 부족한 내용으로 될 거 같은데요. JSON데이터를 이용해서 다양한 모양의 스킨에 뿌리는 것이 주 목적이었기 때문에 일단은 그에 대한 내용만 구성하기로 했습니다. 안쪽에 위치한 콘텐츠에 대한 스크립트 까지 다 작성해서 포스트를 구성하려면 책 한권은 나오겠더군요. 물론 과장 쪼끔 했습니다. 하하. 그래서 이번 포스팅에서는 상세보기의 좌우 화살표, 썸네일보기의 하단 스크롤바에 대한 내용은 포함되지 않았습니다. 나중에 제가 작업을 한 후에 따로 링크를 걸어드리겠습니다.(사실 저도 이걸 써야 되거든요 ^^) 자 그럼 본론으로 돌아가서 저번 포스팅까지 왠만큼은 그럴싸하게 구성했었습니다. 못보신 분들을 위해 링크 올려드립니다. 2010/.. 2010. 12. 27. [자바스크립트] JSON 데이터를 이용한 컨텐츠 노출 스킨 변경 - #3 이번 포스팅에서는 실제로 데이터를 만들고 실제로 구동할 수 있는 함수들을 만들어 보도록 하겠습니다. 실제로 데이터들을 접근하고 원하는 위치에 데이터를 노출시키는 작업이 되겠습니다. 들어가기에 앞서 이번 스크립트는 아주 협소한 코드로 짜여 질것이며, 단순히 현재 화면을 구현하고 테스트하기 위한 소스가 될것입니다. 마크업과 JSON 데이터를 변형시키겠습니다. 마크업에 대해서는 아래 코드와 함께 설명을 드리겠습니다만 그림도 같이 들어갈 수 있겠네요. JSON 데이터는 실제로 나올 데이터를 예제로 만들어서 사용하겠습니다. 보시면 이해가 빠르실것 같습니다. 먼저 JSON 데이터를 보도록 하겠습니다.(너무 길어서 토글로 처리합니다.) [열기] var datas = { config : { jsonName : "dat.. 2010. 12. 22. [자바스크립트] JSON 데이터를 이용한 컨텐츠 노출 스킨 변경 - #2 이번에는 프로토타입 수준의 코딩을 하겠습니다. 이번 포스팅을 제외하고 앞으로 2번정도(#4가 되면) 더 글을 남길까 합니다. 저도 구현하는 대로 포스트를 남기는 상태라 조금 미흡하더라도 너그러이 채찍질을... 앗 따거.. 그럼 일단 마크업과 CSS 를 보겠습니다. 따로 설명을 드리진 않습니다. 별게 없어서요. 그냥 스타일 시트와 HTML 뿐입니다. 마크업입니다.(소스코드는 하단 첨부파일로 대체 하겠습니다. 페이지 로딩이 너무 오래 걸리네요. syntaxhighlight가 힘들어 합니다.) ◀ ◀▶ 1/4 크게 마루 밑 아리에티분 류애니제 작지브리 스튜디오(일본)개 봉2010. 09줄거리10cm 소녀 아리에티, 마루 위 인간 세상으로 뛰어들다! 교외에 위치한 오래된 저택의 마루 밑에는 인간들의 물건을 몰래.. 2010. 12. 20. [자바스크립트] JSON 데이터를 이용한 컨텐츠 노출 스킨 변경 - #1 이번 포스팅은 자바스크립트를 이용하여 사용자 보기(뷰)를 변환해서 보여주는 내용입니다. 마땅한 제목이 생각나지 않아서 포스팅 제목이 난해합니다. 추후에 바람직하고 간단한 제목으로 바꼈으면 합니다. 어떤분이든 제시 좀 해주세요. ^^;; 제목보다는 위 이미지를 보면 이해하기 쉽습니다. 각 리스트, 상세, 썸네일 보기 별로 모양이 달라지게 하는 내용입니다. "어~ 이거뭐야. 이거는 지금도 다 되고 있잖아~" 라고 하셔도 할말이 없습니다. DB에서 꺼내진 데이터를 각 스킨에 맞게 처리한 후 각 보기별로 display 속성을 제어해서 보여주면 되겠지요. 물론 대부분 작업이 그렇게 되어져 있습니다. 그런데 여기서는 DB에서 꺼낸 데이터를 JSON에 담아놓고 자바스크립트를 이용해서 선택된 보기에 맞게 모양을 바꾸려.. 2010. 12. 20. [자바스크립트 TIP] tbody.innerHTML 이 안된다고?? 스크립트 작업을 하다가 아무리 해도 안되는게 있어서 머리가 지끈거렸다. 그 문제의 녀석은 var l = document.getElementById("list"); var tbody = l.getElementsByTagName("TBODY"); var tr = tbody[0].innerHTML; var tmp = tr + "하하하"; tbody[0].innerHTML = tmp; 이 지극히 평범해 보이는 구문이었는데. 5번째 줄에서 스크립트 오류가 떨어지는 것이었다. 아~ 젠장 또 오타인가 하고 아무리 들여다 봐도 너무나 짧은 구문에 오타라고 찾아볼 수가 없었다. 뭐지뭐지.. 아무리 이리저리 고쳐봐도 안되는게 머리를 쥐어짜게 만들었다. 그런데 왠걸.. 문제의 해답은 너무나도 간단한 곳에 ㅡㅡ;; IE 에서.. 2010. 12. 17. 이전 1 다음
