Jquery 팝업 레이어 ThickBox 플러그인 사용에 대한 자세한 설명

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단계: 일반적으로 간단한 사용은 태그와 버튼에 스타일을 추가하는 것입니다: class=thickbox
Thickbox 함수 호출도 있습니다. tb_init(), tb_show( ); 아래를 참조하세요.

다양한 용도:

1. 사진을 표시하려면 클릭하세요.

<a href="001.jpg" class="thickbox"><img  src="/static/imghwm/default1.png"  data-src="001.jpg"  class="lazy"  / alt="Jquery 팝업 레이어 ThickBox 플러그인 사용에 대한 자세한 설명" ></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>

지침: 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="/static/imghwm/default1.png"  data-src="Pic01s.jpg"  class="lazy"   border="0"/ alt="Jquery 팝업 레이어 ThickBox 플러그인 사용에 대한 자세한 설명" >
</a><a href="Pic02.jpg">
<img  src="/static/imghwm/default1.png"  data-src="Pic01s.jpg"  class="lazy"   border="0"/ alt="Jquery 팝업 레이어 ThickBox 플러그인 사용에 대한 자세한 설명" ></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="/static/imghwm/default1.png"  data-src="Pic01s.jpg"  class="lazy"   border="0"/ alt="Jquery 팝업 레이어 ThickBox 플러그인 사용에 대한 자세한 설명" >
<img  src="/static/imghwm/default1.png"  data-src="Pic01s.jpg"  class="lazy"   border="0"/ alt="Jquery 팝업 레이어 ThickBox 플러그인 사용에 대한 자세한 설명" ></p>
$(function() {$("#PicList img").click(function() {tb_show("",this.src.substring(0,this.src.length-5)+&#39;.jpg&#39;,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

양식 값을 Thickbox에 전달하는 방법

JQUERY THICKBOX 팝업 레이어 Plug-in_jquery

위 내용은 Jquery 팝업 레이어 ThickBox 플러그인 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!