thickbox에 대해 이야기하는 모든 사람은 이것이 jQuery용 플러그인이라는 것을 알고 있을 것입니다. 그 기능은 사용자 경험을 더 즐겁게 만들기 위해 대화 상자와 웹 페이지를 표시하는 것입니다. 아직 Thickbox에 대해 잘 모르기 때문에 오늘은 이에 대해 이야기해보겠습니다. Jquery 팝업 레이어 ThickBox 플러그인 사용법에 대해 자세히 설명하겠습니다!
준비: 세 가지 파일이 필요합니다: Thickbox.js, Thickbox.css, jquery.js. 이 파일은 인터넷 어디에서나 다운로드할 수 있습니다.
특정 용도:
1단계: 이 세 파일을 디렉터리에 추가합니다. 사용하려는 Thickbox 페이지
코드는 다음과 같습니다.
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="thickbox.js"></script> <link rel="stylesheet" href="thickbox.css" type="text/css" />
2단계: 일반적으로 간단한 사용은 3499910bf9dac5ae3c52d5ede7383485 태그와 버튼에 스타일을 추가하는 것입니다: class=thickbox
Thickbox 함수 호출도 있습니다. tb_init(), tb_show( ); 아래를 참조하세요.
다양한 용도:
1. 사진을 표시하려면 클릭하세요.
<a href="001.jpg" class="thickbox"><img src="001.jpg"/></a>
맞습니다.
2. 버튼이나 링크를 클릭하세요.
코드는 다음과 같습니다.
<input alt="#TB_inline?height=300&width=400&inlineId=p1" title="shawnliu" class="thickbox" type="button" value="Show" /> <a href="#TB_inline?height=155&width=300&inlineId=p2&modal=true" class="thickbox">Show hidden modal content.</a> <p id="p1" style="display:none"> <P> 这是一个非模式对话框。 </P> </p> <p id="p2" style="display:none"> <P> 这是一个模式对话框。 <p style="TEXT-ALIGN: center"><INPUT id="Login" onclick="tb_remove()" type="submit" value=" Ok " /></p> </P> </p>
지침: < a> 두꺼운 상자를 사용하려는 경우 ; 또는 버튼에 "#TB_inline"을 추가합니다. #TB_inline은 팝업 대화 상자를 표시하기 위한 크기 매개변수입니다. 표시하려는 레이블이나 구성 요소는 모드 또는 비모달입니다. 물론 많은 사용자 정의 매개변수를 추가할 수도 있습니다.
3. 일반적으로 프로젝트에서 더 자주 사용되는 페이지는 다음과 같습니다. 동일한 목록 페이지에서 추가 및 편집을 수행할 수 있습니다. 이때 아래와 같이 편집자가 두꺼운 상자 형태로 만들어집니다.
어떻게 할까요? 마찬가지로 추가 링크에 두꺼운 상자 스타일을 추가합니다.
<a href="add.shtml?width=300&height=250" class="thickbox">新增</a>
표시할 페이지(add.shtml)를 준비한 후 표시할 크기를 지정해야 한다는 전제가 있습니다.
편집 방법도 동일합니다. 원본 정보를 먼저 추출한 다음 사용자가 수정하세요:
코드는 동일합니다.
코드는 다음과 같습니다.
<a href="edit.shtml?width=300&height=250&nid=item.nid" class="thickbox">编辑</a>
4 요소의 경우 스타일을 사용하는 대신 다음과 같은 기능을 사용할 수 있습니다. :
코드는 다음과 같습니다.
<p id="PicList"><a href="Pic01.jpg"> <img src="Pic01s.jpg" border="0"/> </a><a href="Pic02.jpg"> <img src="Pic01s.jpg" border="0"/></a> </p> $(function() {tb_init("#PicList a[img]");});
5. ajax를 통해 로드된 페이지의 경우 두꺼운 상자 스타일이 유효하지 않습니다. 해결 방법:
HTML이 AJAX에 로드되고 페이지에 업데이트되는 한 다음 코드를 실행합니다. :
tb_init('.thickbox');
6.사용자 정의 기능 호출:
썸네일을 클릭하면 큰 그림을 표시하고 싶은데, Thumbnail URL은 큰 그림 URL의 접미사 앞에 s:
코드를 추가하면 됩니다. :
<p id="PicList"> <img src="Pic01s.jpg" border="0"/> <img src="Pic01s.jpg" border="0"/></p> $(function() {$("#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에는 여전히 몇 가지 문제가 있습니다!
요약:
이 공부를 통해 많은 친구들이 Jquery 팝업 레이어 ThickBox 플러그인의 사용을 더 잘 이해할 수 있을 것이라고 믿습니다. 귀하의 작업이 도움이 되기를 바랍니다.
관련 권장사항
Jquery ThickBox 플러그인 사용 경험(권장하지 않음)_jquery
JQUERY THICKBOX 팝업 레이어 Plug-in_jquery
위 내용은 Jquery 팝업 레이어 ThickBox 플러그인 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!