Small and powerful jquery layer Pinball layer plug-in _jquery

First go to the official website to download the latest JS http://sentsin.com/jquery/layer/
① reference jquery
② Reference Layer.min.js

The event that triggers the projectile layer is free to bind, such as:

$ (' #id '). On (' click ', Function () { 
  layer.msg (' test '); 
}); 

The following is a major example of the calling code:

"Info box":

Layer.alert (' Chinese cabbage level front siege Shi Xian Heart ', 8); Style a 
layer.msg (' Front siege Shi Xian Heart ');//Style two// 
of course, much more than these two styles. 
 

"Query Box":

$.layer ({ 
  shade: [0], area 
  : [' Auto ', ' Auto '], 
  dialog: { 
    msg: ' How do you view front-end development? ', 
    btns:2,           
    type:4, 
    btn: [' important ', ' exotic flower '], 
    yes:function () { 
      layer.msg (' Important ', 1, 1); 
    }, No: function () { 
      layer.msg (' Exotic flower ', 1;}} 
    } 
); 
You can also use Layer.confirm () shortcut calls 
 

"Page Layer One"

$.layer ({ 
  type:1, 
  shade: [0], area 
  : [' Auto ', ' Auto '], 
  Title:false, 
  border: [0], 
  page: {dom: '. Layer_notice '} 
}); 
 

"Page Layer Two"

var Pageii = $.layer ({ 
  type:1, 
  title:false, area 
  : [' Auto ', ' Auto '], 
  border: [0],///remove default border 
  Shade: [0],///Remove Mask 
  closebtn: [0, FALSE],///Remove the default Close button 
  Shift: ' Left ',//Eject page from animation: 
  { 
    html: ' <div Style= "width:420px; height:260px; padding:20px; border:1px solid #ccc; Background-color: #eee; " ><p> I come from the left, I have my own style. </p><button id= "pagebtn" class= "Btns" "onclick=" "> Close </button></div> ' 
  } 
}"; 
Set off 
$ (' #pagebtn '). On (' click ', Function () { 
  layer.close (PAGEII); 
}); 
 

"IFRAME Layer One"

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

"IFRAME Layer Two"

Layer.tips (' 5 seconds after the lower right corner window automatically closes and generates a new IFrame ', this, { 
  time:5, 
  maxwidth:260 
}); 
$.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: ' Yin Xin Blog-sentsin.com ', 
      Shadeclose:true, 
      maxmin:true, 
      fix:false, area  
      : [' 1024px ', +],            
      iframe: { 
        src: ' http:// sentsin.com/' 
      }  
    }); 
 
 

"Load Layer One"

Layer.load (3); 
 

"Load Layer Two"

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

"Tips Layer One"

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 Two"

Layer.tips (' Default no Close button ', 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 (); 
}); 
File Upload 
layer.prompt ({title: ' casually upload dongdong, and confirm ', type:2}, function (file) { 
  alert (file); 
}); 
Multiline text 
layer.prompt ({title: ' Write something casually, and confirm ', type:3}, function (val) { 
  alert (val); 
}); 
 

"TAB Layer"

Layer.tab ({area 
  : [' 1000px ', ' 500px '], 
  data: [ 
    {title: ' Say ', content: ' Hi,main '}, 
    {title: ' Untitled ', Content: ' Support HTML incoming '}           
  ] 
}; 
 

"Album layer"

Here for the asynchronous request mode, the specific JSON format, please wait for the document to update. Or you can see Photos.json 
var conf = {} directly by request 
; $.getjson (' Ajax address ', {}, Function (JSON) { 
  Conf.photojson = JSON;//save JSON for next direct read of memory data 
  Layer.photos ({ 
    HTML: ' Pass in the custom HTML here, also can not be passed in (this means will not output the right area). Photo Album support left and RIGHT ARROW keys, ESC off ', 
    Json:json 
  } ';