layer-弹出框

最新推荐文章于 2024-09-14 08:25:16 发布

weixin_33881050

最新推荐文章于 2024-09-14 08:25:16 发布

阅读量96

点赞数

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/u/3463015/blog/1579469

版权

2019独角兽企业重金招聘Python工程师标准>>>

layer是一款近年来备受青睐的web弹层组件，她具备全方位的解决方案，致力于服务各水平段的开发人员，您的页面会轻松地拥有丰富友好的操作体验。layer 兼容了包括 IE6 在内的所有主流浏览器。

官方网址：http://layer.layui.com/

图片在线预览

layer.photos(options) - 相册层

引入需要的js文件

<script type="text/javascript" src="${ctxStatic}/layer/layer.js"></script>

2. 调用layer.photos方法展示图片

layer.photos({
    closeBtn:true,//关闭按钮
    photos:{
    "title": "", //相册标题
    "id": 123, //相册id
    "start": 0, //初始显示的图片序号，默认0
    "data": [   //相册包含的图片，数组格式
        {
            "alt": "图片名",
            "pid": 666, //图片id
            "src": "", //原图地址
            "thumb": "" //缩略图地址 可省略
        },{
        }
    ]
}

});

3.效果

其他

//弹出一个页面层
  $('#test2').on('click', function(){
    layer.open({
      type: 1,
      area: ['600px', '360px'],
      shadeClose: true, //点击遮罩关闭
      content: '\<\div style="padding:20px;">自定义内容\<\/div>'
    });
  });

ifame层

//弹出一个iframe层
  $('#parentIframe').on('click', function(){
    layer.open({
      type: 2,
      title: 'iframe父子操作',
      maxmin: true,
      shadeClose: true, //点击遮罩关闭层
      area : ['800px' , '520px'],
      content: 'test/iframe.html'
    });
  });

传值

//注意：parent 是 JS 自带的全局对象，可用于操作父页面
var index = parent.layer.getFrameIndex(window.name); //获取窗口索引

//给父页面传值
$('#transmit').on('click', function(){
    parent.$('#parentIframe').text('我被改变了');
    parent.layer.tips('Look here', '#parentIframe', {time: 5000});
    parent.layer.close(index);//关闭窗体
});
//关闭iframe
$('#closeIframe').click(function(){
    var val = $('#name').val();
    if(val === ''){
        parent.layer.msg('请填写标记');
        return;
    }
    parent.layer.msg('您将标记 [ ' +val + ' ] 成功传送给了父窗口');
    parent.layer.close(index);
});

转载于:https://my.oschina.net/u/3463015/blog/1579469