Small and powerful jquerylayer pop-up window plug-in _ jquery-js tutorial

This article describes how to use the small and powerful jquerylayer pop-up window plug-in and the scope of use. It is very detailed. For more information, see. Go to the official website to download the latest js http://sentsin.com/jquery/layer/
① Reference jquery
② Reference layer. min. js

Events that trigger the bullet layer can be freely bound, such:

$('#id').on('click', function(){   layer.msg('test'); }); 

The following describes the call code of the preceding example:

[Information Box ]:

Layer. alert ('cabbage-level front-end attacker xianxin ', 8); // style 1 layer. msg ('front-end attacker xianxin '); // style 2 // Of course, there are far more than these two styles.

[Query Box ]:

$. Layer ({shade: [0], area: ['auto', 'auto'], dialog: {msg: 'What do you think of front-end development? ', Btns: 2, type: 4, btn: ['https', 'qout'], yes: function () {layer. msg ('importance ', 1, 1) ;}, no: function () {layer. msg ('qout', 1, 13) ;}}); // layer is also available. confirm () quick call

[Page Layer 1]

$.layer({   type: 1,   shade: [0],   area: ['auto', 'auto'],   title: false,   border: [0],   page: {dom : '.layer_notice'} });  

[Page Layer 2]

Var pageii = $. layer ({type: 1, title: false, area: ['auto', 'auto'], border: [0], // remove the default border shade: [0], // remove the closeBtn mask: [0, false], // remove the default close button shift: 'left', // pop up page: {html: 'from the left Animation :'
I am from the left, and I have customized the style.
Close </button>
'}); // Custom close $ (' # pagebtn '). on ('click', function () {layer. close (pageii );});

Iframe Layer 1]

$.layer({   type: 2,   shadeClose: true,   title: false,   closeBtn: [0, false],   shade: [0.8, '#000'],   border: [0],   offset: ['20px',''],   area: ['1000px', ($(window).height() - 50) +'px'],   iframe: {src: 'http://f2e.sentsin.com/chat'} });   

Iframe Layer 2]

Layer. tips (the window is automatically closed in the lower right corner in '5 seconds, and a new iframe', this, {time: 5, maxWidth: 260} is generated); $. layer ({type: 2, closeBtn: false, shadeClose: true, shade: [0.1, '# fff'], border: [0], time: 5, iframe: {src: 'test/guodu.html '}, title: false, area: ['300px', '250px '], shift: 'right-bottom', end: function () {$. layer ({type: 2, title: 'xianxin blog-sentsin.com ', shadeClose: true, maxmin: true, fix: false, area: ['1024px', 500], iframe: {src: 'http: // sentsin.com /'}});}});

[Loading Layer 1]

layer.load(3);  

[Load Layer 2]

Layer. load ('Load with text', 3 );

[Tips Layer 1]

Layer. tips ('tips style is not fixed, you can customize the appearance. ', This, {style: ['background-color: #78BA32; color: # fff',' #78BA32 '], maxWidth: 185, time: 3, closeBtn: [0, true]});

Tips Layer 2]

Layer. tips ('no close button by default ', this, {guide: 1, time: 2 });

[Input/file layer]

// Plain text layer. prompt ({title: 'Your name? '}, Function (name) {alert (name) ;}); // Password text layer. prompt ({title: 'enter any password and confirm ', type: 1}, function (pass) {alert (pass) ;}); // upload the file layer. prompt ({title: 'upload anything at will, and confirm ', type: 2}, function (file) {alert (file) ;}); // multi-line text layer. prompt ({title: 'Whatever you want to write, and confirm ', type: 3}, function (val) {alert (val );});

Tab Layer]

Layer. tab ({area: ['1000px ', '500px'], data: [{title: 'say', content: 'Hi, main'}, {title: 'No topic ', content:' html input supported '}]});

[Album layer]

// Asynchronous request mode. The json format is required. Wait for the document to update. Or you can directly view photos through the request. json var conf ={}; $. getJSON ('ajax address', {}, function (json) {conf. photoJSON = json; // save json so that you can directly read the memory data layer next time. photos ({html: 'Here the custom html is imported, or you do not need to input it (this means that the right area is not output ). The album supports the left and right arrow keys, Esc shutdown ', json: json });});