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. 使用 Java 发送邮件

    在我们的应用程序中有时需要给用户发送邮件,例如激活邮件.通知邮件等等.那么如何使用 Java 来给用户发送邮件呢? 使用 java 代码发送邮件 使用工具类发送邮件 使用Spring进行整合发送邮件 ...

  2. 手写一套迷你版HTTP服务器

    本文主要介绍如何通过netty来手写一套简单版的HTTP服务器,同时将关于netty的许多细小知识点进行了串联,用于巩固和提升对于netty框架的掌握程度. 服务器运行效果 服务器支持对静态文件css ...

  3. LN : leetcode 646 Maximum Length of Pair Chain

    lc 646 Maximum Length of Pair Chain 646 Maximum Length of Pair Chain You are given n pairs of number ...

  4. R58的编译步骤f1选项v1.1版本

    R58的编译步骤f1选项v1.1版本 2017/3/16 16:38 请严重注意: 编译全志R58的Android6.0.1的系统和其它系统有两个不同: 1.在执行pack打包之前,必须执行verit ...

  5. linux下php访问sql server设置

    安装freeIDS 官网下载地址: wget ftp://ftp.freetds.org/pub/freetds/stable/freetds-1.00.18.tar.gz 1.1.到下载目录解压 t ...

  6. jmeter 连接 sqlite 进行压力测试

  7. windows sdk编程禁止窗体最大化最小化

    #include <windows.h> /*消息处理函数声明*/ HRESULT CALLBACK WindowProc(HWND hwnd, UINT message, WPARAM ...

  8. CAD交互绘制样条线（com接口）

    在CAD设计时,需要绘制样条线,用户可以设置样条线线重及颜色等属性. 主要用到函数说明: _DMxDrawX::SendStringToExecuteFun 把命令当着函数执行,可以传参数.详细说明如 ...

  9. ssd运行过程中遇到的bug

    1.出现以下错误: 没有添加环境变量: https://github.com/weiliu89/caffe/issues/4 可以看到当前PYTHONPATH不再ssd1里面,所以需要修改,修改之后就 ...

  10. python 双冒号

    Python序列切片地址可以写为[开始:结束:步长],其中的开始和结束可以省略 1.range(n)生成[0,n)区间整数 range(10) [0,1,2,3,4,5,6,7,8,9] 2.开始st ...