JS pop-up layer of 1:jquery.boxy (ii) _jquery

4.1. Create instances manually

Copy Code code as follows:

<script type= "Text/javascript" >
$ (function () {
$ ("#a1"). Click (function () {
Instantiate a Boxy object
var box1 = new Boxy (",
{
Title: Titles,//dialog box title
Modal:false,//Is the modal window
Afterhide:function (e) {alert ("dialog Hide");}//Hidden callback function
Aftershow:function (e) {alert ("dialog Show");},//callback function when displayed
Closetext: "X",//Turn off the caption text of the function button
Draggable:true//Whether you can drag
});
Box1.resize (300, 100); To set the size of a dialog box
});
});
</script> <p>
<a href= "#" id= "A1" >4.1, create an instance manually </a>
</p>

The test found that modal is true as the modal window, which means that setting the Draggable:true drag is not valid even when the background is masked.

5.1, the Common dialog box-Question box

Copy Code code as follows:

Question Box
$ ("#a2"). Click (function () {
Boxy.ask ("What's the most beautiful part of Sister Feng?" ",//problem
["Skin", "Small Mouth", "knowledgeable"],//optional button
Function (val) {alert (val)},//callback method
{title: Test, Modal:false}//boxy property settings
);
}); <p>
<a href= "#" id= "A2" >5.1, pop-up question box </a>
</p>

Boxy.ask (question, answers, callback, Options) method of 4 parameters question to ask questions; answers questions select items, generally arrays; callback is a callback method The options is the Property object of the boxy pop-up box, see 4.1.

5.2, the common dialog box-warning box

Copy Code code as follows:

Warning Box
$ ("#a3"). Click (function () {
Boxy.alert ("This is a warning message",//hint information
Function (val) {alert (val);},//callback method
{title: "Prompt"}); Boxy property
}); <p>
<a href= "#" id= "A3" >5.2, Warning box </a>
</p>

The 3 parameter messages of the Boxy.alert (message, Callback, options) method indicate a warning, callback is the callback method, and the options is the Property object of the Boxy pop-up box, see 4.1.

5.3, the common dialog box-confirmation box

Copy Code code as follows:

Confirmation box
$ ("#a4"). Click (function () {
Boxy.confirm ("Are you sure you want to see the picture of Sister Feng?") ",//confirm the prompt information
function () {alert ("fooled")},//Click on the callback information after confirmation
{title: "Test", modal:false}); Boxy property settings
}); <p>
<a href= "#" id= "A4" >5.3, Confirmation box </a>
</p>

The 3 parameter messages of the BOXY.CONFIRM (message, Callback, options) method represent a confirmation prompt, and callback is a callback method that executes only when a click is confirmed; the options is the Property object of the Boxy pop-up box. See 4.1.

6, API parameters

Method:
Boxy.load (URL, options)
Loads the content as a URL and displays it in the form of a boxy dialog box. Some of the following option parameters are supported:
• Type-HTTP method, default to get
• Cache-If true, the cached content continues to call. Equivalent to the Ajax method of caching options passed to jquery. Default: False.
• Filter-jquery expression used to filter remote content.
(Any other specified option will be passed to the boxy constructor)

Boxy.get (Element)
Returns an instance of the containing element, for example: <a href= "#" onclick= "Boxy.get (This). Hide ();" > Close dialog Box </a>

Boxy.ask (question, answers, callback, options)
display mode, which is a closed dialog box, allows the user to select an option. The problem is the information to be displayed to the user. The answer is an array or a sequence of all possible answers. The callback function will receive the selected answer, whether the required value or the corresponding key is provided according to an array or answer sequence. Options is an additional optional setup option passed to the dialog box's constructor.

Boxy.alert (Message, Callback, options)
Display mode, non-closed dialog box to display messages to users.
Note: This method is not intended to replace the browser local Window.alert () function because it does not have the ability to block program execution when the dialog box is visible.

