thinkPHP框架中layer.js的封装与使用方法示例

下面是 "thinkPHP框架中layer.js的封装与使用方法示例" 的攻略：

1. layer.js的引入和初始化

1.1 引入layer.js

在HTML页面中通过script标签引入layer.js文件，代码示例如下：

<script src="/path/to/layer.js"></script>

1.2 初始化layer.js

在初始化layer.js之前需要先引入jQuery库，jQuery是layer.js的依赖库之一。代码示例如下：

<script src="/path/to/jquery.js"></script>
<script src="/path/to/layer.js"></script>

layer.js的初始化代码如下：

layer.config({
    extend: [
        'skin/cms/style.css' //加载自定义皮肤
    ]
});

2. layer.js的基本使用

2.1 弹窗提示

弹出提示框，显示一段文本信息。示例代码如下：

layer.alert('文本信息');

2.2 确认框

弹出提示框，提供确认操作。示例代码如下：

layer.confirm('您确定要执行该操作吗？', function(){
  // 确认操作的代码
}, function(){
  //取消操作的代码
});

3. thinkPHP框架中layer.js的封装

3.1 控制器中的封装

在应用的控制器、模型或者函数库中封装layer的方法，下面是示例代码：

namespace app\admin\controller;

use think\Controller;

class Base extends Controller
{
    public function _initialize()
    {
        parent::_initialize();
        //layer的封装方法
        $this->assign('layer', $this->layer());
    }

    private function layer()
    {
        return [
            'alert'     => new \think\view\driver\ThinkLayer,
            'msg'       => new \think\view\driver\ThinkLayer,
            'confirm'   => new \think\view\driver\ThinkLayer,
        ];
    }
}

上面的代码是在应用的控制器中引用layer.js，并且对其进行了封装。具体来说就是创建了一个私有方法layer()，返回一个数组，该数组包含了alert、msg和confirm方法。这个方法的作用是将layer.js的一些常用功能用一个方法封装起来，在需要使用的地方直接调用即可。

3.2 视图中的调用

在视图中使用layer的封装方法，下面是示例代码：

<button onclick="{layer.confirm('您确定要执行该操作吗？', function(){ /* 确认操作的代码 */ }, function(){ /* 取消操作的代码 */ });}"></button>

上面的代码中onclick事件调用了Base控制器中的封装方法中的confirm方法，该方法调用layer.js中的确认框。

阅读剩余 51%