Layui动画、按钮、表单

　　在实用价值的前提之下，我们并没有内置过多花俏的动画。而他们同样在 layui 的许多交互元素中，发挥着重要的作用。layui 的动画全部采用 CSS3，因此不支持ie8和部分不支持ie9（即ie8/9无动画）。

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>HelloWorld</title>

 </head>

 <link rel="stylesheet" href="/LayuiTest/layui/css/layui.css">

 <body>

 <script src="/LayuiTest/layui/layui.js"></script>

     <div style="padding: 50px">

             <button class="layui-btn layui-anim layui-anim-up">up的按钮</button>

             <button class="layui-btn layui-anim layui-anim-upbit">upbit</button>

             <button class="layui-btn layui-anim layui-anim-scale">scale的按钮</button>

             <button class="layui-btn layui-anim layui-anim-scaleSpring">Spring的按钮</button>

             <button class="layui-btn layui-anim layui-anim-rotate layui-anim-loop">循环播放按钮</button>

             <a href="http://www.layui.com" class="layui-btn ">一个可跳转的按钮</a>

     </div>

 </body>

 </html>

按钮：

向任意HTML元素设定class="layui-btn"，建立一个基础按钮。通过追加格式为layui-btn-{type}的class来定义其它按钮风格。内置的按钮class可以进行任意组合，从而形成更多种按钮风格。

按钮学习链接

你是否发现，主题、尺寸、图标、圆角的交叉组合，可以形成难以计算的按钮种类。另外，你可能最关注的是配色，Layui内置的六种主题的按钮颜色都是业界常用的标准配色。

Form学习：

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>哇哈哈哈</title>

 </head>

 <link rel="stylesheet" href="/LayuiTest/layui/css/layui.css">

 <body style="padding:50px">

 <script src="/LayuiTest/layui/layui.js"></script>

 <form class="layui-form" action="">

   <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="off" class="layui-input">

     </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="off" 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="city" lay-verify="required">

         <option value=""></option>

         <option value="0">北京</option>

         <option value="1">上海</option>

         <option value="2">广州</option>

         <option value="3">深圳</option>

         <option value="4">杭州</option>

       </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="写作">

       <input type="checkbox" name="like[read]" title="阅读" checked>

       <input type="checkbox" name="like[dai]" title="发呆">

     </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">

     </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 name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>

     </div>

   </div>

   <div class="layui-form-item">

     <div class="layui-input-block">

       <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>

       <button type="reset" class="layui-btn layui-btn-primary">重置</button>

     </div>

   </div>

 </form>

 <script>

 //Demo

 layui.use('form', function(){

   var form = layui.form;

   //监听提交

   form.on('submit(formDemo)', function(data){

     layer.msg(JSON.stringify(data.field));

     return false;

   });

 });

 </script>

 </body>

 </html>

Layui动画、按钮、表单的更多相关文章

  1. 一款基于jquery ui的动画提交表单

    今天要给大家分享一款基于jquery ui的动画提交表单.这款提交表单的的效果是以动画的形式依次列表所需填写的信息.效果非常不错,效果图如下: 在线预览   源码下载 实现的代码. html代码: & ...

  2. 【layui】提交表单

    1 <script type="text/javascript"> layui.use(['form', 'layer', 'jquery'], function () ...

  3. html bottom html submit按钮表单控件与CSS美化

    一.html submit与bottom按钮基本语法结构 1.html submit按钮在input标签里设置type="submit"即可设置此表单控件为按钮. submit按钮 ...

  4. layui渲染form表单

    有时ajax请求的数据返回时,页面已经加载了,此时就无法展示ajax加载的内容,如果要局部刷新表单,则加上如下代码: layui.use('form', function() { var form = ...

  5. layui中form表单渲染的问题

    layui 官网的这部分文档介绍:http://www.layui.com/doc/modules/form.html#render 注意:针对的是表单元素,input select  textare ...

  6. layui模板注册表单

    今天晚上用layui模板做了一个简单的注册表单,功能主要有可以js验证密码重复,可以验证手机号码. 这是界面 下面是我的html文件代码 <!DOCTYPE html> <html ...

  7. form表单中新增button按钮，点击按钮表单会进行提交

    原生button控件,在非ie浏览器下,如果不指定type,默认为submit类型.如果不想自动提交表单,指定type=“button”

  8. layui弹出表单提交后，界面model验证部分起作用

    情况1----input属性中type=submit时验证都可以起作用,但是弹出层表单的返回值不能获取,所以用ajax二次提交后会出现重复添加数据的问题 情况2----input属性中type=but ...

  9. layui 常见的表单元素

    第一步:引用文件 效果图(日期.文件上传在下面): <form class="layui-form" action=""> <div clas ...

  10. Layui我提交表单时，table.reload(),表格会请求2次，是为什么？

    重载两次是因为搜索按钮用的是button 改成<a class="layui-btn" data-type="reload">搜索</a> ...

随机推荐

  1. C#中的事件机制

    这几天把事件学了一下,总算明白了一些.不多说了,直接代码. class Program { static void Main(string[] args) { CatAndMouse h = new ...

  2. H.264学习笔记3——帧间预测

    帧间预测主要包括运动估计(运动搜索方法.运动估计准则.亚像素插值和运动矢量估计)和运动补偿. 对于H.264,是对16x16的亮度块和8x8的色度块进行帧间预测编码. A.树状结构分块 H.264的宏 ...

  3. c# winform如何屏蔽键盘上下左右键

    重写事件: protected override bool ProcessDialogKey(Keys keyData) { if (keyData == Keys.Up || keyData == ...

  4. Youtube-dl 简短使用总结

    默认下载bestvideo+bestaudio,并通过ffmpeg -c copy output.mp4 简单的封装进mp4格式,而不进行转码. 有时候bestaudio 是opus编码的,但是mp4 ...

  5. 洛谷——P2680 运输计划

    https://www.luogu.org/problem/show?pid=2680 题目背景 公元 2044 年,人类进入了宇宙纪元. 题目描述 L 国有 n 个星球,还有 n-1 条双向航道,每 ...

  6. Lodash数组方法中文总结

    LodashAPI总结 Lodash是一个特别特别好用的工具,感觉有了Lodash就没有解决不了的问题了~~~~ 使用初开始 官网 https://www.lodashjs.com/docs/4.17 ...

  7. win7 命令行禁用开启usb存储

    禁用: reg add "HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\usbstor" /v Start /t reg ...

  8. VirtualBox中的Linux读取Windows共享目录

    1.安装VirtualBox的增强功能.菜单 -> 设备 -> 安装增强功能此时在Linux中会载入安装包,用管理员权限运行安装即可. 2.在VirtualBox设置共享目录.设置 -&g ...

  9. react-native 框架升级 安卓第三方插件报错 Android resource linking failed

    亲自经历react-native从0.55升级到0.58的过程,有点坎坷,ios出现的问题还算不多,但是android这里,随着gradle和buildTool的使用升级,导致第三方插件出现各种问题, ...

  10. js中事件冒泡和事件捕获

    什么时候存在这种问题? 当一个行为触发了多个对象的事件时.   <body>   <div class="fa">     <div class=&q ...