qTip2 jQuery_jquery 기반의 정교한 프롬프트 정보 플러그인

qTip2는 MIT/GPLv2 라이센스를 채택합니다. 공식 웹사이트는 http://craigsworks.com/projects/qtip2/입니다. 아직 안정적인 버전이 출시되지 않았습니다. 물론, 이는 정상적인 사용에는 영향을 미치지 않습니다.
소개
걱정된다면 이전 버전의 qTip을 사용해 볼 수 있지만 일부 매개변수는 qTip에서 qTip2로 업그레이드하는 경우 공식 변환 도구를 사용하여 코드를 업그레이드할 수 있습니다. http: //craigsworks.com/projects/qtip2/converter/.

사용 시 문제가 있으면 다음 3개 파일을 직접 다운로드하세요. 최소한 공식 데모는 정상입니다.

코드 복사 코드는 다음과 같습니다.

다운로드 시 공식 웹사이트의 최신 버전에서 해당 스타일과 플러그인을 선택할 수 있습니다. 옵션 스타일에는 여러 색상 스타일(색상 스타일), 둥근 모서리와 같은 CSS3 관련 스타일 및 다음과 같은 다양한 플러그인이 포함됩니다. 필요에 따라:

1. Ajax는 말할 필요도 없이 원격 콘텐츠를 요청합니다.
2. 팁, 화살표 등의 말풍선 대화 효과
3. jQuery UI Dialog / ThickBox 효과와 같은 모달, 모달 대화 상자 효과
4. 지도의 영역 태그에 대한 신속한 지원을 제공하는 이미지 지도
5. SVG, SVG 요소에 대한 힌트 지원
6. 선택 컨트롤 등을 덮는 등 IE6과 같은 골동품에 사용되는 BGIFrame

위 플러그인의 기능 외에 주요 기능은 다음과 같습니다(일반적으로 사용되는 플러그인만 나열).

