一、Layuiopen传参
Layuiopen是Layui框架中的一个常用组件，可以实现在当前页面打开一个新的页面（窗口），并传递参数。此处我们以一个简单的例子来说明如何实现传参功能。首先，在带有layuiopen属性的HTML元素中通过data参数定义所需传递的参数：
<a onclick="layuiopen({title: '传参示例', url: 'test.html', data:{id:1,name:'张三'}})">打开窗口</a>
定义好需要传递的参数后，在新窗口的页面中即可通过layer.js中的data属性获取到传递的参数：
layui.use('layer', function () {
var layer = layui.layer;
var id = layer.data.id;
var name = layer.data.name;
//do something
});
通过上述代码，我们可以在打开的新窗口中获取到传递过来的id和name参数，进行相应的操作。
二、Layuiopen打开新页面
在Layui框架中，Layuiopen组件可以非常方便地打开一个新页面，只需要在带有layuiopen属性的HTML元素中定义新页面的标题与URL即可：
<a onclick="layuiopen({title: '新页面示例', url: 'test.html'})">打开窗口</a>
几乎所有的系统都需要在新开一个页面时，修改左侧导航栏的选中状态。下面的代码表示，位于“nav”层级的页面链接中，可以通过lay-filter属性来动态设置选中态：
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;">新页面演示</a>
<dl class="layui-nav-child">
<dd><a onclick="layuiopen({title:'页面一',url:'page1.html'})" href="javascript:;">页面一</a></dd>
<dd><a onclick="layuiopen({title:'页面二',url:'page2.html'})" href="javascript:;">页面二</a></dd>
</dl>
</li>
</ul>
以上代码中，lay-filter属性值为“test”，通过以下代码即可动态选择页面选中状态：
$('.layui-nav-tree').find('a').each(function(){
if ($(this).attr('href') === url) {
$(this).parent().addClass('layui-nav-itemed').siblings().removeClass('layui-nav-itemed');
return false;
}
});
三、Layuiopen传参数打开新页面
前面提到了如何使用Layuiopen传递参数，这里再补充一下如何使用参数打开新页面。在前面传参的例子中，只需要将需要传递的参数以data属性的方式传递即可。
<a onclick="layuiopen({title: '新页面示例', url: 'test.html', data:{id:'123'}})">打开窗口</a>
而在新页面中，可以使用layer.js的data属性获取到传递的参数：
layui.use('layer', function () {
var layer = layui.layer;
var id = layer.data.id;
//do something
});
而在新页面中，也可以传递参数打开一个新的页面，只需要在打开新页面的代码中传递所需参数即可：
<a onclick="layuiopen({title: '新页面示例', url: 'test.html', data:{id:'123'}})">打开窗口</a>
在新页面中，即可通过以下方式获取到传递的参数：
layui.use('layer', function () {
var layer = layui.layer;
var id = layer.data.id;
layuiopen({title: '新页面示例2', url: 'test2.html', data:{id:id}});
});
以上即为Layuiopen的三个常用功能介绍，结合其它Layui组件使用，可以快速构建出基于Layui的前端应用。
原创文章，作者：VQIN，如若转载，请注明出处：https://www.506064.com/n/133443.html
微信扫一扫 
支付宝扫一扫 