解决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 相关文章推荐
JavaScript代码复用模式实例分析
Dec 02 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
Apr 15 Javascript
JavaScript获得指定对象大小的方法
Jul 01 Javascript
详述JavaScript实现继承的几种方式(推荐)
Mar 22 Javascript
全面解析JavaScript中的valueOf与toString方法(推荐)
Jun 14 Javascript
jquery选择器中的空格与大于号&gt;、加号+与波浪号~的区别介绍
Jun 24 Javascript
AngularJS表单提交实例详解
Feb 18 Javascript
vue router 通过路由来实现切换头部标题功能
Apr 24 Javascript
微信小程序中悬浮窗功能的实现代码
Aug 02 Javascript
Element Collapse 折叠面板的使用方法
Jul 26 Javascript
在Vue里如何把网页的数据导出到Excel的方法
Sep 30 Javascript
如何vue使用el-table遍历循环表头和表体数据
Apr 26 Vue.js
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安装全攻略:APACHE
2006/10/09 PHP
一个目录遍历函数
2006/10/09 PHP
php REMOTE_ADDR之获取访客IP的代码
2008/04/22 PHP
php自定义函数截取汉字长度
2014/05/15 PHP
ThinkPHP3.2.2的插件控制器功能简述
2014/07/09 PHP
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
laravel 实现登陆后返回登陆前的页面方法
2019/10/03 PHP
Thinkphp 框架扩展之行为扩展原理与实现方法分析
2020/04/23 PHP
javascript实现节点(div)名称编辑
2014/12/17 Javascript
JavaScript中的普通函数与构造函数比较
2015/04/07 Javascript
理解Javascript的call、apply
2015/12/16 Javascript
js实现3D图片展示效果
2017/03/09 Javascript
详解AngularJS controller调用factory
2017/05/19 Javascript
js构造函数创建对象是否加new问题
2018/01/22 Javascript
通过vue提供的keep-alive减少对服务器的请求次数
2018/04/01 Javascript
Vue中fragment.js使用方法小结
2020/02/17 Javascript
从零开始用webpack构建一个vue3.0项目工程的实现
2020/09/24 Javascript
python获得一个月有多少天的方法
2015/06/04 Python
python定时利用QQ邮件发送天气预报的实例
2017/11/17 Python
Python Django 命名空间模式的实现
2019/08/09 Python
python 普通克里金(Kriging)法的实现
2019/12/19 Python
tensorflow的计算图总结
2020/01/12 Python
tensorflow2.0的函数签名与图结构(推荐)
2020/04/28 Python
python 日志模块 日志等级设置失效的解决方案
2020/05/26 Python
python PIL模块的基本使用
2020/09/29 Python
python 实现socket服务端并发的四种方式
2020/12/14 Python
结合 CSS3 transition transform 实现简单的跑马灯效果的示例
2018/02/07 HTML / CSS
英国最大的奢侈珠宝和手表网站:C W Sellors
2017/02/10 全球购物
为什么要用EJB
2014/04/17 面试题
尊老爱幼演讲稿
2014/09/04 职场文书
街道务虚会发言材料
2014/10/20 职场文书
2014年酒店工作总结范文
2014/11/17 职场文书
2015年人力资源部工作总结
2015/04/30 职场文书
机关单位2016年法制宣传日活动总结
2016/04/01 职场文书
应届生们该怎么书写求职信?
2019/07/05 职场文书
react如何快速设置文件路径别名
2021/04/28 Javascript