Js pop-up layer 1: JQuery. Boxy (2)

4.1 manually create an instance
Copy codeThe Code is as follows:
<Script type = "text/javascript">
$ (Function (){
$ ("# A1"). click (function (){
// Instantiate a Boxy object
Var box1 = new Boxy (",
{
Title: "title", // the title of the dialog box
Modal: false, // whether the window is a mode window
AfterHide: function (e) {alert ("dialog hide") ;}, // callback function for hiding
AfterShow: function (e) {alert ("dialog show") ;}, // callback function for display
CloseText: "X", // Title Text of the disabled button
Draggable: true // whether to drag
});
Box1.resize (300,100); // set the dialog box size
});
});
</Script> <p>
<A href = "#" id = "a1"> 4.1. Create an instance manually. </a>
</P>


The test shows that if modal is set to true, the mode window is used, that is, when the background is masked, draggable: true dragging is invalid.

5.1 Common Dialog Box-Question Box
Copy codeThe Code is as follows:
// Question Box
$ ("# A2"). click (function (){
Boxy. ask ("What is the most beautiful part of Fengjie? ", // Problem
["Skin", "Mouth", "Knowledgeable"], // optional buttons
Function (val) {alert (val)}, // callback Method
{Title: "test", modal: false} // boxy attribute settings
);
}); <P>
<A href = "#" id = "a2"> 5.1. The question box is displayed. </a>
</P>

Boxy. the four parameters of the ask (question, answers, callback, options) method are question, which indicates a question. The items selected by answers are arrays, and callback indicates a callback method; options is the attribute object in the boxy pop-up box. For details, see 4.1.

5.2 Common Dialog Box-warning box
Copy codeThe Code is as follows:
// Warning box
$ ("# A3"). click (function (){
Boxy. alert ("this is a warning message", // prompt message
Function (val) {alert (val) ;}, // callback Method
{Title: "prompt"}); // boxy attribute
}); <P>
<A href = "#" id = "a3"> 5.2. Warning box </a>
</P>

The three parameters of the Boxy. alert (message, callback, options) method message indicates the warning information. callback indicates the callback method. options is the attribute object in the boxy pop-up box, see 4.1.

5.3 Common Dialog Box-confirmation box
Copy codeThe Code is as follows:
// Confirmation box
$ ("# A4"). click (function (){
Boxy. confirm ("are you sure you want to see the photo of Fengjie? ", // Confirm the prompt message
Function () {alert ("fooled")}, // callback information after clicking OK
{Title: "test", modal: false}); // boxy attribute settings
}); <P>
<A href = "#" id = "a4"> 5.3. confirmation box </a>
</P>

Boxy. the message Parameter of the confirm (message, callback, options) method indicates the confirmation prompt. The callback method is the callback method and will be executed only when you click OK; options is the attribute object in the boxy pop-up box. For details, see 4.1. 6. API Parameters

Method:
Boxy. load (url, options)
Load the content in a URL and display it in the Boxy dialog box. The following option parameters are supported:
• Type-HTTP method. The default value is GET.
• Cache-if it is true, the cached content is continuously called. It is equivalent to the Ajax method that the cache option is passed to jQuery. Default Value: false.
• Filter-jQuery expression, used to filter remote content.
(Any other specified options will be passed to the boxy constructor)

Boxy. get (element)
Returns an instance containing elements, for example, <a href = "#" onclick = "Boxy. get (this). hide ();"> close dialog box </a>

Boxy. ask (question, answers, callback, options)
Display mode, that is, the non-closing dialog box allows users to select options. The problem is the information to be displayed to the user. The answer is an array or a series of all possible answers. The callback function will receive the selected answer. Whether this is the required value or the corresponding key depends on whether an array or answer series has been provided. Options is an extra optional setting option passed to the constructor of the dialog box.

