独角兽企业重金招聘Python工程师标准>>>
layer是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验。layer兼容了包括 IE6 在内的所有主流浏览器。
官方网址:/
图片在线预览
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);});