홈페이지:
http://craigsworks.com/projects/qtip/
다운로드:http://craigsworks.com/projects/qtip/download
예:http://craigsworks.com/projects/qtip/
qTip은 JQuery 기반 도구 설명 플러그인입니다. 거의 모든 주요 브라우저를 지원합니다
예:
Internet Explorer 6.0
Firefox 2.0
Opera 9.0
Safari 3.0
Google Chrome 1.0
Konqueror 3.5
qTip을 사용하면 팁의 위치와 스타일을 쉽게 정의할 수 있습니다. 동시에 qTip에는 강력한 API도 있습니다...
qTip을 사용하기 전에 JS 파일 두 개만 가져오면 됩니다. :
다음은 몇 가지 간단한 예입니다.
1. 기본 텍스트
html은 다음과 같습니다.
JS 코드:
2.
html은 다음과 같습니다. 표시:
코드 복사
$('#content a[href][title]').qtip({
콘텐츠: {
텍스트: false
},
스타일: '크림'
})
3. qTip JQuery 기반 툴팁 플러그인 [호환성]_jquery
html 아래와 같습니다.
코드 복사
코드는 다음과 같습니다. 🎜>
코드 복사
코드는 다음과 같습니다.
$(document).ready(function ()
{
$('#content a[href]').qtip({
content: '< ;img src="small.png" alt="qTip JQuery 기반 툴팁 플러그인 [호환성]_jquery" />' }) }) 4. value
html은 다음과 같습니다.
코드 복사
코드는 다음과 같습니다.
코드는 다음과 같습니다. :
html은 다음과 같습니다.
코드 복사
$('#content img').each(function()
{
$(this).qtip(
{
content: '
편집 | 삭제',
위치: 'topRight',
숨기기: {
고정: true
},
style : {
padding: '5px 15px',
name: '크림'
}
})
}); 🎜>
css 코드:
코드 복사
html 로딩은 다음과 같습니다. :
HTML 코드
코드 복사
코드는 다음과 같습니다.
코드 복사
코드는 다음과 같습니다.
버튼: '닫기'
}
},
위치: {
코너: {
대상: 'bottomMiddle ',
tooltip: 'topMiddle'
},
adjust: {
screen: true
}
},
show: {
when: 'click' ,
solo: true
},
hide: 'unfocus',
style: {
tip: true,
border: {
width: 0,
반경: 4
},
이름: 'light' ,
너비: 570
}
})
})
script>
7. 모달 툴팁
html은 다음과 같습니다.
HTML 코드
복사 코드
코드는 다음과 같습니다.