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. 드래그 가능한 대상, 마우스 포인터 등을 따라가세요.

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

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

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

$("#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를 넣습니다.
작성자:囧月