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)


相关推荐

  • 各代iphone尺寸_iPhone每一代的屏幕尺寸比例是多少?[通俗易懂]

    各代iphone尺寸_iPhone每一代的屏幕尺寸比例是多少?[通俗易懂]展开全部第一代iPhone2G屏幕为32313133353236313431303231363533e78988e69d83313333663037663.5英吋,分辨率为320*480像素,比例为3:2。第二代iPhone3G屏幕为3.5英吋,分辨率为320*480像素,比例为3:2。第三代iPhone3GS屏幕为3.5英吋,分辨率为320*480像素,比例为3:2。第四代iPhone4屏幕为3…

  • 静态文件发布脚本实例

    静态文件发布脚本实例

  • CS和BS_cs和bs架构的优缺点

    CS和BS_cs和bs架构的优缺点一、什么是CS和BS结构? 1.C/S又称Client/Server或客户/服务器模式。服务器通常采用高性能的PC、工作站或小型机,并采用大型数据库系统,如Oracle、Sybase、Informix或SQLServer。客户端需要安装专用的客户端软件。 2.B/S是Brower/Server的缩写,客户机上只要安装一个浏览器(Browser),如NetscapeNavigator或Intern…

  • java中main方法的运行

    java中main方法的运行转载自:https://blog.csdn.net/WGYH_3767/article/details/76933676(最近要把一个main方法启动的项目集入web项目里,参考了main方法的运行机制才解决。)学过java的都知道main方法是学习java的开始,也是程序的入口,不过你有多少个类或程序,线程,他们的入口方法都是main()。main方法是一个静态的…

  • leetcode-84柱状图中最大的矩形(单调栈)「建议收藏」

    leetcode-84柱状图中最大的矩形(单调栈)「建议收藏」原题链接给定 n 个非负整数,用来表示柱状图中各个柱子的高度。每个柱子彼此相邻,且宽度为 1 。求在该柱状图中,能够勾勒出来的矩形的最大面积。以上是柱状图的示例,其中每个柱子的宽度为 1,给定的高度为 [2,1,5,6,2,3]。图中阴影部分为所能勾勒出的最大矩形面积,其面积为 10 个单位。示例:输入: [2,1,5,6,2,3]输出: 10题解对于每一个长方体,找出左边比他小的第一个长方体和右边比他小的第一个长方体,然后遍历求结即可class Solution {public

  • 30岁之后,人的命运就藏在《周易》中,看懂受益一生!

    30岁之后,人的命运就藏在《周易》中,看懂受益一生!

发表回复

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

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