New version of zxxbox jquery pop-up box plug-in without picture

Document directory

• I. Previous instructions
• Ii. Download and demo
• III. Basic usage
• Iv. Use and description of plug-in API Parameters
• 5. Use the plug-in's built-in pop-up window
• Vi. Other APIs of zxxbox
• VII. Supplement: style separation)
• 8. Welcome to exchange, correct errors, and submit bugs.

New version of zxxbox jquery pop-up box plug-in without picture

By zhangxinxu from

Http://www.zhangxinxu.com

Address: http://www.zhangxinxu.com/wordpress? P = 1073

I. Previous instructions

For more information about the plug-in the zxxbox jquery pop-up box in earlier versions, click here. At the beginning, the pop-up box plug-in was purely intended for learning. In addition, it was used to temporarily cope with some pop-up box applications on personal sites. Therefore, it is easy to write, and I don't expect anyone to use it. However, later, some comments from colleagues and related exchanges found that some people still use this light and concise bullet box effect.

However, on the one hand, because of their relatively immature level, the plug-in logic is not well organized. Therefore, the pop-up box plug-in of the previous version can also be used, but the function is indeed effective. You cannot add a callback Method to the built-in pop-up box button, and Ajax loading is not supported, there are also some small concealed bugs, which are also a little inconvenient to call. So these days, I have rewritten the plug-in the previous zxxbox pop-up box. Although the UI interface of the pop-up box is still the same, the internal logic, calls, and parameters are all different. It can be said that they have changed from the underlying core. Therefore, simply put the plug-in update method under the previous article, there will be a strong sense of failure. Therefore, another article will explain the plug-in parameters and usage of the new zxxbox pop-up box in detail, hoping to help peers who need them.

Some shortcomings of Version 2.0, such as not supporting Ajax, weak callback capabilities, no animation, and scalability, have been fixed to varying degrees. Of course, the addition of functions also weakens the advantages of the previous plug-in, such as simple calling and lightweight file. The current file (including update notes and content notes) version is 11.4 kb, 3 to 3 larger than before ~ 4 K. The biggest advantage of this plug-in is that the method call is more professional, which will be embodied later. There is also a non-negligible advantage. Like the previous version, there is no image, and the compatibility is also good. You only need to call a Javascript file.

Ii. Download and demo

