欢迎您, 来到 宁时修博客.^_^

非常好用jQuery弹出层插件

2016/08/05 宁时修 Jquery,javascript 1591
优秀的弹窗插件,layer!

我们在开发项目中,经常有ajax请求处理操作,不管请求成功或失败,是不是都得有个提示,所以今天我就给大家介绍一个基于Jquery的弹窗插件,layer.js,非常好用,可能是我目前开发用过最好的弹窗插件了。

引入js文件

<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="layer/layer.js"></script>


简单使用案例

$(function(){
        $("#test1").click(function(){
            var _this = $(this);
            //弹框
            layer.alert('加了个图标', {icon: 1},function(index){
                layer.close(index);
            });
            layer.confirm('is not?', {icon: 3, title:'提示'}, function(index){
                //点击确认才能回调
                  layer.close(index);
            });
            // confirm确认提示
            layer.confirm('is not?', function(index){
                //点击确认才能回调
            });   
            
            // 信息提示
            // 1:勾勾 2:叉叉 3:问号 4:锁 5 失败 表情 哭
            // 6 成功 表情 笑脸  哭脸 7:危险信号
            // layer.msg('有表情地提示', {icon: 4}); 
            layer.msg('有表情地提示', {
                icon: 6,
                time: 2000 //2秒关闭(如果不配置,默认是3秒)
                }, function(){
                //成功后 回调
                alert('我要跳转....');
            }); 
            //加载 0-2 不同的样式 默认为0
             layer.load(1);
            layer.load(2, {time: 10*1000}); //又换了种风格,并且设定最长等待10秒 
            //关闭
            layer.close(index); 
            
            //tips层 4个方向 tips:1 上面 其他的好像还没测试成功 默认是在右边
            layer.tips('只想提示地精准些', _this);
             layer.tips('只想提示地精准些', _this,{tips:4});
             
        });
    });

具体项目中运用案例

 $("#ajaxSendAllocation").submit(function(){
   //layer 加载层
   var loadColse = layer.load(2, {time: 5*1000});
   var datas = $("#ajaxSendAllocation").serialize();
   $.post('/Admin/Auth/ajaxSendAllocation',datas,function(data){
      layer.close(loadColse);
      if (data.status) {
            //layer 信息提示层
            layer.msg(data.msg,{icon:6,time:2000},function(){
              window.location.href = data.url;
            });
      } else {
        layer.msg(data.msg,{icon:5,time:2000});
            }
   },'json');
   //阻止表单提交
   return false;
});


详细运用请参考官方

http://layer.layui.com/ 


点赞
说说你的看法

所有评论: (0)