tp5中使用layer的使用

admin
2021-05-04
64

tp5

thinkphp5

layer

1.首先下载代码

https://layer.layui.com/


2.使用并引入相关代码(这里结合数据添加使用)

{extend name="public/index"}

{block name="mains"}

<link rel="stylesheet" type="text/css" href="__STATIC__/admin/layer/mobile/need/layer.css"/>

<div class="mains">

<ol class="breadcrumb">

<li><a href="#">文章管理</a></li>

<li class="active">添加文章</li>

</ol>

<form method="post" action="{:url('article/insert')}" enctype="multipart/form-data">

<div class="form-group">

<label for="title">标题</label>

<input type="text" name="title" class="form-control" id="title" placeholder="请输入标题">

</div>

<div class="form-group">

<label for="subtitle">副标题</label>

<input type="text" name="subtitle" class="form-control" id="subtitle" placeholder="请输入副标题">

</div>

<div class="form-group">

<label for="browse">浏览次数</label>

<input type="text" name="browse" class="form-control" id="browse" placeholder="请输入浏览次数">

</div>

<div class="form-group">

<label for="fabulous">点赞</label>

<input type="text" name="fabulous" class="form-control" id="fabulous" placeholder="请输入点赞">

</div>

<div class="form-group">

<label for="label">标签(不同标签用;分割)</label>

<input type="text" name="label" class="form-control" id="label" placeholder="请输入标签">

</div>

<div class="form-group">

<label for="c_id">分类</label>

<select name="c_id" class="form-control">

{volist name="list" id="dat" key="key"}

<option {$dat.pid==0?"disabled":""} value="{$dat.id}">{$dat.sign}{$dat.name}</option>

{/volist}

</select>

</div>

<div class="form-group">

<label for="status">状态</label> <br>

<label class="radio-inline">

<input type="radio" name="status" id="inlineRadio1" value="1" checked> 正常

</label>

<label class="radio-inline">

<input type="radio" name="status" id="inlineRadio2" value="0"> 禁止

</label>

</div>

<div class="form-group">

<label>文章内容</label><br>

<textarea rows="" cols="" name="count" id="count" style="display: none;"></textarea>

<script id="container" name="count" type="text/plain">

</script>

</div>


<button type="submit" onclick="return getstring()" class="btn btn-default">提交</button>

</form>

</div>

<!-- 配置文件 -->

<script type="text/javascript" src="__STATIC__/admin/ueditor/ueditor.config.js"></script>

<!-- 编辑器源码文件 -->

<script type="text/javascript" src="__STATIC__/admin/ueditor/ueditor.all.js"></script>

<script src="__STATIC__/admin/layer/layer.js"></script>

<script>

var ue = UE.getEditor('container');

function getstring() {

document.getElementById('count').value = UE.getEditor('container').getContent();

if ($('#title').val() == '') {

layer.msg('请先填写标题', {

icon: 0

});

$('#title').focus();

return false;

}

if ($('#subtitle').val() == '') {

layer.msg('请先填写副标题', {

icon: 0

});

$('#subtitle').focus();

return false;

}

if ($('#label').val() == '') {

layer.msg('请先填写标签', {

icon: 0

});

$('#label').focus();

return false;

}

if ($('#count').val() == '') {

layer.msg('请先填写文章', {

icon: 0

});

$('#count').focus();

return false;

}

}

</script>

{/block}