Download
You can right click here to download the JS file: jquery. zxxbox.3.0.js-(right click-[target | link] Save)
Click here to download the zip source file (including demow.jquery.zxxbox.v3.zip (16.6 K)

Demo instance page
You can click here: Demo instance page // zxx: welcome-wide * advertising * Support *

III. Basic usage

1. Call the jquery Library and the zxxbox plug-in file with the following code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script><script type="text/javascript" src="http://www.zhangxinxu.com/study/js/jquery.zxxbox.3.0.js"></script>

2. Call the zxxbox () method. The simplest usage is as follows:

$("#test").zxxbox();

Different from the previous version, the zxxbox plug-in of 3.0 + can also be called using the following method:

$.zxxbox($("#test"));

The result is exactly the same as that shown above. It indicates that the element with ID as "test" is loaded into the box and displayed in the center of the page.

Iv. Use and description of plug-in API Parameters

Jquery pop-up box plug-in zxxbox parameter instructions

Title	Description	Default
Title	Title text of the string dialog box	Dialog Box
Shut	Display of the close button in the upper right corner of the string	×
Index	Z-index level in the Value dialog box	2000
Opacity	Transparency of a black translucent background	0.5
Width	The width of the body part of any bullet box. The non-numeric width is automatically obtained after the integer is obtained.	"Auto"
Height	The height of the body part of any dialog box. The height is not calculated automatically after the integer is obtained.	"Auto"
Bar	Whether the Boolean Type displays the title bar. For example, you can use	True
BG	Whether the Boolean Type displays the background layer	True
Btnclose	Boolean whether to display the close button on the title bar	True
Fix	Whether the position of the Boolean pop-up box is fixed and does not scroll with the scroll bar (shaking in IE6)	False
Bgclose	Boolean click whether to close the dialog box on the background layer (if any)	False
Drag	Can the Boolean Type be dragged by clicking the title bar?	False
Ajaxtaga	Boolean if the current element is a tag, whether to enable the built-in Ajax Method	True
Protect	Whether to protect internal loaded elements when the pop-up box is closed. The default value is automatic detection (only simple detection). If you do not want to load elements, you can set the parameter to false. For details, refer to the demo height dynamic change example.	"Auto"
Onshow	Method called when the function dialog box is displayed	$. Noop
Onclose	Method called when the function bullet box is completely closed	$. Noop
Delay	The time when the value pop-up box is timed off. It is triggered by an integer greater than 0, in milliseconds.	0

Some additional instructions:

• The button style in the default dialog box has been expressed in CSS. If you are not satisfied, you can modify the CSS string section of the original Js.
• For the default "Ask" or "remind" dialog box in the previous version, there is a special method call instead of passing the parameter.
• For the "width" and "height" parameters, the default value is "Auto", that is, the size plug-in for loading elements is automatically calculated, including loading elements of external pages through Ajax, in most cases, you do not need to set the size of the bullet box. The parameters here are processed in the parseint 10th notation. That is to say, it is okay to write the parameters as "200px" and "200. If the integer is not a value, or the value is smaller than 0, the plug-in will still be adaptive to high width.
• Generally, the ajaxtaga parameter is not used. This parameter has the following meanings: by default, for example, $ ("A # test "). zxxbox (); the plug-in performs Ajax or direct load processing on the href attribute values in the tag element. The a tag itself is protected, unlike other elements that are directly loaded into the bullet box. However, if we want to use the tag as a normal element to load the dialog box, we need to use the ajaxtaga parameter. The default value of ajaxtaga is true, that is, automatic Ajax processing of the tag, therefore, if we set the value of ajaxtaga to false, the tag will also be used as a div-like element and appended to the pop-up box. This effect is reflected in the demo.
• Onshow and onclose are triggered when the dialog box is opened or completely closed. For details, see the demo instance page.
• For the "delay" parameter, the policy here is: if it is not an integer greater than 0, it is considered that the function of automatic shutdown without latency is not executed; otherwise, the dialog box is automatically closed in milliseconds.

5. Use the plug-in's built-in pop-up window

In this version, zxxbox has four built-in bullet box methods: loading prompt box, ask and remind dialog box (inquiry and Reminder) dialog box, and Ajax loading dialog box. Here, we will first talk about the existing ask and remind dialog boxes in the previous version.

FirstPrompt (remind) dialog boxSimilar to the built-in alert () method in the browser, the call method is as follows:

$.zxxbox.remind(message, callback, options);

$. Zxxbox. the remind () method has three parameters. Among them, only the message of the first parameter is required. It is the content of the prompt, which can be a plain text or an HTML string; the second parameter is the callback function triggered by clicking the OK button. In the callback function, the $ (this) object refers to the jquery object of the "OK" button, this object refers to the DOM object of the "OK" button. Therefore, you can use $ (this ). ATTR ("disabled", "disabled"); if the current button is disabled, clicking this button will hide the pop-up box by default, so you do not need to write any code to hide the pop-up box; the third parameter options is a series of zxxbox parameters that control the display of the bullet box.

ThenAsk dialog box, Similar to the browser's built-in confirm () method, use the following:

$.zxxbox.ask(message, sureCall, cancelCall, options);

Although the ask method is similar to the remind method, you still need to pay attention to the details. Similarly, the message parameter must be a string. Surecall is the method triggered after clicking the "OK" button. Unlike the "OK" button of remind (), the surecall method here does not have any script by default. If no method is written, there is no response after clicking, that is to say, the surecall method is required. However, unlike cancelcall, the pop-up box is closed by default after clicking it. There is nothing to say about options.

Note:: Once the options parameter is called for the ASK () or remind () method, if the callback, surecall, and cancelcall parameters are not used, null placeholder must be used. This placeholder can be seen in the first part of the demo page, which is roughly as follows:

$ ("# Test3 "). click (function () {$. zxxbox. ask ("confirm to change the background color of the page to Sky Blue", function () {$ ("body" ).css ("background-color", "azure"); $. zxxbox. hide () ;}, null, {Title: "tip "});});

Next isLoading prompt dialog box: Its UI is basically fixed, and there is only one options parameter. The title bar is hidden by default. The call method is as follows:

$.zxxbox.loading();

The effects of the above Code are as follows:

It is generally used in Ajax operations. The loading method is used in several built-in Ajax methods of this plug-in.

FinallyAjax loading dialog boxIts use is like a bubble. It looks difficult. It will be very simple after a try.
Usage, methods and parameters:

$.zxxbox.ajax(uri, params, options)；

This Ajax pop-up window (in fact, all Ajax operations in zxxbox) uses the get method. The URI parameter represents the address and must be a non-essential parameter. Params is the passed parameter. If the options parameter is set and Params is empty, use the {} empty object placeholder. Otherwise, a problem may occur. The size of the bullet box is automatically calculated based on the obtained content.

Another type of AJAX is to use its href attribute through the tag. For example:<A href = "# test"> click me </a>If this element is bound to the zxxbox () method, the element with the ID of test is automatically loaded. For example:<A href = "http://image.zhangxinxu.com/image/study/s/s512/mm1.jpg"> attach images </a>If this element is bound to the zxxbox () method, clicking the tag will automatically load the image path http://image.zhangxinxu.com/image/study/s/s512/mm1.jpg:<a
href="test.html"></a>If this element is bound to the zxxbox () method, after clicking the tag, the content on the Static Page of test.html will be automatically loaded. This method supports binding multiple A tags. See the last example of demo.

Vi. Other APIs of zxxbox

As long as the above four API methods are related to the display pop-up window, there are many other pop-up methods in zxxbox.

Among them, I guess it should be the most extensive, and the most important is to close the bullet box method, as shown below:
$. Zxxbox. Hide ();
Close the pop-up window.

Other API methods are as follows:
$. Zxxbox. getsize (O );
Get the height and width of an element. The parameter is a jquery object. An object is returned, {}, and two attribute names are W and H.
$. Zxxbox. setsize ();
Set the size of the bullet box.
$. Zxxbox. setposition (FLAG );
Set the position of the bullet box, usually centered. It contains a parameter flag. If the flag is true, the bullet box is positioned as an animation. The flag parameter is not used in the built-in method. The second example of the base number of the demo instance page uses the flag parameter of this method, so there is a smooth displacement effect of the bullet box.
$. Zxxbox. setfixed ();
The position of the bullet box does not change with the scroll bar. Because IE6 does not support the position: fixed attribute, you can only use the rolling relocation method. Therefore, if you call this method during scrolling, or the fly fix parameter in options is true, and the pop-up box in IE 6 will shake.
$. Zxxbox. bgclickable ();
Click the translucent black background layer to hide it.
$. Zxxbox. bghide ();
The translucent black background layer is hidden.
$. Zxxbox. bgshow ();
A translucent black background layer is displayed.
$. Zxxbox. barhide ();
Hide the title bar.
$. Zxxbox. barshow ();
The title bar is displayed.
$. Zxxbox. closebtnhide ();
Hide the close button on the right of the title bar.
$. Zxxbox. Drag ();
You can drag and drop a dialog box.

Add
$. Zxxbox. loading ();
$. Zxxbox. Ask (message, surecall, cancelcall, options );
$. Zxxbox. Ajax (Uri, Params, options)
$. Zxxbox. Remind (message, callback, options );
Four methods, which are all the application method interfaces of zxxbox.

VII. Supplement: style separation)

