Layer Popup Information Box API

Source: Internet
Author: User

The key value of the Layer API (configured only when needed, not configured with default)
Key: Value Describe
skin:0 The skin number of the layer, and the value is the integer type. Currently, only one skin is provided by default, and you can configure this parameter when you add skins according to the style rules (see SKIN/LAYER.CSS).
type:0, The type of the layer. 0: Information box (default), 1: page layer, 2:iframe layer, 3: Load layer, 4:tips layer. This is an important parameter, the total switch for different types of layer types, which must be set when called.
Shade: [0.5, ' #000 ', true] Controls the mask. 0.5: Matte Transparency, ' #000: Matte color, true: Matte (No: false)
Shadeclose:false Used to control whether the click Mask area closes the layer. (yes: true).
Fix:true, Whether the layer is fixed in the viewable area. No: false
Move: ['. Xubox_title ', true] The control layer is dragged and dragged. '. Xubox_title ': Drag-and-drop binding Event element Selector (default = title bar), True: Allow Drag (no: false)
Title: [' message ', true] Controls the title bar. ' Info ': Title bar text, true: whether the title bar is displayed (No: false)
Offset: [' 220px ', ' 50% '] The control layer coordinates. ' 220px ': Ordinate, ' 50% ': horizontal axis. It is important to note that pixels must be in px units, and percentages are not required. The flexible use of this parameter can help you achieve many special effects.
Area: [' 310px ', ' auto '] Control layer width is high. ' 310px ': wide, ' auto ': High. When set to auto, it means adaptive and of course, for width, this is not recommended.
CLOSEBTN: [0, True] The upper-right corner of the control layer closes the button. 0: Off button style (1: Style 2), when the title bar does not exist, automatically switch to style 2. True: Whether the Close button is displayed (No: false)
time:0 Automatically turns off wait seconds, integer values. Maybe it can help you do a lot of things, imagine it.
border: [Ten, 0.3, ' #000 ', true] 10: Border size, 0.3: Border transparency, ' #000: Border color, true: Whether the border is displayed (No: false). With it you can configure the border arbitrarily, such as you feel the border is unsightly, hurriedly enable [0,0, ', false] bar
zindex:19891014 Control layer Stacking Order (Z-INDEX). Integer value, the default is Yin Xin's birthday. Set it up reasonably to avoid the level conflicts with other plugins
maxwidth:400 The maximum width. Integer value. Used when the width is set to auto.
FadeIn: [+, FALSE] The fade of the control layer. 300: Fade Frequency, false: whether to turn on fade (default does not turn on, true: on) always feel that this parameter is the same as a dummy.
Dialog: {    btns:1,    btn: [' OK ', ' Cancel '],    type:3,    msg: ',    yes:function (index) {},    No:functio N (Index) {}}
The information frame layer mode provides the private parameters. When used, configure on demand

Btns: The number of buttons. 0-2 options available

BTN: [Text Value of button one, text value of button two]

Type: Icon types, offers 0-10 choices, maybe there's something you like.

msg: Information box content, important parameters

Yes: callback function for Button one

No: callback function for button two

Page: {dom: ' #xulayer ', HTML: '}
Page layer mode private parameters. DOM: the selector (class or ID, recommended with ID, to ensure uniqueness) for the HTML fragment to be popped. It is important to note that HTML precedence is higher than DOM, which means that when you configure the non-null value of the HTML, it takes precedence over the elements in the HTML, and does not support the adaptive mode of area, you must configure the width high value. The HTML parameter is layer-v1.5.1 start new.
IFrame: {src: ' http://sentsin.com '}
The IFRAME layer mode private parameter. src: the URL to open. The usage rate is very high, especially for students who like to use IFRAME.
Loading: {type:0} The load layer private property. Type:loading icon Type (offers a choice of 0-3, try it and see if there are any you like). Commonly used with Ajax
Tips: {    msg: ',    follow: ', Guide:0,style: [' tips ' custom style ', ' Triangle color '}
Tips Tips Layer Private properties. MSG: Hint content, follow: Trigger event corresponding selector. Guide: Direction (0: Up and down, 1: About). [Custom Style example] style: [' Color: #000; border:1px solid #FF9900 ', ' #FF9900 ']]. layer-v1.5.1 began, the tips gradually have a more comprehensive support, provide up and down and left and right mode, can intelligently identify the direction of guidance.
Success:function (layer) {} callback function after a successful layer popup
Close:function (index) {} The callback function of the Close button in the upper right corner of the layer.
End:function () {} The callback function that is executed after the layer is completely closed. Its presence makes the close callback a cloud.
Layer API in-place method
Method name Describe
$.layer ({}) The core interface, the parameter is an object, the object properties see the list above. Packing methods such as Layer.alert () for $.layer ().
Layer.v Gets the version number.
Layer.ready (callback) The method that is executed after the style file in the layer is loaded is typically used to call layer when the page is loaded, which avoids the confusion caused by the style not being loaded or called. Example:

Layer.ready (function () {layer.msg (' Hello layer ');});
Layer.alert () Re-encapsulation of a single-button message box, Layer.alert (alertmsg, AlertType, Alerttit, Alertyes), four parameters, Alertmsg: Information content (text), AlertType: Hint icon (integer, 0-10 selection), Alerttit: Title (text), Alertyes: callback function for the button. such as: Layer.alert (' Front siege morokata Heart ')
Layer.confirm () Re-encapsulation of the inquiry box, Layer.confirm (conmsg, Conyes, Contit, Conno), four parameters, Conmsg: Message content (text), Conyes: Button callback, Contit: Title (text), Conno: Callback for button two.??????????????????? Such as:

Layer.confirm (' OK delete? ', function () {layer.msg (' Delete succeeded! ‘) });
Layer.msg () Re-encapsulation of information frame layer without title bar, Layer.msg (Msgtext, Msgtime, Msgtype, callback), four parameters, Msgtext: Message content (text), Msgtime: Wait seconds to auto-close (default 2 seconds), Msgtype: Hint icon (integer, 0-10 selection), callback: callback function after auto-destroy. such as: layer.msg (' Hey, man, I'm layer ')
Layer.tips () Re-encapsulation of tips layer, layer.tips (HTML, follow, time, MaxWidth, guide, style), four parameters, HTML: Information content (text), follow: Trigger event corresponding Selector, Time: Automatically turn off waiting seconds, maxWidth: Max width, guide:0 (up/down mode) or 1 (left and right mode) Style:tips style (take the style attribute in API table one) such as:

$ ('. Demo '). Click (function () {layer.tips (' This is the tip ', this);});
Layer.load () Re-encapsulation of the loading layer, layer.load (Loadtime, Loadgif, Loadshade), three parameters, Loadtime: The number of seconds to wait for auto-shutdown (0 o'clock does not close automatically), Loadgif: Load icon (integer, 0-3 selection), Loadshade: Whether the mask is masked (true or false). such as: layer.load (0);
Layer.getchildframe (selector) Gets the DOM in the child IFrame. Very useful, when the parent window is manipulating the contents of the IFRAME, it can show great divinity. such as: Layer.getchildframe (' body '). HTML ()//Get all the HTML elements of the body of the IFRAME
Layer.getframeindex () Gets the index of the IFRAME layer. If you close itself in an IFRAME page:

var i = Parent.layer.getFrameIndex ();p arent.layer.close (i);
Layer.close (Index) Used to manually turn off the layer. The index value of the layer for the parameter. The index is the value returned by the pop-up method. Such as:

var i = $.layer ({}); or var i = Layer.alert (), or the like can also return index layer.close (' I ');
Layer.shift (type, rate) Layer Popup Built-in animation, type: Animation type, for four kinds of choice, left: ' left-top ', upper right: ' right-top ', lower left: ' Left-bottom ', lower right: ' Right-bottom '. Rate: Animation frequency, milliseconds. Such as:

Success:function () {   layer.shift (' Right-bottom ', 400);}
Layer.autoarea (Index) It is used to deal with the change of width and height in the layer, and the re-adaptive layer width is high. Required parameter is the index value of the layer
Layer.iframeauto () Used to make the IFRAME layer adaptive. Very practical, see the official website example of the IFRAME child operation.
Layer.setmove () This method can be used to re-initialize the drag and drop when the drag element changes.

Free Reprint, reproduced Please specify: reproduced from the Web development Note www.chhua.com

This article link address: Layer popup message box API http://www.chhua.com/web-note4188

Layer Popup Information Box API

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.