BOXY.CONFIRM (Message, Callback, options)
Display mode, the dialog box does not close the message that contains the OK and Cancel buttons. Callbacks are invoked only when the user chooses OK.
Note: This method is not intended to replace the local window.confirm () function provided by the browser because it does not have the ability to block programs from executing when the dialog box is visible.

Boxy.linkedto (Ele)
Returns a boxy instance of a DOM element that has been connected through the Executor constructor option.

Boxy.ismodalvisible ()
Returns true if any modal dialog box is currently visible, false is returned.

New Boxy (element, options)
Constructor, create a new Boxy dialog box. The element is the content of the dialog box, and any valid argument, the $ () function of jquery is also valid here. Options is a hash of the configuration option, see detailed information below.

Estimatesize ()
Estimate the size of the dialog box when it is not visible. If the current dialog box is visible, do not use this method and use GetSize () instead.

GetSize ()
Returns the size of the dialog box in the form of an array [width, height].

Getcontentsize ()
Returns the size of the dialog box content area. By default, it refers to everything in the dialog box frame, excluding the title bar.

GetPosition ()
Returns the upper-left coordinate of the topmost dialog box as a [x,y] array.

Getcenter ()
Returns the coordinates of the center point of the topmost dialog box in the form of a [x,y] array.

Getinner ()
Returns the inner area of a JQuery Object Wrapper dialog box--all within the frame including the title bar.

GetContent ()
Returns the content area of a JQuery Object Wrapper dialog box-everything within the frame, excluding the title bar.

SetContent (newcontent)
Sets the contents of the dialog box, and any parameters that are valid for $ () are also valid for the new content set. can be linked.

MoveTo (X,y)
Move the dialog box to the upper-left corner (x,y) and link to the position.

Centerat (X,y)
Move the dialog box to the center coordinates (x,y) position.

Center (axis)
Move the dialog box so that it is in the center of the view. Optional parameter axis can be any one of the central axes in "X", "Y". can be linked.

Resize (w,h,after)
Width the dialog box to [W,h], executes the callback function after completion, and the callback function accepts the boxy instance as an argument. can be linked.

Tween (W,h,after)
The Animation Tween dialog box width to [w,h], completes and executes the callback function, and the callback function accepts the boxy instance as an argument. can be linked.

IsVisible ()
Returns True if the current dialog box is visible, otherwise returns false.

Show ()
Displays a dialog box that can be linked.

Hide (after)
Hide the dialog box, after an optional callback function, and execute after completion. can be linked.

Toggle ()
The explicit implicit property of the triggering dialog box. can be linked.

Hideandunload (after)
Perform the uninstall immediately after hiding. Executes the after callback function before uninstalling. can be linked.

Unload ()
Remove the dialog box from the DOM and disconnect its contact with the executing agency, if any. Any further action that occurs when a dialog box has been uninstalled is undefined.

Totop ()
Moves the current dialog box to the top of all other dialog boxes. can be linked.

GetTitle ()
Returns the title of the dialog box as HTML.

Settitle (t)
The Set dialog box has a title of T, which can be linked.

Property:

CSS Selector
. Boxy-wrapper. Title-bar
The automatically generated title bar of the Div wrapper

. boxy-wrapper. Title-bar H2
The contents of the title bar

. Boxy-wrapper. title-bar.dragging
The title bar when dragging

. boxy-wrapper. Title-bar. Close
The default actuator for closing the dialog box

. Boxy-inner
Inner area, including title bar

. boxy-content
The inner area, excluding the title bar. This class will be automatically added to any element passed to the boxy constructor.

. Boxy-wrapper. Question
Created by Boxy.ask (), containing the problem text

. Boxy-wrapper. Answers
A button created by Boxy.ask () that contains an answer

. Close
Click events for any content of this class classes are associated with the Close dialog box.

The marquee effect of the selector is implemented using a PNG picture, and if you want to change the degree of transparency, you can use PS to modify the picture, and if you don't consider IE6, you can use another common fillet method (without the picture using only CSS styles).

Official website: http://onehackoranother.com/projects/jquery/boxy/
Translation: http://www.zhangxinxu.com/wordpress/?p=318