JQuery layer[page pop-up box]

Source: Internet
Author: User
Tags border color

Common interfaces are as follows:

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 the information frame layer without title bar, Layer.msg (Msgtext, Msgtime, Parme), three parameters, 1.7.0 began to make multiple judgments on the parameters, Msgtext: Information content (text), Msgtime: Automatically turns off waiting seconds (default 2 seconds), if Parme is a number, it will be the icon parameter for MSG, and if Parme is a function, it will be the callback for end after the layer disappears, and if Parme is an object, you can configure {type: Icon type, whether shade:false//is masked, if yes, not configured, Rate: ' Top '//pop-up animation type, specific values see Layer.shift parameter description}
Layer.tips () Re-encapsulation of tips layer, layer.tips (HTML, follow, Parme), three parameters, HTML: Information content (text), follow: Trigger event corresponding selector, Parme is an object containing {time: auto-close required Wait seconds, MaxWidth: Max width, guide: direction, 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 (Parme, LoadIcon) Re-encapsulation of the loading layer, if you want to append some text in the loading, you can: Layer.load (' loading '); If Parme is a number, it means that Parme is the longest waiting seconds required to auto-close (0 o'clock does not close automatically), LoadIcon: Load icon (integer, 0-3 selection) such as: Layer.load (0, 1);
Layer.area (index, options) Used to redefine the width height, coordinates, Z-index, and so on for a specified layer. Index is the indexed layer, options contains {width: ', Height: ', top: ', left: ', ZIndex: '} and other CSS properties. This method is only valid for the page layer (type:1) and the IFRAME layer (TYPE:2); This method is 1.6.0 start new
Layer.index static property for obtaining the last-triggered layer index value
Layer.getchildframe (selector, index) 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. The index parameter is 1.6.0 is new, because multiple IFRAME layers are allowed to be ejected, so you need to use the index index to manipulate the specified layer
Layer.getframeindex (Window.name) Gets the index of the currently-located iframe layer. Only allowed inside the IFRAME page. If you close yourself internally:
var i = Parent.layer.getFrameIndex (window.name);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.closeall () Used to close all layers, which may be used in multi-layer mode
Layer.shift (type, rate) Built-in animations when the layer pops up, used in the success callback. Type: Animated types, available for seven options, upper left (left-top), Top (top), upper right (right-top), lower right (Right-bottom), lower (bottom), lower left (Left-bottom), left (' Ieft ').
Rate: Animation frequency, milliseconds. Such as:
Success:function () {   layer.shift (' Right-bottom ', 400);//Bottom Right corner popup, 400 ms rate}
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 (Index) Used to make the IFRAME layer adaptive. Very practical, if it is within the IFRAME layer, it can be obtained by var index = Layer.getframeindex (window.name), if the parent page, you can call the IFRAME layer return is worthwhile, such as var index = $.layer (); For more details, please refer to the IFRAME parent action shown on the website.
Layer.setmove () This method can be used to re-initialize the drag and drop when the drag element changes.
Layer.zindex Global property for obtaining the maximum z-index value in a layer container
Layer.settop (Layernow) Referencing this method turns on clicking to make the current window top feature, only for use in the success callback, the Layernow parameter is the parameter passed in the success callback function, that is, the current layer container. Type:1/type:2 Multi-window mode may be very useful, when necessary, to configure the ZIndex:layer.zIndex, you can see [strength] One page example: [Page layer] of the infinite layer of the middle
Layer.path A static property that gets the current layer's storage path.
Layer.use (module, callback) Load a module, support loading JS, CSS, when you try to extend a JS module to layer, it will be more tall on it. such as loading a js:layer.use (' Extend/layer.ext.js ', function () {}); Detailed reference Layer.ext.js

The parameters are described as follows:

Key: Value Describe
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
FADEIN:300, (1.7.0 re-added, 1.4.* seems to have), for the fade of the layer, the value is the number of milliseconds
Move: ['. Xubox_title ', true] Drag and drop a layer by dragging and dropping an element of the layer. '. Xubox_title ': Drag-and-drop binding Event element Selector (default = title bar), True: Allow Drag (no: false)
Moveout:false Used to control whether the layer is allowed to be dragged out of the visual window, false: Not allowed, true: Allow
movetype:0 (1.7.0 new) is used to configure the drag type, the default is the hollow block type drag layer, if the value is set to 1, drag the layer directly
Title: ' Information ' Controls the title bar. Do not want to display the title bar, configure Title: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.
bgcolor: ' #fff ' Used to control the background color of the layer, the default white (#fff), such as set transparent, set the null character.
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.
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-15 choices, maybe there's something you like. Set-1 Do not display icon (1.6.0)

msg: Information box content, important parameters

Yes: callback function for Button one

No: callback function for button two

Page: {dom: ' #xulayer ', html: ', URL: ', Ok:function () {}}
Page layer mode private parameters. DOM: the selector (class or ID, recommended with ID, to ensure uniqueness) for the HTML fragment to be popped. HTML: Custom HTML string. Url:ajax request address. Ok,ajax the callback that was executed after the request was completed. It is important to note that the priority is: Html>url>dom, which means that when you configure the non-null value of the HTML, it will take precedence over the elements in the HTML popup, and so on, if you configure HTML or URL, you must also configure the width high value. The HTML parameter is layer-v1.5.1 start new. URLs and OK are 1.6.0 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,isguide:true,style: [' tips ' custom style ', ' Triangle color '}                                  
Tips Tips Layer Private properties.
Msg: Prompt content.
Follow: The selector that corresponds to the triggering event.
Guide: Directions (0: Up, 1: Right, 2: down, 3: left).
Isguide: Whether to display the default triangle. This parameter can be used with MSG to help you customize the triangle icon
[Custom Style example] style: [' Background-color: #FFF8ED; color: #000; border:1px solid #FF9900 ', ' #FF9900 ']].

layer-v1.7.0 started with more perfect support for tips, providing top, right, bottom and left modes to 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.
Moveend:function () {} callback function when the mouse button is dropped when dragging

Instance:

function Opendialogview (title,url,width,height) {    Parent.layer.open ({        2, area          : [width, height],         ' <font style= ' font-size:15px; > ' +title+ ' </font> ',        true,        content:url,        btn: [' off '],         function (index) {}    });     

Results:

JQuery layer[page pop-up box]

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.