How to Use the Jquery pop-up layer plug-in ThickBox, jquerythickbox

How to Use the Jquery pop-up layer plug-in ThickBox, jquerythickbox

Thickbox is a plug-in of jQuery. It is used in pop-up dialog boxes and webpage boxes to make the user experience more pleasant. The following describes several usage methods of thickbox.
Statement: This is only a summary of the individual.
Preparations: You need three files: thickbox.js?thickbox.css and jquery. js, which can be found everywhere on the Internet.

Specific use:

Step 1: introduce these three files to the page where you want to use thickbox

Copy codeThe Code is as follows:
<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"/>

Step 2: Add a style for the <a> label and Button: class = thickbox
You can also call thickbox functions, such as tb_init () and tb_show (). See the following.

Usage:

1. Click Show image:

<A href = "001.jpg" class =" thickbox "> </a>
OK.
2. click the button or link:

Copy codeThe Code is as follows:
<Input alt = "# TB_inline? Height = 300 & width = 400 & inlineId = div1 "title =" shawnliu "class =" thickbox "type =" button "value =" Show "/>
<A href = "# TB_inline? Height = 155 & width = 300 & inlineId = div2 & modal = true "class =" thickbox "> Show hidden modal content. </a>

<Div id = "div1" style = "display: none">
<P>
This is a non-mode dialog box.
</P>
</Div>

<Div id = "div2" style = "display: none">
<P>
This is a mode dialog box.
<P style = "TEXT-ALIGN: center"> <INPUT id = "Login" onclick = "tb_remove () "type =" submit "value =" OK "/> </p>
</P>
</Div>

Note: Add "# TB_inline? Height = 300 & width = 400 & ", # TB_inline is the fixed usage of thickbox, height and width are the size parameters of the displayed dialog box, And inlineId is the label or component you want to display, modal is the choice of mode and non-mode. Of course, you can also choose many custom parameters.
3. generally, the page for loading form is used in the project. For example, you can add and edit form on the same list page. In this case, you can make the adding and editing form into thickbox, for example:

In the same way, add the thickbox style to the link:

<A href = "add.shtml? Width = 300 & height = 250 "class =" thickbox "> added </a>
First, you must set the page (add.shtml) to be displayed, and then specify the size of the page to be displayed.
The same is true for editing: extract the original information and then modify the information:

Same code:

Copy codeThe Code is as follows:
<A href = "edit.shtml? Width = 300 & height = 250 & nid = item. nid "class =" thickbox "> edit </a>

4. You can locate the thickbox element by yourself. You can use functions such:

Copy codeThe Code is as follows:
<Div id = "PicList">
<A href = "Pic01.jpg"> </a>
<A href = "Pic02.jpg"> </a>
</Div>

$ (Function (){
Tb_init ("# PicList a [img]") ;});

5. For pages loaded using ajax, The thickbox style will become invalid. solution:
After loading HTML in AJAX and updating it to the page, run the following code:

Tb_init ('. thickbox ');
6. Custom function call:
For example, if you click scale-down to display a large image, the thumbnail URL only adds s before the suffix of the large image URL:

Copy codeThe Code is as follows:
<Div id = "PicList">


</Div>

$ (Function (){
$ ("# PicList img"). click (function (){
Tb_show ("", this.src.substring(0, this.src.length-5){'.jpg ', false );
});});

In addition, if you want to use other events, you can also change click to the thickbox event you want to trigger.

THICKBOX supports the following browsers:
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 +, and Macintosh Opera 9.10 ...... However, according to my use, IE6 is still a problem!