layui加载及入门
- 模板页面
以laravel的blade模板为例
在模板中head部分写入如下代码
{{--layui--}}
<link rel="stylesheet" href="{{asset('layui/css/layui.css')}}">
<script src="{{asset('layui/layui.js')}}"></script>
需要注意的是：在模板底部我们需要加入一个yield('layuiJS')，以便于我们在这里实现显示页面的layui js部分代码
<body>
<div class="layui-main">
@yield('content')
</div>
@yield('layuiJS')
</body>
</html>
- 显示页面
@section('content')
<form id="frmTest">
<a href="javascript:" class="layui-btn layui-btn-primary" id="btnTest">测试</a>
</form>
@endsection
@section('layuiJS')
<script>
layui.use(['layer', 'form', 'jquery'], function () {
var layer = layui.layer
, form = layui.form()
, $ = layui.jquery;
$("#btnTest").on('click', function () {
layer.confirm('是否刷新当前页面?', {
btn: ['是', '否']
}, function () {
layer.alert('显示内容', {
skin: 'layui-layer-lan'
, closeBtn: 1 // 是否显示关闭按钮
, anim: 0 // 动画类型
});
}, function () {
});
});
});
</script>
@endsection
网友评论