解决layui的使用以及针对select、radio等表单组件不显示的问题


Posted in Javascript onSeptember 05, 2019

layui是国内一款界面比较整洁大方的ui框架,里面封装了很多前端开发常用的组件,通常我们直接复制代码过去就可以实现效果,可以提高我们的开发效率。

解决layui的使用以及针对select、radio等表单组件不显示的问题

使用步骤:

1、下载layui:https://www.layui.com

2、将layui文件夹复制到自己的项目里:

解决layui的使用以及针对select、radio等表单组件不显示的问题

3、在html页面引入相关的css和js:

<link rel="stylesheet" type="text/css" href="/layui/css/layui.css" rel="external nofollow" media="all"> //路径仅供参考
<script type="text/javascript" src="/layui/layui.js"></script> //路径仅供参考

4、我们除了直接复制组件代码过来使用外,也可以参考他们的开发文档,了解更多更详细的使用方法:

相关开发文档:https://www.layui.com/doc

form表单select、radio组件不显示的解决方法:

这里简单的复制了一段框架的form表单代码:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>layui</title>
 <meta name="renderer" content="webkit">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 <link rel="stylesheet" href="layui/css/layui.css" rel="external nofollow" media="all">
</head>
<body >

<form class="layui-form" style="margin:100px auto;width: 400px">
 <div class="layui-form-item">
 <label class="layui-form-label">输入框</label>
 <div class="layui-input-block">
  <input type="text" name="" placeholder="请输入" autocomplete="off" class="layui-input">
 </div>
 </div>
 <div class="layui-form-item">
 <label class="layui-form-label">下拉选择框</label>
 <div class="layui-input-block">
  <select name="interest" lay-filter="aihao">
  <option value="0">写作</option>
  <option value="1">阅读</option>
  </select>
 </div>
 </div>
 <div class="layui-form-item">
 <div class="layui-input-block">
  <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
  <button type="reset" class="layui-btn layui-btn-primary">重置</button>
 </div>
 </div>
</form>
<script src="layui/layui.js" charset="utf-8"></script>
</body>
</html>

但是运行的时候,select下拉框不能正常显示:

解决layui的使用以及针对select、radio等表单组件不显示的问题

这里写出正确的解决方法,大家自行检查自己的代码:

1、在select等组件上记得要加上 lay-filter="***",用于在js中做渲染;

<select name="interest" lay-filter="aihao">

2、对form表单的组件进行渲染:

<script>
 layui.use('form', function(){
 var form = layui.form;
 form.render('select','aihao');
 //各种基于事件的操作,下面会有进一步介绍
 //form.render('组件名','lay-filter名')
 });
</script>

这样,就没有什么问题了:

解决layui的使用以及针对select、radio等表单组件不显示的问题

以上这篇解决layui的使用以及针对select、radio等表单组件不显示的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

png

Javascript 相关文章推荐
js 模拟实现类似c#下的hashtable的简单功能代码
Jan 24 Javascript
一个基于jquery的图片切换效果
Jul 06 Javascript
jWiard 基于JQuery的强大的向导控件介绍
Oct 28 Javascript
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
May 27 Javascript
jqplot通过ajax动态画折线图的方法及思路
Dec 08 Javascript
js控住DOM实现发布微博效果
Aug 30 Javascript
js判断是否是手机页面
Mar 17 Javascript
使用jQuery ajaxupload插件实现无刷新上传文件
Apr 23 jQuery
vue自定义指令实现仅支持输入数字和浮点型的示例
Oct 30 Javascript
vue使用nprogress实现进度条
Dec 09 Javascript
node crawler如何添加promise支持
Feb 01 Javascript
GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析
Jun 15 Javascript
layui的面包屑或者表单不显示的解决方法
Sep 05 #Javascript
JavaScript 截取字符串代码实例
Sep 05 #Javascript
a标签调用js的方法总结
Sep 05 #Javascript
VsCode与Node.js知识点详解
Sep 05 #Javascript
Vue.js如何使用Socket.IO的示例代码
Sep 05 #Javascript
vue路由守卫及路由守卫无限循环问题详析
Sep 05 #Javascript
关于JS解构的5种有趣用法
Sep 05 #Javascript
You might like
PHP编程之高级技巧——利用Mysql函数
2006/10/09 PHP
PHP实现XML与数据格式进行转换类实例
2015/07/29 PHP
PHP下载远程图片并保存到本地方法总结
2016/01/22 PHP
Zend Framework自定义Helper类相关注意事项总结
2016/03/14 PHP
CodeIgniter分页类pagination使用方法示例
2016/03/28 PHP
Yii2.0 Basic代码中路由链接被转义的处理方法
2016/09/21 PHP
PHP实现腾讯与百度坐标转换
2017/08/05 PHP
php探针不显示内存解决方法
2019/09/17 PHP
零基础php编程好学吗
2019/10/11 PHP
javascript实现二分查找法实现代码
2007/11/12 Javascript
分享一个我自己写的ToolTip提示插件(附源码)
2013/01/20 Javascript
javascript获取所有同类checkbox选项(实例代码)
2013/11/07 Javascript
Web前端开发之水印、图片验证码
2016/11/27 Javascript
AngularJS 打开新的标签页实现代码
2017/09/07 Javascript
webpack多页面开发实践
2017/12/18 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
2018/09/27 Javascript
Vue.js项目实战之多语种网站的功能实现(租车)
2019/08/07 Javascript
node使用request请求的方法
2019/12/20 Javascript
vue基于better-scroll实现左右联动滑动页面
2020/06/30 Javascript
[03:30]完美盛典趣味短片 CSGO2019年度名场面
2019/12/07 DOTA
二种python发送邮件实例讲解(python发邮件附件可以使用email模块实现)
2013/12/03 Python
如何解决django配置settings时遇到Could not import settings 'conf.local'
2014/11/18 Python
python实现用户管理系统
2018/01/10 Python
python编程培训 python培训靠谱吗
2018/01/17 Python
利用python开发app实战的方法
2019/07/09 Python
Pytorch之保存读取模型实例
2019/12/30 Python
python图形界面开发之wxPython树控件使用方法详解
2020/02/24 Python
Python 解析库json及jsonpath pickle的实现
2020/08/17 Python
利用python为PostgreSQL的表自动添加分区
2021/01/18 Python
纯CSS实现菜单、导航栏的3D翻转动画效果
2014/04/23 HTML / CSS
给学校的建议书
2014/03/12 职场文书
群众路线专项整治工作情况报告
2014/10/28 职场文书
2015毕业生实习工作总结
2014/12/12 职场文书
闭幕词的写作格式与范文!
2019/06/24 职场文书
Go语言中break label与goto label的区别
2021/04/28 Golang
Django REST framework 限流功能的使用
2021/06/24 Python