1、加载页面时马上加载数据: layui.use('layer', function() { var $ = layui.jquery, layer = layui.layer; layer.ready(function() { layer.msg('很高兴一开场就见到你'); }); }); ready:进行Ajax请求,获取数据 2、数据渲染 <body> <div id="view"></div> </body> //自定义渲染模板 <script id="demo" type="text/html"> <h1>{{ d.title }}</h1> <ul> {{# for(var i = 0, len = d.list.length; i < len; i++){ }} <li> <span>姓名:{{ d.list[i].name }}</span> <span>城市:{{ d.list[i].city }}</span> </li> {{# } }} </ul> </script> //渲染数据 <script> //第三步:渲染模版 var data = { title: '前端攻城师', list: [{ name: '贤心', city: '杭州' }, { name: 'zqdmj', city: '北京' }, { name: '浅浅', city: '杭州' }, { name: 'Dem', city: '北京' }] }; var gettpl = document.getElementById('demo').innerHTML; laytpl(gettpl).render(data, function(html) { document.getElementById('view').innerHTML = html; }); </script> 2. 子页面操作: 1、访问父页面元素值 var parentId=parent.$( "#id" ).val(); //访问父页面元素值
2、访问父页面方法var parentMethodValue=parent.getMethodValue();//访问父页面方法
3、如何关闭弹出的子页面窗口var index = parent.layer.getFrameIndex(window.name); //获取窗口索引 parent.layer.close(index);//关闭弹出的子页面窗口
4、如何从子页面执行刷新父页面操作parent.location.reload(); // 父页面刷新
5.传值 $('#sayHello').click(function () { top.layer.open({ id: "layer_say_hello", type: 2, title: '打招呼', shadeClose: true, shade: 0.8, area: ['500px', '400px'], content: '/Findfriend/Part_SayHello', //iframe的url success: function (layero, index) { var her_uli_id = $("#headico").attr("data-uli-id"); //headico 是 HomeFrame的元素 var her_nickname = $("#nickname").text(); //nickname 是 HomeFrame的元素 // layero.find("iframe") 找到iframe的jquery对象 // layero.find("iframe")[0] 将jqeruy对象转化为Dom对象 // contentWindow 获取当前 iframe 的 内容 window对象(Dom对象) //.send-hello 是 LayerFrame 的元素 var jquerySendHelloButton = $(".send-hello", layero.find("iframe")[0].contentWindow.document); jquerySendHelloButton.attr("data-her-uli-id", her_uli_id); jquerySendHelloButton.attr("data-her-nick-name", her_nickname); } }); })