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 线程 —— Wait （等待）和 Notify（唤醒）

    Wait (等待)和 Notify(唤醒) 这里讲了一个Wait (等待)和 Notfity(唤醒),下面这个实例(工厂,商店,消费者) 额,然后,你就知道了,需要写三个类:工厂类,Shop类,消费者 ...

  2. 关于flex布局对自己的影响

    对于本图来说用了一个效果就能达到这种情况,对于我来说,今天是有进步的,具体操作就是盒子模型确实,在什么地方起来的flex就运用到该地方去,刚 开始就一直有问题,思考了半天,原来是我的控制代码出现了点错 ...

  3. 【Python】列表解析表达式

    1.语法 [expression for iter_val in iterable] [expression for iter_val in iterable if cond_expr] 2.示例 s ...

  4. android 2.2 preview3 编译bug

    平台 as2.2 preview3;   1. 解决方法: 在project.buildgradle 里面设置 // Top-level build file where you can add co ...

  5. sql server 中引號嵌套

    在SQL字符串是以单引号作为分界符的,在字符串前面和后面各一个单引号.但是字符串中也能包含单引号,为了使语法分析器能够区分字符串中的单引号还是分界符.规定当字符串中出现单引号时,在其前面添加一个单引号 ...

  6. MSSQL数据库事务处理

    在日常应用中通常需要多人执行多表的操作,比如售票系统的售票功能,这时候就涉及到数据读取的一致性问题,好在MSSQL数据库也提供了事务处理功能,这里就简单的记下 语法: Begin Tran //事务处 ...

  7. 解决国内无法安装android sdk的问题

    在使用 Android SDK Manager 的时候,主要会连接到两个地址 dl.google.com 和 dl-ssl.google.com,key发现这两个地址都是无法正常访问的,如何解决呢? ...

  8. CAD交互绘制文字（com接口）

    在cad设计时,需要绘制文字,用户可以设置设置绘制文字的高度等属性. 主要用到函数说明: _DMxDrawX::DrawText 绘制一个单行文字.详细说明如下: 参数 说明 DOUBLE dPosX ...

  9. eclipse如何设置多个字符的智能提示

    clipse代码里面的代码提示功能默认是关闭的,只有输入“.”的时候才会提示功能,用vs的用户可能不太习惯这种,vs是输入任何字母都会提示,下面说一下如何修改eclipse配置,开启代码自动提示功能打 ...

  10. redis新特性

    摘自<redis 4.xcookbook> 从实例重启同步] 故障切换同步] 4.0之前从实例主键过期bug redis4新特性 Memory Command Lazy Free PSYN ...