유용한 툴팁 튜토리얼 및 jQuery 플러그인
게시 됨: 2010-03-15도구 설명은 일반적인 그래픽 사용자 인터페이스 요소입니다. 커서, 일반적으로 마우스 포인터와 함께 사용됩니다. 사용자가 항목을 클릭하지 않고 커서를 항목 위로 가져가면 도구 설명이 나타날 수 있습니다. 즉, 마우스를 가져가는 항목에 대한 정보가 있는 작은 "호버 상자"입니다.
몇 가지 자습서와 도구 설명용 jQuery 플러그인을 컴파일했습니다.
1. TinyTips – 툴팁용 경량 jQuery 플러그인
TinyTips는 페이지의 거의 모든 요소에 툴팁을 추가할 수 있는 기능을 제공하는 매우 가벼운 jQuery 플러그인입니다. 철저하게 문서화되고 디자이너 친화적입니다.
2. jQuery를 사용한 Flickr 스타일 사진 태깅
jQuery Photo Tagger는 약 1,000줄의 코드로 제공됩니다. 따라서 프로젝트 페이지를 확인하거나 온라인 데모를 직접 사용해 볼 수 있습니다. 핫스팟을 생성하려면 마우스를 클릭할 때 CTRL 키를 누르고 있어야 합니다.
데모 | 다운로드
3. 이미지가 없는 TipTip 커스텀 툴팁 jQuery 플러그인
TipTip은 기본 브라우저 툴팁과 마찬가지로 title 속성을 사용합니다. 단, TipTip 사용 시 해당 요소에서 제목이 복사된 후 제거되어 브라우저 툴팁이 표시되지 않습니다.
TipTip은 TipTip이 적용된 각 요소에 대해 하나의 팝업 요소 세트를 생성하는 대신 총 하나의 팝업 요소 세트만 생성합니다. 이는 작업 속도를 높이고 처리 시간을 줄이는 데 도움이 됩니다. 생성된 요소는 모두 div 요소이며 body 요소의 끝에 추가됩니다.
4. CSS3로 새로운 시각적 주석을 만드는 방법
ZURB는 새로운 시각적 주석을 작성하는 방법을 가르쳐 왔습니다. 솔루션은 기술적으로 너무 복잡하지 않았습니다. Notable을 통해 그들은 우아한 성능 저하의 개념을 수용했습니다. 즉, 이전 브라우저로 완전히 저하되는 새로운 CSS 기술을 활용합니다.
데모
5. Pluralink를 사용하여 링크를 드롭다운 목록으로 표시
Pluralink는 텍스트에 여러 링크를 정렬하는 놀라운 자바스크립트 플러그인입니다.
6. CSS 및 jQuery를 사용한 그레이스케일 호버 효과
CSS 및 jQuery를 사용한 그레이스케일 호버 효과는 CSS Sprite와 몇 줄의 jQuery에 의존하지만 구현하기 전에 약간의 준비가 필요합니다. 대규모 프로젝트에는 권장되지 않으며 포트폴리오 조각을 표시하는 데 가장 적합합니다.
7. EverythingZoomer jQuery 플러그인으로 자세히 살펴보기
당신은 작은 영역이 있습니다. 그 위로 마우스를 가져갑니다. 확대하여 자세히 볼 수 있는 영역이 나타납니다. 이것은 그것을 수행하는 jQuery 플러그인입니다. 어떤 용도로 사용해야 하는지 또는 사용 사례 시나리오를 자세히 설명하지는 않겠습니다. 당신의 창의력이 당신을 도울 수 있습니다.
데모
8. JSON 및 jQuery를 사용하여 콘텐츠가 풍부한 도구 설명 만들기
이 튜토리얼은 JSON 배열에서 가져온 정보를 사용하여 jQuery로 구동되는 툴팁을 빌드하는 방법을 보여줍니다.
데모
9. 기본 도구 설명을 Pretty(mb) 도구 설명으로 교체
(mb)Tooltip은 jQuery의 웹페이지에 대한 아름다운 툴팁입니다.
다운로드
10. Captify 디스플레이 롤오버 시 예쁜 이미지 캡션이 나타남
Captify는 롤오버 시 나타나는 간단하고 예쁜 이미지 캡션을 표시하기 위해 Brian Reavis가 작성한 jQuery용 플러그인입니다. Firefox, Chrome, Safari 및 비참한 Internet Explorer에서 테스트되었습니다. Captify는 이와 같은 캡션을 표시하기 위한 또 다른 jQuery 플러그인인 ImageCaptions에서 영감을 받았습니다.
11. imgPreview jQuery 플러그인으로 이미지 미리보기
Peter Higgins는 Dojo Zoomer를 만들었습니다. 3개의 패널로 나누어져 있습니다. 왼쪽 패널의 이미지 위로 마우스를 가져가면 오른쪽 패널에 이미지의 잘린 부분이 동적으로 표시되므로 기본 이미지에서 관심 있는 부분에 명시적으로 집중할 수 있습니다.
12. GPL의 jQuery Javascript 이미지 돋보기
JQZoom은 인기 있는 jQuery 자바스크립트 프레임워크의 상단에 구축된 자바스크립트 이미지 돋보기입니다. jQzoom은 원하는 것을 확대하는 훌륭하고 사용하기 쉬운 스크립트입니다.
13. jQuery와 CSS를 사용한 간단하고 투명한 툴팁
CSS 툴팁은 현대 웹 디자인에서 매우 인기가 있으며 대중적인 믿음과는 달리 특히 인기 있는 모든 자바스크립트 프레임워크 중 하나를 사용하여 툴팁을 만드는 것이 정말 쉽습니다.
데모
14. Magic Toolbox - 자바스크립트 및 플래시 이미지 확대/축소 도구
Magic Toolbox는 2개의 놀라운 자바스크립트 이미지 확대/축소 도구( Magic Zoom 및 Magic Magnify )를 만들었습니다. Magic Zoom은 JavaScript 확대/축소 도구입니다. 이미지를 믿을 수 없을 정도로 자세하게 표시하는 가장 좋은 방법입니다.
15. Prototip 2 – 쉽게 아름다운 툴팁 만들기
Prototip을 사용하면 Prototype 자바스크립트 프레임워크를 사용하여 간단하고 복잡한 툴팁을 쉽게 만들 수 있습니다.
데모
16. jQuery를 사용한 가장 쉬운 툴팁 및 이미지 미리보기
가장 쉬운 도구 설명 및 이미지 미리 보기는 링크나 축소판 위에 마우스를 올려 놓으면 나타나는 도구 설명과 같은 풍선 팝업 중 하나입니다.
데모
17. jQuery를 사용한 Coda 스타일 팝업 버블 툴팁
Coda는 Mac을 위한 새로운 웹 개발 도구 중 하나이며 디자이너와 개발자 사이에서 인기가 있습니다.
18. 클릭 가능한 이미지 영역에 태그를 지정하면 팝업 도구 설명이 표시됩니다.
Taggify는 블로거와 퍼블리셔가 특정 이미지의 reqions에 링크된 이미지 툴팁을 추가하여 사이트를 향상시킬 수 있는 웹 위젯입니다.
데모
19. 자바스크립트와 CSS를 사용한 눈에 잘 띄지 않는 버블 툴팁
버블 툴팁은 웹 페이지에 풍선 모양의 멋진 툴팁을 (CSS와 자바스크립트를 통해) 쉽게 추가할 수 있는 방법입니다.
데모
20. 프로토타입 및 스크립트를 위한 페이드 인 및 아웃 툴팁
CoolTips는 가볍고 눈에 잘 띄지 않는 JavaScript 웹 브라우저 도구 설명 대체 기술입니다.
CoolTips는 기존 웹 브라우저 툴팁을 대체하는 데 사용됩니다. 도구 설명은 제목 속성의 내용을 가져오므로 눈에 거슬리지 않습니다. CoolTips는 Prototype JS 및 script.aculo.us 프레임워크를 기반으로 하는 객체지향 클래스입니다.
21. 스위트 타이틀 투명 및 페이딩 툴팁
Sweet Titles Fading Tooptips는 NICE Titles의 모방이 아니며 Dunstan의 수정된 시도를 개선하려는 것도 아닙니다. 그리고 Dynamic Drive 의 이벤트 핸들러 감염 스크립트 중 하나에서 추출되지 않은 것이 가장 확실합니다.
데모
22. Prototip 대부분의 기능 프로토타입용 툴팁
Prototip을 사용하면 Prototype 자바스크립트 프레임워크를 사용하여 간단하고 복잡한 툴팁을 쉽게 만들 수 있습니다. Scriptaculous도 사용한다면 멋진 효과를 추가할 수도 있습니다.
데모
23. BoxOver DHTML/Javascript 경량 툴팁
BoxOver는 javascript/DHTML을 사용하여 웹사이트에 툴팁을 표시합니다. 그러나 툴팁의 구현에는 DHTML이나 자바스크립트에 대한 지식이 필요하지 않습니다. 태그의 "제목" 속성을 통해 설정하여 필요에 맞게 사용자 정의할 수 있는 많은 조정이 있습니다.