Boxy. alert (message, callback, options)
Display Mode. If the dialog box is not closed, a message is displayed to the user.
Note: This method is not provided to replace the local window. alert () function of the browser, because it is unable to prevent program execution and is visible in the dialog box.

Boxy. confirm (message, callback, options)
Display Mode. messages that contain the OK and cancel buttons are not displayed in the close dialog box. The callback is called only when the user selects "OK.
Note: This method is not used to replace the local window. confirm () function provided by the browser, because it cannot prevent program execution when the dialog box is visible.

Boxy. reflect to (ele)
Returns the boxy instance that has connected to the DOM element through the executor constructor option.

Boxy. isModalVisible ()
Returns true. If any Mode dialog box is currently visible, otherwise, false is returned.

New Boxy (element, options)
Constructor; Create a New boxy dialog box. Element is the content of the dialog box. For any valid parameter, the $ () function of jQuery is also valid here. Options is a hash of configuration options. For details, see the following.

EstimateSize ()
Estimate the size of a dialog box that is invisible. If the current dialog box is visible, do not use this method. Use getSize () instead.

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

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

GetPosition ()
Returns the coordinates in the upper left corner of the top-level dialog box in the form of an array of [x, y.

GetCenter ()
Returns the coordinates of the center of the top-level dialog box in the form of an array of [x, y.

GetInner ()
Return the internal area of a jQuery object packaging dialog box-including the title bar in the framework.

GetContent ()
Returns the content area of a jQuery object packaging dialog box-everything in the framework, excluding the title bar.

SetContent (newContent)
The content in the Setting Dialog Box. Any parameter that is valid for $ () is also valid for the newly set content. Accessible.

MoveTo (x, y)
Move the dialog box to the position (x, y) in the upper-left corner, which can be linked.

CenterAt (x, y)
Move the dialog box to the Center Coordinate (x, y.

Center (axis)
Move the dialog box to the center of the field of view. The optional axis parameter can be any center axis in "x" and "y. Accessible.

Resize (w, h, after)
Re-adjust the height of the dialog box to [w, h]. After the callback function is completed, the callback function accepts the Boxy instance as the parameter. Accessible.

Tween (w, h, after)
The animation compensation dialog box is up to [w, h]. After completion, the callback function is executed. The callback function accepts the Boxy instance as a parameter. Accessible.

IsVisible ()
If the current dialog box is visible, true is returned; otherwise, false is returned.

Show ()
The dialog box is displayed and can be linked.

Hide (after)
Hide the dialog box. after is an optional callback function and is executed. Accessible.

Toggle ()
The explicit/hidden attribute of the trigger dialog box. Accessible.

HideAndUnload (after)
Unmount immediately after hiding. Run the after callback function before uninstallation. Accessible.

Unload ()
Delete the dialog box from DOM and cut off its contact with the Execution Agency, if any. Any further action to unmount a dialog box is undefined.

ToTop ()
Move the current dialog box to the top of all other dialogs. Accessible.

GetTitle ()
Return the title of the dialog box in HTML format.

SetTitle (t)
Set the title of the dialog box to t, which can be linked.

Attribute:

 

CSS Selector
. Boxy-wrapper. title-bar
Automatically Generated title bar of div Packaging

. Boxy-wrapper. title-bar h2
Title Bar content

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

. Boxy-wrapper. title-bar. close
By default, the executor of the close dialog box is closed.

. Boxy-inner
Internal area, including title bar

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

. Boxy-wrapper. question
Created through Boxy. ask () and contains question text

. Boxy-wrapper. answers
Created through Boxy. ask () that contains the response button

. Close
The click event of any content of this class will be associated with the close dialog box.

 

The effect of the outer box rounded corner of the selector is implemented using png images. To change the transparency, you can use ps to modify the image. If IE6 is not considered, you can use another common rounded corner method (css style is not required for images ).

Official Website: http://onehackoranother.com/projects/jquery/boxy/
Http://www.zhangxinxu.com/wordpress? P = 318