标签:
一款实用的web提示框架!下面是实用这款框架的实例
html代码
<p class=‘layer_notice‘>我们是否是好惹的</p> <input type="button" value=‘弹框‘ class="alert" /> <br/> <input type="button" value=‘提示层‘ class="tips" /> <br/> <input type="button" value=‘捕获页‘ class="catch" /> <br/> <input type="button" value=‘页面层‘ class="page" /> <br/> <input type="button" value=‘自定义‘ class="self" /> <br/> <input type="button" value=‘tips‘ class="tp" /> <br/> <input type="button" value=‘iframe‘ class="iframe" /> <br/> <input type="button" value=‘load‘ class="load" />
javascript
//第三方扩展皮肤 $(‘#alert‘).click(function(){ layer.alert(‘内容‘, { icon: 1, //小图标默认八种 skin: ‘layer-ext-moon‘ //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则,去这里查阅 layer-ext-seaning // skin: ‘layer-ext-seaning‘ //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则,去这里查阅 }); }); $(‘.tips‘).click(function(){ //提示层 layer.msg(‘玩命提示中‘); }); $(‘.catch‘).click(function(){ //捕获页 layer.open({ type: 1, shade: true, //遮罩层黑色 title: false, //显示标题 content: $(‘.layer_notice‘), //捕获的元素 cancel: function(index){ //取消时触发 layer.close(index); layer.msg(‘大哥我错了,再也不敢了‘, {time: 2000, icon:6}); lay } }); }); $(‘.page‘).click(function(){ //页面层 layer.open({ type: 1, skin: ‘layui-layer-rim‘, //加上边框 area: [‘420px‘, ‘240px‘], //宽高 content: $(‘.layer_notice‘) //直接添加对象即可获得值 }); }); $(‘.self‘).click(function(){ //自定页 layer.open({ type: 1, skin: ‘layui-layer-demo‘, //样式类名 area: [‘420px‘, ‘240px‘], //宽高 closeBtn: 1, //0关闭按钮 1显示按钮 shift: 0, shadeClose: true, //开启遮罩关闭 content: $(‘.layer_notice‘) }); }); $(‘.tp‘).click(function(){ //tips层 layer.tips(‘只想提示地精准些‘, ‘.tp‘,{ //第二个参数为对象 tips:2 //方向 智能方向选择 默认右侧 }); }); $(‘.iframe‘).click(function(){ //iframe窗 layer.open({ type: 2, title: false, closeBtn: 0, //不显示关闭按钮 shade: [0], area: [‘340px‘, ‘215px‘], offset: [‘100px‘, ‘200px‘], //右下角弹出 rb 坐标 time: 6000, //2秒后自动关闭 shift: 2, content: ‘http://device.test.com/‘ , //iframe的url,no代表不显示滚动条 end: function(){ layer.open({ type: 2, title: ‘很多时候,我们想最大化看,比如像这个页面。‘, //最后页面显示的title shadeClose: true, shade: false, maxmin: true, //开启最大化最小化按钮 area: [‘200px‘, ‘200px‘], content: ‘http://www.baidu.com/‘ //最后跳转的页面 }); } }); }); $(‘.load‘).click(function(){ //loading层 var index = layer.load(5, { shade: [0.1,‘#fff‘] //0.1透明度 白色背景 底层显示透明度 }); });
标签:
原文地址:http://www.cnblogs.com/zc123/p/5647366.html