Layui 使用 TinyMCE 富文本编辑器
Layui 使用 citypicker 省市区级联选择地址
1.进入 Layui 第三方组件平台下载该拓展组件
2.写一个测试 Demo
代码结构树如下,extend 目录下加入我们刚下载的 citypicker 拓展组件
先记得在 head 内引入 css 和 js 文件
<script src="plugin/layui/extend/city-picker/city-picker.data.js"></script>
<link rel="stylesheet" type="text/css" href="plugin/layui/extend/city-picker/city-picker.css">
再随便写一个 form 表单
<form class="layui-form layui-form-pane">
<div class="layui-form-item layui-col-md8">
<label class="layui-form-label">地址:</label>
<div class="layui-input-block">
<input type="text" autocomplete="on" class="layui-input" id="address" name="city-picker" readonly="readonly" data-toggle="city-picker" placeholder="请选择">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-inline">
<button class="layui-btn" lay-submit lay-filter="citypickerDemo">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
最后加入 js 代码
<script type="text/javascript">
layui.extend({
citypicker:'{/}./plugin/layui/extend/city-picker/city-picker'
}).use(['jquery','citypicker','form'],function(){
var $ = layui.$,
form = layui.form,
citypicker = layui.citypicker;
var cityPicker = new citypicker("#address",{
provincename:"provinceId",
cityname:"cityId",
districtname: "districtId",
level: 'districtId',// 级别
})
});
</script>
3.结果查看及补充
再细化一下 html 之后,我们在浏览器打开该网页,发现虽然可以选择地址了,但是右侧有个空白的地方,应该是哪里出问题
这时我们打开开发者工具看下,发现有个资源未加载成功
我们用元素选择器选择那个空白的地方,可以看到那个位置本来是要加载一个 png,却没有找到
我们可以在网络上找一张 png,放到该 css 同层文件夹内,然后修改 css 内的代码,再重新打开,可以发现显示正常了
关于 citypicker 的具体配置,请参考 layui 第三方组件平台
4.效果演示
当然如果还有什么关于 layui 方面的问题,可以参考我的第一篇文章 Layui 使用 TinyMCE 富文本编辑器
5.源码地址
GitHub地址:https://github.com/1123GY/Layui