demun(대문블로그)

퍼블리셔/jQuery2012. 7. 4. 06:00

이번에는 가로로 된 아코디언 메뉴입니다. 이글은 웹디자이너를 위한 jquery 에서 추출한 것입니다. 가로로 된 메뉴는 이전에도 한번 다룬적이 있습니다. jquery cookbook 에서 다룬것인데요 거기는 수평 아코디언이라고 했습니다. 수평 아코디언 보기 => http://demun.tistory.com/2083 이글은 이전글과 맥락을 같이 함으로 이전글을 참고하시기 바랍니다. 접었다 폈다하는 아코디언 메뉴 1 => http://demun.tistory.com/2141 접었다 폈다하는 아코디언 메뉴 2 => http://demun.tistory.com/2142 이번에도 이미지가 들어가므로 이미지는 제가 블로그에 업로드한후 경로를 수정했습니다. 가로로 된 아코디언은 라벨 부분이 세로로 표현이 되야하는데 ..

퍼블리셔/jQuery2012. 7. 3. 06:00

이번에는 저번에 이어 좀더 개선된 아코디언 메뉴입니다. 마찬가지로 소스는 웹디자이너를 위한 jQuery 에서 추출한 것입니다. 실무에서 이용할만한 것을 추출해서 소개하고 있습니다. 이번에는 이미지가 들어가서 마우스를 오버했을때를 강조하여 좀더 보기조은 아코디언을 만들었습니다. 한가지 더 이미지가 3개가 포함이 되므로 제가 블로그에 업로드한 후 그걸 배경으로 사용했습니다. 이전글과 연동되므로 이전글을 참고해주세요. 접었다 폈다하는 아코디언 메뉴 1 => http://demun.tistory.com/2141 마우스가 손모양으로 바뀐것과 현재 선택되어진곳은 색깔이 다른것을 알 수 있습니다. 참고할 스타일 설정부분은 아래와 같습니다. dt{ line-height:35px; font-size:large; text..

퍼블리셔/jQuery2012. 7. 2. 06:00

아코디언 메뉴중에서 가장 심플한 아코디언 메뉴 1번입니다. 오늘 이야기하는 아코디언 메뉴는 웹디자이너를 위한 jquery 입니다. 이 메뉴는 이미지가 하나도 없습니다. 실무에서 바로 사용이 가능한 아주 간단한 메뉴입니다. 자바스크립트 아코디언 메뉴 => http://demun.tistory.com/2139 jquery cookbook 의 아코디언 메뉴 => http://demun.tistory.com/2083 먼저 전체 소스를 공개합니다. 여기서는 jquery 에 대한 이야기만 해보겠습니다. 주석을 상세하게 달아놧으니 이해가 가실겁니다. $(function(){ // 모든 패널이 펼쳐져있는 상태이기 때문에 dd의 첫번재를 제외한곳은 안보이게 설정합니다. $("dd:not(:first)").css("dis..

퍼블리셔/javascript2012. 6. 30. 06:00

아코디언은 검색하면 쏟아질정도로 많이 나옵니다. 아래 소스는 제가 JavaScript Cookbook 를 보고 나중에라도 한번 이용해먹을수 있겠다싶어 흔적을 남겨 놓습니다. 코드를 설명을 대략 하면 이렇습니다. 책에는 대략적으론 나와 있어서 초보자들은 정말 알기 어렵습니다. 첫번째 줄은 div 영역을 elements 라는 변수에 담습니다. for문을 사용해서 elements 의 길이(length)를 체크해서 0보다 크면 실행하게 됩니다. 뭘 실행하냐?? div 즉 클릭한요소의 클래스 네임이 elements 와 같으면 스타일을 display="none" 로 만들어서 안보이게하고 그렇지않고 클래스 네임이 label이면 switchDisplsy 를 실행합니다. switchDisplay() 는 뭐냐?? 상황에 ..

퍼블리셔/jQuery2012. 2. 10. 06:00

jquery cookbook 에 수평 아코디언 메뉴가 있습니다. 좀더 배우고 익히고자 이렇게 글을 씁니다. 제이쿼리 수평 아코디언 메뉴는 쿡북 예제 사이트에서 코드와 데모 화면을 볼 수 있습니다. 우선 어떤 방식인지 대략 살펴봅니다. 첫번째 화면. 두번째 화면. 세번째 화면. 즉 이미지를 클릭하면 왼쪽, 오른쪽으로 이동하는 아코디언 메뉴입니다. 전체코드는 아래 첨부한 파일을 다운로드 받아서 클릭해보시면 알 수 있습니다. 단 jquery 코드와 이미지 , 그리고 css 설정은 예제사이트의 주소로 했습니다. 전체코드는 내용이 길어 생략합니다. 파일을 다운로드 받아서 보시기 바랍니다. 여기서 jquery 부분을 살펴보겠습니다. 먼저 코드를 보시죠. $.fn.horizontalAccordion = functio..