Chinese demonstration and usage of jQuery boxy pop-up layer plug-in

Use this jQuery plug-in
To use this jQuery plug-in, you need to put $ (selector). boxy (); In document. ready. Replace "selector" with an appropriate selector expression, for example, "a [rel = boxy], form. with-confirmation ". This will add some behavior to the matching element, as shown below:

If the anchor contains # In an href attribute, the content of the DOM element corresponding to the anchor ID is added to the boxy dialog box.
If the content of the href anchor is something else, it tries to use Ajax to load the corresponding content. Ideally, we have the same origin check and delegate cross-origin requests to the framework. This will be shown below.
A confirmation message in the submission mode is displayed.
Other elements will be ignored.

Manually create an instance

It is easy to use boxy in manual mode-you only need to create a new boxy instance and pass some internal content and any additional hash objects. By default, the dialog box is displayed immediately. In the center of the view, you can drag and drop it. All these settings can be overwritten by passing additional objects to the constructor. For more information, see the following constructor options.

The content passed to the constructor can be any valid parameter. The $ () function-DOM element of jQuery is an HTML part or other jQuery object. No matter what you provide, the display attribute is set to block and the name is insertedBoxy-contentIn the dialog box.

The following are representative examples:

• Create a new dialog box, new Boxy ("<p> content ...... </P> ", {title:" dialog box "});.
• You cannot drag a new dialog box. New Boxy ("<p> content ...... </P> ", {title:" dialog box ", draggable: false });.
• Create a new dialog box without the default close button. New Boxy ("<p> content ...... </P> ", {title:" dialog box ", closeable: false });.
• Create dialog box, use absolute to absolutely locate (follow the scroll bar) new Boxy ("<p> content ...... </P> ", {title:" dialog box, fixed: false "});.
• Create dialog box, new Boxy ("<p> content ...... </P> ", {title:" dialog box, modal: true "});.
• Create dialog box, custom behavior new Boxy ("<p> content ...... </P> ", {behaviours: function (r) {$ (r ). hover (function () {detail (this).css ("background-color", "red") ;}, function () {detail (this).css ("background-color ", "white ");});}});.

Modify existing Dialog(Open a dialog box and then click the link event below)

• Let the latest dialog box enlarge the animation-someDialog. tween (400,400 );
• Animation reduced by someDialog. tween (100,100) for the latest dialog box );
• Obtain the title of the latest dialog box-someDialog. getTitle ();.
• Change the title of the latest dialog box-someDialog. setTitle ("New title ");

Note that the title bar (that is, the close button and the slider) only appears when the title is specified. In the future, this behavior may change, so that the title bar will always exist, unless otherwise disabled.

Once you create an instance, you can assign a variable through the provided API, move it, change the size, display and hide-the record is as follows.

Question

Using the Helper Boxy. ask (), Boxy. alert () and Boxy. confirm () may prompt you to select from some options and complete optional callback functions. Click the link containing the demo below and refer to the API documentation for more information.

• Question-Boxy. ask ()-user-defined options, select items to be passed to the callback function
• Pop-up-Boxy. alert ()-callback function is always not called
• Confirmation-Boxy. confirm ()-the callback function is called only when the user selects "OK ".

Copy codeThe Code is as follows:
<Script type = 'text/javascript '>
$ (Function (){
$ ("# Ask"). click (function (){
Boxy. ask ("How do you feel? ", [" Great "," good "," Not good "], function (val ){
Alert ("what you choose:" + val );
}, {Title: "This is a problem ...... "});
Return false;
});
$ ("# Alert"). click (function (){
Boxy. alert ("file not found", null, {title: "prompt message "});
Return false;
});
$ ("# Confirm"). click (function (){
Boxy. confirm ("Please confirm:", function () {alert ("confirmed! ") ;},{ Title:" prompt message "});
Return false;
});
});
</Script>

API(Application Programming Interface)

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 and NoIn order to replace the local window. alert () function provided by the browser, because it does not have the ability to block program execution, when the dialog box is visible.

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 and NoIn order to replace the local window. confirm () function provided by the browser, it is unable to 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. Complete list of constructor options

• Option
• Description
• Default

• Title
• Title displayed on the automatically generated title bar
• Null

• Closeable
• Whether a drive in the close dialog box is to be added to the automatically generated title bar. If the title is not specified, it will not be affected.
• True

• CloseText
• Disable link text in the title bar when available
• "[Close]"

• Draggable
• Whether the dialog box can be dragged through the title bar. The title is not specified.
• True

• Clone
• Elements and event handlers in the internal region should not be copied before replacement.
• False

• Actuator
• The DOM element (excluding jQuery objects) raises this dialog box. The link between the two will be established. The reference of this contact allows the dialog box to be retrieved later in the element obtained by running Boxy. Allow to (element. When the dialog box is uninstalled, the contact is automatically disconnected.
• Null

• Center
• Whether the dialog box is displayed in the center of the screen
• True

• Fixed
• Whether fixed positioning is used (fixed) instead of absolute positioning (absolute). The fixed positioning dialog box is not affected by the browser scroll bar. IE6 does not support fixed positioning, which always shows absolute positioning.
• True

• Show
• Whether to display the dialog box immediately. If it is false, You need to manually call dialog. show () to display the dialog box.
• True

• Modal
• Whether the dialog box is set to modal. When modal, the browser background is "black" to prevent other elements on the page from accepting events.
• False

• X
• X (left) coordinates of the dialog box
• 50

• Y
• Y (top) coordinates of the dialog box
• 50

• UnloadOnHide
• If it is true, the dialog box is hidden and unmounted (for example, deleted from the DOM)
• False

• ClickToFront
• If it is true, clicking any position in the dialog box (only relative to the title bar) will cause it to run to the top.
• False

• Behaviours
• The function is used to apply for custom behaviors in the dialog box. Each time setContent () is called and executed in the context of the Boxy object, a jQuery object containing the content area is accepted as a parameter.
• Function (r ){}

• AfterDrop
• When the dialog box is put down, the callback function is executed in the context of the Boxy object.
• Function (){}

• AfterShow
• When the dialog box is displayed, the callback function is executed in the context of the Boxy object. It can be used to obtain the focus in the form text box.
• Function (){}

• AfterHide
• When the dialog box is hidden, the callback function is executed in the context of the Boxy object.
• Fuuction (){}

• BeforeUnload
• Run the callback function in the context of the Boxy object before uninstalling the dialog box.
• Function (){}

CSS Selector

You can use css to completely customize the appearance of the dialog box. Here is the list of selectors that you may be interested in.

. 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.
Online Demo http://demo.jb51.net/js/2011/jquery-plugin-boxy/page/jQuery-plugin-boxy.html
Package download http://xiazai.jb51.net/201102/yuanma/jquery-plugin-boxy.rar