解决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 相关文章推荐
jquery autocomplete自动完成插件的的使用方法
Aug 07 Javascript
javascript制作sql转换为stringBuffer的小工具
Apr 03 Javascript
浅析Bootstrap组件之面板组件
May 04 Javascript
javascript中使用未定义变量或值的情况分析
Jul 19 Javascript
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
Feb 27 Javascript
深入解析js轮播插件核心代码的实现过程
Apr 14 Javascript
基于node下的http小爬虫的示例代码
Jan 11 Javascript
javascript中函数的写法实例代码详解
Oct 28 Javascript
jquery实现二级导航下拉菜单效果实例
May 14 jQuery
了解JavaScript中的选择器
May 24 Javascript
小程序点击图片实现png转jpg
Oct 22 Javascript
jQuery实现开关灯效果
Aug 02 jQuery
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 header Content-Type类型小结
2011/07/03 PHP
php使用pdo连接并查询sql数据库的方法
2014/12/24 PHP
PHP5.5迭代生成器用法实例详解
2016/03/16 PHP
php提交过来的数据生成为txt文件
2016/04/28 PHP
支付宝服务窗API接口开发php版本
2016/07/20 PHP
php微信公众账号开发之前五个坑(一)
2016/09/18 PHP
Laravel 5.5官方推荐的Nginx配置学习教程
2017/10/06 PHP
PHP cURL获取微信公众号access_token的实例
2018/04/28 PHP
php根据命令行参数生成配置文件详解
2019/03/15 PHP
php设计模式之状态模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
php array_map()函数实例用法
2021/03/03 PHP
javascript concat数组累加 示例
2009/09/03 Javascript
js获取php变量的实现代码
2013/08/10 Javascript
9款2014最热门jQuery实用特效推荐
2014/12/07 Javascript
JS DOM实现鼠标滑动图片效果
2020/09/17 Javascript
select隐藏选中值对应的id,显示其它id的简单实现方法
2016/08/25 Javascript
快速使用node.js进行web开发详解
2017/04/26 Javascript
小程序云开发初探(小结)
2018/10/24 Javascript
python实现监控linux性能及进程消耗性能的方法
2014/07/25 Python
将图片文件嵌入到wxpython代码中的实现方法
2014/08/11 Python
python实现斐波那契递归函数的方法
2014/09/08 Python
Python中Iterator迭代器的使用杂谈
2016/06/20 Python
python3.5 tkinter实现页面跳转
2018/01/30 Python
基于Python pip用国内镜像下载的方法
2018/06/12 Python
Windows下python3.7安装教程
2018/07/31 Python
Python3 pip3 list 出现 DEPRECATION 警告的解决方法
2019/02/16 Python
Python简单I/O操作示例
2019/03/18 Python
Django给admin添加Action的步骤详解
2019/05/01 Python
Python3 JSON编码解码方法详解
2019/09/06 Python
python列表生成器迭代器实例解析
2019/12/19 Python
Python requests模块基础使用方法实例及高级应用(自动登陆,抓取网页源码)实例详解
2020/02/14 Python
Python 存取npy格式数据实例
2020/07/01 Python
印度最大的网上花店:Ferns N Petals(鲜花、礼品和蛋糕)
2017/10/16 全球购物
知识竞赛拉拉队口号
2014/06/16 职场文书
领导党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
地道战观后感500字
2015/06/04 职场文书