Layui动画、按钮、表单

时间：2022-08-10 07:48:23

　　　　　　　　　　　　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学习：

Layui动画、按钮、表单

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

相关文章