解决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 链式延迟执行DOME
Jan 04 Javascript
一个JS的日期格式化算法示例
Jul 31 Javascript
jQuery通过扩展实现抖动效果的方法
Mar 11 Javascript
jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween
Dec 03 Javascript
详解JavaScript中的构造器Constructor模式
Jan 14 Javascript
如何使用Bootstrap 按钮实例详解
Mar 29 Javascript
vue组件中点击按钮后修改输入框的状态实例代码
Apr 14 Javascript
bootstrap3-dialog-master模态框使用详解
Aug 22 Javascript
vue.js $refs和$emit 父子组件交互的方法
Dec 20 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
Sep 17 Javascript
微信小程序--特定区域滚动到顶部时固定的方法
Apr 28 Javascript
layui实现数据表格点击搜索功能
Mar 26 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中使用addslashes函数转义的安全性原理分析
2014/11/03 PHP
php结合md5实现的加密解密方法
2016/01/25 PHP
PHP编程计算日期间隔天数的方法
2017/04/26 PHP
PHP进阶学习之类的自动加载机制原理分析
2019/06/18 PHP
javascript中的undefined和not defined区别示例介绍
2014/02/26 Javascript
js删除局部变量的实现方法
2016/06/25 Javascript
学习使用bootstrap的modal和carousel
2016/12/09 Javascript
JavaScript实现快速排序的方法分析
2018/01/10 Javascript
深入理解使用Vue实现Context-Menu的思考与总结
2019/03/09 Javascript
layui table 表格上添加日期控件的两种方法
2019/09/28 Javascript
解决vue v-for src 图片路径问题 404
2019/11/12 Javascript
JS FormData对象使用方法实例详解
2020/02/12 Javascript
vue项目或网页上实现文字转换成语音播放功能
2020/06/09 Javascript
python实现带错误处理功能的远程文件读取方法
2015/04/29 Python
Python脚本文件打包成可执行文件的方法
2015/06/02 Python
KMP算法精解及其Python版的代码示例
2016/06/01 Python
一个基于flask的web应用诞生 使用模板引擎和表单插件(2)
2017/04/11 Python
手把手教你如何安装Pycharm(详细图文教程)
2018/11/28 Python
Python3中lambda表达式与函数式编程讲解
2019/01/14 Python
pandas计数 value_counts()的使用
2019/06/24 Python
python实现鸢尾花三种聚类算法(K-means,AGNES,DBScan)
2019/06/27 Python
简单了解python 邮件模块的使用方法
2019/07/24 Python
python使用sklearn实现决策树的方法示例
2019/09/12 Python
Python3.7 基于 pycryptodome 的AES加密解密、RSA加密解密、加签验签
2019/12/04 Python
Python3使用腾讯云文字识别(腾讯OCR)提取图片中的文字内容实例详解
2020/02/18 Python
如何用python处理excel表格
2020/06/09 Python
使用canvas一步步实现图片打码功能的方法
2019/06/17 HTML / CSS
描述JSP和Servlet的区别、共同点、各自应用的范围
2012/10/02 面试题
python+selenium小米商城红米K40手机自动抢购的示例代码
2021/03/24 Python
俄语专业毕业生推荐信
2013/10/28 职场文书
高中毕业自我鉴定
2013/12/13 职场文书
报到证丢失证明
2014/01/11 职场文书
啦啦队口号大全
2014/06/16 职场文书
付款证明格式范文
2015/06/19 职场文书
MySQL sql_mode修改不生效的原因及解决
2021/05/07 MySQL
win11无线投屏在哪设置? win11无线投屏功能的使用方法
2022/04/08 数码科技