>  기사  >  웹 프론트엔드  >  qTip JQuery 기반 툴팁 플러그인 [호환성]_jquery

qTip JQuery 기반 툴팁 플러그인 [호환성]_jquery

WBOY
WBOY원래의
2016-05-16 18:20:401082검색
qTip JQuery 기반 툴팁 플러그인 [호환성]_jquery
홈페이지: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은 다음과 같습니다. 표시:




코드 복사
코드는 다음과 같습니다. < ;script type="text/javascript"> $(document).ready(function() {
$('#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은 다음과 같습니다.




코드 복사


코드는 다음과 같습니다.



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


html은 다음과 같습니다.


코드를 복사하세요 코드는 다음과 같습니다:



JS 코드:



코드 복사$('#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 코드



복사 코드


코드는 다음과 같습니다.




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


성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.