작고 강력한 jquery 레이어 팝업 레이어 Plug-in_jquery

최신 js를 먼저 다운로드하려면 공식 홈페이지로 이동하세요 http://sentsin.com/jquery/layer/
①jquery 인용
②layer.min.js 인용

elastic 레이어를 트리거하는 이벤트는 다음과 같이 자유롭게 바인딩될 수 있습니다.

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

위 예제의 호출 코드는 주로 아래에 게시되어 있습니다.

[정보 상자]:

layer.alert('白菜级别前端攻城师贤心', 8); //风格一 
layer.msg('前端攻城师贤心'); //风格二 
//当然，远远不止这两种风格。 
 

[문의창]:

$.layer({ 
  shade: [0], 
  area: ['auto','auto'], 
  dialog: { 
    msg: '您是如何看待前端开发？', 
    btns: 2,           
    type: 4, 
    btn: ['重要','奇葩'], 
    yes: function(){ 
      layer.msg('重要', 1, 1); 
    }, no: function(){ 
      layer.msg('奇葩', 1, 13); 
    } 
  } 
}); 
//还可用layer.confirm()快捷调用 
 

【페이지 1층】

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

【2층 페이지】

var pageii = $.layer({ 
  type: 1, 
  title: false, 
  area: ['auto', 'auto'], 
  border: [0], //去掉默认边框 
  shade: [0], //去掉遮罩 
  closeBtn: [0, false], //去掉默认关闭按钮 
  shift: 'left', //从左动画弹出 
  page: { 
    html: '<div style="width:420px; height:260px; padding:20px; border:1px solid #ccc; background- color:#eee;"><p>我从左边来，我自定了风 格。</p><button id="pagebtn" class="btns" onclick="">关闭< /button></div>' 
  } 
}); 
//自设关闭 
$('#pagebtn').on('click', function(){ 
  layer.close(pageii); 
}); 
 

【iframe 레이어 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 레이어 2】

layer.tips('5秒后右下角窗口自动关闭，并生成一个新的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: '贤心博客 - sentsin.com', 
      shadeClose: true, 
      maxmin: true, 
      fix : false,  
      area: ['1024px', 500],            
      iframe: { 
        src : 'http://sentsin.com/' 
      }  
    }); 
  } 
}); 
 

【레이어 1 로드 중】

layer.load(3); 
 

【레이어 2 로딩 중】

layer.load('加载带文字', 3); 
 

【팁 1단계】

layer.tips('tips的样式并非是固定的，您可自定义外观。', this, { 
  style: ['background-color:#78BA32; color:#fff', '#78BA32'], 
  maxWidth:185, 
  time: 3, 
  closeBtn:[0, true] 
}); 
 

【팁 레벨 2】

layer.tips('默认没有关闭按钮', this , {guide: 1, time: 2}); 
 

【입력/파일 레이어】

//普通文本 
layer.prompt({title: '您的名字？'}, function(name){ 
  alert(name); 
}); 
//密码文本 
layer.prompt({title: '输入任何口令，并确认',type: 1}, function(pass){ 
  alert(pass); 
}); 
//文件上传 
layer.prompt({title: '随便上传个东东，并确认',type: 2}, function(file){ 
  alert(file); 
}); 
//多行文本 
layer.prompt({title: '随便写点啥，并确认',type: 3}, function(val){ 
  alert(val); 
}); 
 

【탭 레이어】

layer.tab({ 
  area: ['1000px', '500px'], 
  data: [ 
    {title: 'Say', content:'Hi，Main'}, 
    {title: '无题', content:'支持html传入'}           
  ] 
}); 
 

【앨범 레이어】

//此处为异步请求模式，具体的json格式，请等待文档更新。或者你直接通过请求看photos.json 
var conf = {}; 
$.getJSON('ajax地址', {}, function(json){ 
  conf.photoJSON = json; //保存json，以便下次直接读取内存数据 
  layer.photos({ 
    html: '这里传入自定义的html，也可以不用传入（这意味着不会输出右侧区域）。相册支持左右方向键、Esc关闭', 
    json: json 
  }); 
});