解决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通过相同的name进行表格求和代码
Aug 18 Javascript
jQuery循环滚动新闻列表示例代码
Jun 17 Javascript
JavaScript验证电子邮箱的函数
Aug 22 Javascript
jQuery实现单击和鼠标感应事件
Feb 01 Javascript
Jquery实现瀑布流布局(备有详细注释)
Jul 31 Javascript
JS模拟Dialog弹出浮动框效果代码
Oct 16 Javascript
jquery弹出框插件jquery.ui.dialog用法分析
Aug 20 Javascript
Easyui笔记2:实现datagrid多行删除的示例代码
Jan 14 Javascript
微信小程序实战之仿android fragment可滑动底部导航栏(4)
Apr 16 Javascript
JavaScript简单拖拽效果(1)
May 17 Javascript
node中modules.exports与exports导出的区别
Jun 08 Javascript
JS删除数组指定值常用方法详解
Jun 04 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中最容易忘记的一些知识点总结
2013/04/28 PHP
ThinkPHP模板判断输出Empty标签用法详解
2014/06/30 PHP
定位地理位置PHP判断员工打卡签到经纬度是否在打卡之内
2019/05/23 PHP
php session_decode函数用法讲解
2019/05/26 PHP
理解Javascript_08_函数对象
2010/10/15 Javascript
Javascript浅谈之this
2013/12/17 Javascript
简单方法判断JavaScript对象为null或者属性为空
2014/09/26 Javascript
如何编写高质量JS代码
2014/12/28 Javascript
JQuery悬停控制图片轮播——代码简单
2015/08/05 Javascript
JS中使用apply、bind实现为函数或者类传入动态个数的参数
2016/04/26 Javascript
发布一款npm包帮助理解npm的使用
2019/01/03 Javascript
vue中轮训器的使用
2019/01/27 Javascript
Jquery实现无缝向上循环滚动列表的特效
2019/02/13 jQuery
详解JS实现系统登录页的登录和验证
2019/04/29 Javascript
原生JS与CSS实现软件卸载对话框功能
2019/12/05 Javascript
小程序双头slider选择器的实现示例
2020/03/31 Javascript
基于VUE实现判断设备是PC还是移动端
2020/07/03 Javascript
[44:58]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第二场
2018/04/06 DOTA
Python中的闭包总结
2014/09/18 Python
Python批量合并有合并单元格的Excel文件详解
2018/04/05 Python
在Pycharm中修改文件默认打开方式的方法
2019/01/17 Python
python地震数据可视化详解
2019/06/18 Python
pip install命令安装扩展库整理
2021/03/02 Python
日本无添加化妆品:HABA
2016/08/18 全球购物
加拿大高尔夫超市:Golf Town
2018/01/12 全球购物
Hoka One One法国官网:美国专业跑鞋品牌
2018/12/29 全球购物
请解释流与文件有什么不同
2016/07/29 面试题
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2012/04/17 面试题
肯尼迪就职演说稿
2013/12/31 职场文书
小学生家长评语集锦
2014/01/30 职场文书
幼儿园教师岗位职责
2014/03/17 职场文书
会计求职信
2014/05/29 职场文书
2014物价局群众路线对照检查材料思想汇报
2014/09/21 职场文书
商务代表岗位职责
2015/02/15 职场文书
自荐信格式模板
2015/03/27 职场文书
装配车间主任岗位职责
2015/04/08 职场文书