Layuiopen：簡介與使用指南

一、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的前端應用。