The CSS style of the bullet box is integrated into the JS plug-in script, which makes the call very convenient. This can also be said to be the advantage of this plug-in. You only need to call a JS file, no other CSS links or image requests are convenient. However, nothing can be applied to any place. Today, someone suggested that CSS in the script be put forward to facilitate expansion. I had a similar plan before. Just today I was free and it took some time to separate the script from the style.

Different from the above, you need to call another CSS file, and the name of the JS script file has changed. See the following code:
CSS file

<link rel="stylesheet" href="http://www.zhangxinxu.com/study/css/zxxbox.css" type="text/css" />

JS files

<script type="text/javascript" src="http://img3.douban.com/js/packed_jquery.min4.js"></script><script type="text/javascript" src="http://www.zhangxinxu.com/study/js/jquery.zxxbox-nocss.js"></script>

// Zxx: Because Google remains unstable, the link of the jquery library is changed to the Douban address.

The use of the plug-in is still the same as the above. To demonstrate the effect of separation, I made a simple demo. You can click here: zxxbox style separation demo.

8. Welcome to exchange, correct errors, and submit bugs.

The continuous improvement of the zxxbox plug-in has benefited from suggestions and reminders from the majority of peers. Therefore, we hope that you can submit your own ideas, comment on them, or go to a special discussion page.

Although I try my best to imagine every possible situation, after all, I am a person and only a very common person. Therefore, there must be a lot of bugs I have foreseen. Welcome to raise them, thank you very much. A rush of time. If you have any inaccuracy or errors in the text, please correct me.

Original article, reproduced please indicate from Zhang xinxu-xin space-xin Sheng live [http://www.zhangxinxu.com]
Address: http://www.zhangxinxu.com/wordpress? P = 1073