码迷,mamicode.com
首页 > 其他好文 > 详细

layer

时间:2016-07-06 18:00:03      阅读:176      评论:0      收藏:0      [点我收藏+]

标签:

一款实用的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透明度 白色背景  底层显示透明度 
    });
});

 

layer

标签:

原文地址:http://www.cnblogs.com/zc123/p/5647366.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!