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 ...