Layui動畫、按鈕、表單
阿新 • • 發佈：2018-10-14
test 輸入 itl 圓角 圖片 深圳 播放 mage 北京
Layui動畫、按鈕、表單
在實用價值的前提之下，我們並沒有內置過多花俏的動畫。而他們同樣在 layui 的許多交互元素中，發揮著重要的作用。layui 的動畫全部采用 CSS3，因此不支持ie8和部分不支持ie9（即ie8/9無動畫）。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>HelloWorld</title> 6 </head> 7 <link rel="stylesheet" href="/LayuiTest/layui/css/layui.css"> 8<body> 9 <script src="/LayuiTest/layui/layui.js"></script> 10 <div style="padding: 50px"> 11 <button class="layui-btn layui-anim layui-anim-up">up的按鈕</button> 12 <button class="layui-btn layui-anim layui-anim-upbit">upbit</button> 13<button class="layui-btn layui-anim layui-anim-scale">scale的按鈕</button> 14 <button class="layui-btn layui-anim layui-anim-scaleSpring">Spring的按鈕</button> 15 <button class="layui-btn layui-anim layui-anim-rotate layui-anim-loop">循環播放按鈕</button> 16<a href="http://www.layui.com" class="layui-btn ">一個可跳轉的按鈕</a> 17 </div> 18 </body> 19 </html>
按鈕：
向任意HTML元素設定class="layui-btn"，建立一個基礎按鈕。通過追加格式為layui-btn-{type}的class來定義其它按鈕風格。內置的按鈕class可以進行任意組合，從而形成更多種按鈕風格。
按鈕學習鏈接
你是否發現，主題、尺寸、圖標、圓角的交叉組合，可以形成難以計算的按鈕種類。另外，你可能最關註的是配色，Layui內置的六種主題的按鈕顏色都是業界常用的標準配色。
Form學習：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>哇哈哈哈</title> 6 </head> 7 <link rel="stylesheet" href="/LayuiTest/layui/css/layui.css"> 8 <body style="padding:50px"> 9 <script src="/LayuiTest/layui/layui.js"></script> 10 <form class="layui-form" action=""> 11 <div class="layui-form-item"> 12 <label class="layui-form-label">輸入框</label> 13 <div class="layui-input-block"> 14 <input type="text" name="title" required lay-verify="required" placeholder="請輸入標題" autocomplete="off" class="layui-input"> 15 </div> 16 </div> 17 <div class="layui-form-item"> 18 <label class="layui-form-label">密碼框</label> 19 <div class="layui-input-inline"> 20 <input type="password" name="password" required lay-verify="required" placeholder="請輸入密碼" autocomplete="off" class="layui-input"> 21 </div> 22 <div class="layui-form-mid layui-word-aux">輔助文字</div> 23 </div> 24 <div class="layui-form-item"> 25 <label class="layui-form-label">選擇框</label> 26 <div class="layui-input-block"> 27 <select name="city" lay-verify="required"> 28 <option value=""></option> 29 <option value="0">北京</option> 30 <option value="1">上海</option> 31 <option value="2">廣州</option> 32 <option value="3">深圳</option> 33 <option value="4">杭州</option> 34 </select> 35 </div> 36 </div> 37 <div class="layui-form-item"> 38 <label class="layui-form-label">復選框</label> 39 <div class="layui-input-block"> 40 <input type="checkbox" name="like[write]" title="寫作"> 41 <input type="checkbox" name="like[read]" title="閱讀" checked> 42 <input type="checkbox" name="like[dai]" title="發呆"> 43 </div> 44 </div> 45 <div class="layui-form-item"> 46 <label class="layui-form-label">開關</label> 47 <div class="layui-input-block"> 48 <input type="checkbox" name="switch" lay-skin="switch"> 49 </div> 50 </div> 51 <div class="layui-form-item"> 52 <label class="layui-form-label">單選框</label> 53 <div class="layui-input-block"> 54 <input type="radio" name="sex" value="男" title="男"> 55 <input type="radio" name="sex" value="女" title="女" checked> 56 </div> 57 </div> 58 <div class="layui-form-item layui-form-text"> 59 <label class="layui-form-label">文本域</label> 60 <div class="layui-input-block"> 61 <textarea name="desc" placeholder="請輸入內容" class="layui-textarea"></textarea> 62 </div> 63 </div> 64 <div class="layui-form-item"> 65 <div class="layui-input-block"> 66 <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button> 67 <button type="reset" class="layui-btn layui-btn-primary">重置</button> 68 </div> 69 </div> 70 </form> 71 72 <script> 73 //Demo 74 layui.use(‘form‘, function(){ 75 var form = layui.form; 76 77 //監聽提交 78 form.on(‘submit(formDemo)‘, function(data){ 79 layer.msg(JSON.stringify(data.field)); 80 return false; 81 }); 82 }); 83 </script> 84 </body> 85 </html>
Layui動畫、按鈕、表單