1. 안내 내용, 제목, 닫기 버튼 등을 설정합니다.
2. 요소의 속성을 링크 제목(
3. 안내 정보가 표시되는 위치
4. 프롬프트 정보의 대상, 즉 어떤 요소가 표시되는지
5. 요소에 마우스를 대고 클릭(마우스 입력, 클릭)하는 등 프롬프트 정보 표시/숨기기에 의해 발생되는 이벤트
6. 프롬프트 정보 표시/숨기기 효과
7. 해당 스타일 설정을 통한 외관 정의
8. 드래그 가능한 대상, 마우스 포인터 등을 따라가세요.

사용 방법
다음은 일부 사용 방법에 대한 간단한 데모입니다

가장 간단한 프롬프트 만들기:

코드 복사 코드는 다음과 같습니다.

$("#demo2").qtip({
content: "팁 내용입니다(by囧月)"
} ;

$("#demo3").qtip({
content: {
text: "팁 내용입니다(by囧月lwme.cnblogs.com). )"

, 제목: "프롬프트 제목" } }); 닫기 버튼이 있는 프롬프트:

코드 복사


코드는 다음과 같습니다:

$("#demo3").qtip({
content: {
text: " 프롬프트 내용입니다(by囧月lwme.cnblogs.com)"

, title: { text: "프롬프트 제목" , 버튼: "닫기" } } });

요소의 속성을 프롬프트 메시지로 사용:




코드 복사


코드는 다음과 같습니다.

$ ("a[title]").qtip(); //링크 제목
$("img[alt]"). qtip(); //img의 alt
$("div[ title]").qtip() // div 제목에서

요소를 명시적으로 지정할 수도 있습니다. 속성을 프롬프트 정보로 사용:

코드 복사

코드는 다음과 같습니다.

$(' img[alt]').qtip({
content: {
attr: 'alt'

} }) AJAX를 사용하여 원격 요청:

코드 복사


코드는 다음과 같습니다.

$("#demo4").qtip({
content: {
text: "Loading...",
ajax: {
url: "lwmeAtCnblogs.aspx ?name=囧月"
}
}
});

위치 및 스타일 설정:

복사 코드 코드는 다음과 같습니다.

$("#demo5").qtip({
position: {
my: 'bottom left',
at: 'top center'
},
style: {
classes: 'ui-tooltip-red'
}
})

클릭하면 모달 대화 상자가 나타납니다.

코드 복사 코드는 다음과 같습니다.

$(' 버튼').qtip({
content: "팁 내용입니다(by囧月lwme.cnblogs.com)",
show: {
event: 'click' , // 클릭 시 표시 ...
solo: true, // ...그리고 다른 모든 툴팁을 숨깁니다...
modal: true // ...그리고 모달로 만듭니다
},
hide: false
});

페이지가 로드될 때 표시되며 자동으로 숨겨지지 않습니다.

코드 복사 코드는 다음과 같습니다.

$('button').qtip({
content: "팁 내용입니다(by囧月lwme) .cnblogs.com)",
show : {
ready: true
},
hide: false
});

매개변수 설정
먼저 qTip2의 기본 매개변수 설정을 살펴보세요.

코드 복사 코드는 다음과 같습니다.

$.fn.qtip.defaults = {
// 페이지가 로드되면 프롬프트 정보 요소를 생성합니다.
prerender: false,
// 프롬프트 정보에 대한 ID를 설정합니다. 예: myTooltip으로 설정
// ui-tooltip-myTooltip을 통해 이 프롬프트 정보에 액세스할 수 있습니다
id: false,
// 프롬프트가 표시될 때마다 이전 프롬프트를 삭제합니다.
overwrite: true ,
// 요소 속성을 통해 프롬프트 생성
// 예를 들어 a[title], 원래 프롬프트 바꾸기 일부 제목은 oldtitle로 이름이 변경됨
suppress: true,
// 콘텐츠 관련 설정
content: {
// 프롬프트 메시지 내용
// 내용만 설정한 경우 직접 내용을 지정할 수 있습니다: "프롬프트 정보"
// 내용 없음: { 텍스트: { "Prompt information" } }
text: true,
// 프롬프트 정보에 사용되는 요소 속성
attr: 'title',
// ajax 플러그인
ajax: false,
title: {
// 프롬프트 메시지 제목
// 제목만 설정한 경우 제목을 직접 지정할 수 있습니다: "title"
text: false,
// 닫기 버튼 프롬프트 정보
// 예: 버튼: "x", 버튼: "닫기"
// 닫기 버튼을 활성화할 수 있습니다.
버튼: false
}
},
// 위치 관련 설정
position: {
// 프롬프트 정보의 위치
// 예를 들어 프롬프트의 대상 요소(at 속성)의 오른쪽 하단
// 해당 프롬프트 정보의 왼쪽 상단(내 속성)
my: 'top left',
at: 'bottom right',
// 프롬프트의 대상 요소, 기본값은 선택기
target : FALSE,
// 기본적으로 프롬프트 정보가 추가되는 컨테이너
container: FALSE,
// 지정된 대상 내에서 프롬프트 정보가 표시되고 경계를 초과하지 않습니다.
뷰포트: FALSE,
조정: {
// 프롬프트 정보 위치 오프셋
x: 0, y: 0,
마우스: TRUE,
크기 조정: TRUE,
방법 : 'flip Flip'
},
//특수 효과
효과: function(api, pos, viewport) {
$(this).animate(pos, {
기간: 200 ,
queue: FALSE
});
}
},
//표시 프롬프트 관련 설정
show: {
// 이벤트를 트리거하는 대상 요소
// 기본값은 선택기
target: false,
// 이벤트 이름, 기본값은 마우스가 움직일 때
// 클릭으로 변경 가능
이벤트: 'mouseenter',
// 특수 효과
효과: true ,
//표시 시간 지연
지연: 90,
//다른 프롬프트 숨기기
solo: false,
//프롬프트 표시 페이지가 로드된 후
ready: false,
modal: {
// 모달 대화 상자 효과 활성화
on: false,
// 특수 효과
효과: true,
blur: true,
escape: true
}
},
// 프롬프트 숨기기 관련 설정
// 표시
hide: {
target: false 참조 ,
이벤트: 'museleave',
효과: true,
지연: 0,
// true로 설정하면 숨겨지지 않습니다
고정: false,
비활성 : false,
leave: 'window',
distance: false
},
// 스타일 관련
style: {
// 스타일 이름
classes: '' ,
widget: false,
width: false ,
height: false,
// 팁 플러그인, 화살표 관련 설정
tip: {
corner: true,
mimic: false,
너비: 8,
높이: 8,
테두리: true,
오프셋: 0
}
},
// 관련 이벤트 바인딩
이벤트: {
렌더링: null,
이동: null,
표시: null,
hide: null,
toggle: null,
visible: null,
초점: null,
흐림: null
}
}

많아 보이지만 가장 자주 사용되는 매개변수는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

$.fn.qtip.defaults = {
content: {
text: true,
attr: 'title',
ajax: false,
제목: {
텍스트: false,
버튼: false
}
},
위치: {
my: '왼쪽 상단',
at : '오른쪽 하단',
},
쇼: {
이벤트: 'mouseenter',
solo: false,
ready: false,
modal: false
} ,
hide: {
event: 'mouseleave'
},
style: 'ui-tooltip-default'
}

표시된 위치 , 다음 매개변수를 설정할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

my = [
'왼쪽 위', '오른쪽 위', '가운데 위',
'왼쪽 아래', '오른쪽 아래', '가운데 아래',
'오른쪽 가운데', '오른쪽 상단', '오른쪽 하단',
'왼쪽 중앙', '왼쪽 상단', '왼쪽 하단', '가운데'
]
at = [
'왼쪽 하단', '오른쪽 하단 ', '하단 중앙',
'왼쪽 상단', '오른쪽 상단', '상단 중앙',
'왼쪽 중앙', '왼쪽 상단', '왼쪽 하단',
'오른쪽 중앙' , '오른쪽 상단', '오른쪽 하단', '가운데'
]

표시되는 색상 스타일은 다음과 같습니다:

코드 복사 코드는 다음과 같습니다.

['red', 'blue', 'dark', 'light', 'green' ,'jtools', 'plain' , 'youtube', 'cluetip', 'tipsy', 'tipped']

예를 들어 red는 ui-tooltip-red이며 기본값은 기본값입니다. 그 밖에도 각각 그림자 효과와 둥근 모서리 효과를 나타내는 ui-tooltip-shadow와 ui-tooltip-rounded가 있는데, 다음과 같이 중첩할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

$("#demo2").qtip({
content: "팁 내용입니다(by囧月) "
, 스타일: {
클래스: 'ui-tooltip-red ui-tooltip-shadow ui-tooltip-rounded'
}
});

In 또한 ajax의 경우 다음과 같은 주요 매개변수를 설정할 수 있습니다(jQuery.ajax와 일치).

코드 복사 코드는 다음과 같습니다:

$ ('.selector').qtip({
content: {
text: 'Loading...', // 텍스트 로드 중...
ajax: {
url: '/path/ to/file', // JSON 스크립트의 URL
type: 'GET', // POST 또는 GET
data: { id: 3 }, // 요청과 함께 전달할 데이터
dataType : 'json', // JSON을 검색한다고 알려주세요
success: function(data, status) {
//...
}
}
}
} );

AJAX는 기본적으로 GET 요청을 사용하고 캐시가 활성화된다는 점에 유의해야 합니다.
종료
qTip2에 대한 소개입니다. 자세한 내용은 다음 링크를 참고하세요.
공식 홈페이지: http://craigsworks.com/projects/ qtip2/
온라인 데모: http://craigsworks.com/projects/qtip2/demos/
공식 문서: http://craigsworks.com/projects/ qtip2/docs /
마지막으로 간단한 DEMO를 넣습니다.
작성자:囧月