Thickbox는 jQuery용 플러그인으로, 대화 상자와 웹 페이지 상자를 팝업하여 사용자 경험을 더욱 즐겁게 만들어주는 기능을 합니다.
면책조항: 이는 개인 요약 기록일 뿐입니다.
준비 작업: Thickbox.js, Thickbox.css, jquery.js의 세 가지 파일이 필요하며 온라인 어디에서나 다운로드할 수 있습니다
구체적인 용도:
1단계: Thickbox를 사용하려는 페이지에 이 세 파일을 삽입합니다
tb_init(), tb_show()와 같은 Thickbox 함수 호출도 있습니다.
1. 사진을 보려면 클릭하세요:
응, 바로 그거야
2. 버튼이나 링크를 클릭하세요:
방법은 동일합니다. 추가된 링크에 두꺼운 상자 스타일을 추가하세요.
편집도 마찬가지입니다. 먼저 원본 정보를 추출한 다음 사용자가 수정하도록 하세요.
동일 코드:
5. Ajax를 통해 로드된 페이지의 경우 두꺼운 상자 스타일이 유효하지 않습니다. 해결 방법:
AJAX가 HTML을 로드하고 페이지에 업데이트한 후 다음 코드를 실행하세요.
tb_init('.thickbox');
6. 사용자 정의 함수 호출:
큰 이미지를 표시하기 위해 썸네일을 클릭하면 썸네일 URL은 큰 이미지 URL의 접미사 앞에 s:
$(함수() {
$("#PicList img").click(function() {
tb_show("",this.src.substring(0,this.src.length-5) '.jpg',false);
});});
또한, 다른 이벤트를 사용하고 싶다면 클릭을 Thickbox를 트리거하려는 이벤트로 변경할 수도 있습니다.
THICKBOX는 다음 브라우저를 지원합니다:
Windows IE 6.0, Windows IE 7, Windows FF 2.0.0.6, Windows Opera 9.0, Macintosh Safari 2.0.4, Macintosh FF 2.0.0.6, Macintosh Opera 9.10... 하지만 제 경험에 따르면 IE6에는 여전히 문제가 있습니다!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
