LayUI

* 基本使用

1、引入文件

　　见layui弹出层组件

　　- layer.css、layer.js  而不是layui.css,layui.js

　　- layer.css包括其他的文件应该放在Scripts/theme/default文件夹下，否则会报错

2、Demo使用

                layer.confirm('请选择要处理的对象！', { btn: ['确定', '取消'], offeset: ['280px'], scrollbar: false, title: '提示' }, function (index) {
                    $.ajax({
                        url: "../DB/SaveBatch",
                        data: { ids: ids },
                        type: 'post',
                        success: function (rs) {
                            if (rs == 1) {
                                layer.msg('处理成功');
                            } else {
                                layer.msg('处理失败');
                            }
                           
                        }
                    });
                    layer.close(index);
                })

 layer.open 使用：

 function LayerOpen() {
             var param = "id=dkjf";  //这里是键值对的新式，否则无法取值
            layer.open({
                type: 2,
                offset: "20%",
                title: "layer.open测试",
                area: ['330px', '350px'], 
               // skin: 'layui-layer-rim', //加上边框
                shadeClose: true,
                content: ['@Url.Action("LayerOpen","DB")?' + param ,'no']  //不使用滚动条
            });
        }

        //这里不加[HttpPost]
        public ActionResult LayerOpen(string id)
        {
            //这三种方式都能获取值
            var k1 = Request.QueryString["id"];
            var k3 = HttpContext.Request.QueryString["id"];
            ViewBag.param = id;
            return View();
        }

3、iframe

-- layer.open（）实质是用<iframe>去封装的，每一个iframe都是一个独立的窗体，有它自己的window属性；

-- window.name，获得当前窗体的名称；

-- parent.layer.getFrameIndex(window.name) , 获得当前窗体的index；

* 例子

1、layer.open()

       //layer弹出层
       layer.open({
            //0信息框，默认；1页面层；2iframe层；3加载层；4tips层
            type:2,

            //自定义皮肤
            skin:'layer-class',

            //可以自定义样式，不需要可以改为false
            title:['测试','color:red;'],

            //默认auto,指定大小宽，高
            area:['500px','300px'],

            //默认auto，垂直水平居中; ['','']代表top,left坐标； t\r\b\l\rt\rb\lb\lt; offset['100px','50px']; offset:'20%'
            offset:['rb'],

            //图标
            icon:1,

            //遮罩,默认弹出层外区域是0.3透明度的黑色背景（‘#000’），不想遮罩shade:0,定义其他颜色shade:[0.8, '#393D49']
            shade:0,

           //是否点击遮罩关闭。默认为false，当遮罩存在shade!=0的时候，点击弹层外区域可以关闭弹出层
            shadeClose: true,

           //自动关闭所需毫秒，默认0不会自动关闭；time：5000,5秒后自动关闭；这里是毫秒数
            time:0,

           //控制弹层唯一标识, string类型，默认"", 设置后，不管什么类型的层，都只允许同时弹出一个
           id : "1",

           //默认false，最大最小化按钮
           //maxmin:true,

           //固定,鼠标滚动时，弹层是否固定在可视区域
           fixed: true,

           //在弹出层右下角拖动来拉伸尺寸
           resize: true,

           //是否允许浏览器出现滚动条,默认为true
           scrollbar: true,

           //只有area:'auto'时才有效，同理maxHeight
           maxWidth: 1000,

           move:'.mine-move',

            //可以为string/dom/array；如果是页iframe层，这里需要的是URL,不出现滚动条 content:['http://www.baidu.com', 'no']
            content:['test1.html', 'no']   //content: "@Url.Action("...")"
        });

2、layer.msg()

        layer.msg("你好");

        //第三个参数，关闭后的回调方法
        layer.msg("你好",{icon:1, time:1000}, function(){
            layer.alert("我是关闭后要做的事");
        });

 

3、layer.tips()

        //tips方向1-4代表上右下左
        layer.tips("你好","#btn1",{area:['auto'], time:1000, tips:['2', '#3eb7ed']});

 

4、layer.confirm()

 

        layer.confirm(msg, { btn: ['确定', '取消'], offset: ['280px'], scrollbar: false, icon: 1, title: '提示' },
            //确定的回调方法
            function (index) {
                $.Ajax({
                    url: url,
                    data: { id: ids }
                }, function (result) {
                    if (!result.Success) {
                        layer.alert("操作失败!");
                        return;
                    } else {
                        layer.msg("操作成功！");
                    }
                    callurl();
                });
                layer.close(index);  //关闭页面
            },
            //取消的回调方法
            function (index) {
                layer.close(index);
            }
        );