layui弹出层表单

layui弹出层表单弹出层表单很常见,也很实用,无论是在’pc端网页还是在移动端.现在用layui来实现一下这个表单吧.html<formclass=”layui-form”id=”test”style=”display:none”><divclass=”layui-form-item”><labelclass=”layui-form-label”>…

大家好,又见面了,我是你们的朋友全栈君。

弹出层表单很常见,也很实用,无论是在pc端网页还是在移动端.

现在用layui来实现一下这个表单吧.

html

<form class="layui-form" id="test" style="display:none">
  <div class="layui-form-item">
    <label class="layui-form-label">输入框</label>
    <div class="layui-input-block">
      <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="on" class="layui-input" id="username" style="width:100px">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">密码框</label>
    <div class="layui-input-inline">
      <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="on" class="layui-input">
    </div>
    <div class="layui-form-mid layui-word-aux">辅助文字</div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">选择框</label>
    <div class="layui-input-block">
     <select name="quiz" lay-search>
  <option value="">请选择</option>
  <optgroup label="城市记忆">
    <option value="你工作的第一个城市">你工作的第一个城市?</option>
  </optgroup>
  <optgroup label="学生时代">
    <option value="你的工号">你的工号?</option>
    <option value="你最喜欢的老师">你最喜欢的老师?</option>
  </optgroup>
</select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">复选框</label>
    <div class="layui-input-block">
      <input type="checkbox" name="like[write]" title="写作" lay-skin="primary">
      <input type="checkbox" name="like[read]" title="阅读" checked lay-skin="primary">
      <input type="checkbox" name="like[dai]" title="发呆" lay-skin="primary">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">开关</label>
    <div class="layui-input-block">
      <input type="checkbox" name="switch" lay-skin="switch" lay-text="开启|关闭">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">单选框</label>
    <div class="layui-input-block">
      <input type="radio" name="sex" value="男" title="男">
      <input type="radio" name="sex" value="女" title="女" checked>
    </div>
  </div>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label" >文本域</label>
    <div class="layui-input-block">
      <textarea lay-verify="required" name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
    </div>
  </div>
</form>
<button id="div">提交</button>

js

layer.open({
 type:1,
 area:['500px','600px'],
  title: 'tianxie'
  ,content: $("#test"),
  shade: 0,
  btn: ['提交', '重置']
  ,btn1: function(index, layero){
  var kk=$("#username").val();
  alert(kk);
  },
  btn2: function(index, layero){
   alert("2222");
   return false;
  },
cancel: function(layero,index){ 
   layer.closeAll();
  }

}); 

效果图

效果图
**欢迎光临本人咸鱼店铺
最新VUE3.0+TS入门与实战,打造企业级组件,打造知乎专栏等
最新React17+TS+全面拥抱HOOK打造企业级旅游系统等
最新畅销大前端金职位教学视频等
尽在大前端&Vue3&React

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/130128.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • JAVA简历1到三年

    JAVA简历1到三年JAVA开发工程师_3年基本资料求职意向意向职位: Java开发工程师 求职地址:北京期待薪资:面议到岗时间:随时工作性质:全职 目前状况:已离职个人技能1.熟练Java语言基础语法以及面向对象特征。2.熟练Java语言中常用API的使用,如IO,String,Collection等。3.熟练MySQL的增删改查操作以及JDBC数据库连接池的使用。4.熟悉Git这种分布式版本的控制系统的使用。5.熟悉Spring、Springmvc、M

  • 什么是文本挖掘 ?「建议收藏」

    什么是文本挖掘 ?「建议收藏」什么是文本挖掘  文本挖掘是抽取有效、新颖、有用、可理解的、散布在文本文件中的有价值知识,并且利用这些知识更好地组织信息的过程。1998年底,国家重点研究发展规划首批实施项目中明确指出,文本挖掘是“图像、语言、自然语言理解与知识挖掘”中的重要内容。  文本挖掘是信息挖掘的一个研究分支,用于基于文本信息的知识发现。文本挖掘利用智能算法,如神经网络、基于案例的推理、可能性推理等,并结合文字处

  • css自动换行属性与保留空白属性冲突_css换行样式

    css自动换行属性与保留空白属性冲突_css换行样式word-break属性规定自动换行的处理方法。提示:通过使用word-break属性,可以让浏览器实现在任意位置的换行。所有主流浏览器都支持word-break属性。语法:word-break:normal|break-all|keep-all;normal使用浏览器默认的换行规则。break-all允许在单词内换行。keep-all只能在半角空格或连字符处换行。word-break:break-all所有的都换行,右侧换行没有空隙。word-wrap属性允许

    2022年10月30日
  • sql server 2005卸载教程_sql卸载工具

    sql server 2005卸载教程_sql卸载工具如果您要安装新版的sql就必须先完整的卸载sql2005,如果你按照常规的方法是不能完整的卸载sql2005,从而会引起安装的时候说sql已经挂起的错误,sql2005卸载工具(sqlserver2005卸载工具),是一个帮你完整的清理已经安装的sql的工具。MicrosoftSQLServer2005是一个全面的数据库平台,使用集成的商业智能(BI)工具提供了企业级的数据管理。Mi…

  • mysql client library_mysqlclient[通俗易懂]

    mysql client library_mysqlclient[通俗易懂]linux下用C语言写MySQL程序,用如下命令编译时出错:[xitong@localhostmysql]$gcc-omysqlmysql.c-lmysqlclient错误如下:/usr/bin/ld:cannotfind-lmysqlclientcollect2:ld返回1解决方法:用locate命令查找mysqlclient所在目录,如下所示:[xitong@local…

    2022年10月24日
  • js/es6判断对象是否为空,并判断对象是否包含某个属性

    js/es6判断对象是否为空,并判断对象是否包含某个属性js判断对象为空以及有好几种方法了,但是个人觉得不是特别方便。比如:1、把对象通过JSON.stringify转为字符串,再判断字符串是否等于”{}”2、forin循环,判断key是否存在3、jq的方法es6已经帮我们很好的解决了此类问题。es6针对对象增加了3个新方法(数组也有):(1)、Object.keys:返回一个数组,成员是参数对象自身的(不含继承…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号