layui：頁面元素（輸入框、下拉選擇框、復選框、開關、單選框、文本域、導航）

本文轉載自查看原文 2020-09-24 16:47 3693 3、前端

1、輸入框

  <div class="layui-container">
    <input type="text" name="title" required lay-verify="required" placeholder="請輸入標題" autocomplete="off" class="layui-input">
  </div>

required：注冊瀏覽器所規定的必填字段
lay-verify：注冊form模塊需要驗證的類型
class="layui-input"：layui.css提供的通用CSS類

2、下拉選擇框

<body>
<script src="layui/layui.js"></script>
<script> layui.use('form', function () {
    var form = layui.form;
    form.render();
});
</script>
<from class="layui-form">
  <select name="city" lay-verify="">
    <option value="">請選擇一個城市</option>
    <option value="010">北京</option>
    <option value="021">上海</option>
    <option value="0571">杭州</option>
  </select>
</from>
</body>

3、復選框

<body>
<script src="layui/layui.js"></script>
<script> layui.use('form', function () {
    var form = layui.form;
    form.render();
});
</script>
<from class="layui-form">
  默認風格：
  <input type="checkbox" name="" title="足球" checked>
  <input type="checkbox" name="" title="籃球">
  <input type="checkbox" name="" title="排球" disabled>
  原始風格：
  <input type="checkbox" name="" title="跑步" lay-skin="primary" checked>
  <input type="checkbox" name="" title="長跑" lay-skin="primary">
  <input type="checkbox" name="" title="乒乓球" lay-skin="primary" disabled>
</from>
</body>

4、開關

<body>
<script src="layui/layui.js"></script>
<script> layui.use('form', function () {
    var form = layui.form;
    form.render();
});
</script>
<from class="layui-form">
  <input type="checkbox" name="xxx" lay-skin="switch">
  <input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" checked>
  <input type="checkbox" name="zzz" lay-skin="switch" lay-text="開啟|關閉">
  <input type="checkbox" name="aaa" lay-skin="switch" disabled>
</from>
</body>

5、單選框

<body>
<script src="layui/layui.js"></script>
<script> layui.use('form', function () {
    var form = layui.form;
    form.render();
});
</script>
<from class="layui-form">
  <input type="radio" name="sex" value="nan" title="男">
  <input type="radio" name="sex" value="nv" title="女" checked>
  <input type="radio" name="sex" value="" title="中性" disabled>
</from>
</body>

6、文本域

<body>
<script src="layui/layui.js"></script>
<script> layui.use('form', function () {
    var form = layui.form;
    form.render();
});
</script>
<from class="layui-form">
  <textarea name="" required lay-verify="required" placeholder="請輸入" class="layui-textarea"></textarea>
</from>
</body>

7、導航

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layDate快速使用</title>
  <link rel="stylesheet" href="layui/css/layui.css" media="all">
</head>
<body>
<ul class="layui-nav" lay-filter="">
  <li class="layui-nav-item"><a href="">最新活動</a></li>
  <li class="layui-nav-item layui-this"><a href="">產品</a></li>
  <li class="layui-nav-item"><a href="">大數據</a></li>
  <li class="layui-nav-item">
    <a href="javascript:;">解決方案</a>
    <dl class="layui-nav-child"> <!-- 二級菜單 -->
      <dd><a href="">移動模塊</a></dd>
      <dd><a href="">后台模版</a></dd>
      <dd><a href="">電商平台</a></dd>
    </dl>
  </li>
  <li class="layui-nav-item"><a href="">社區</a></li>
</ul>

<script src="layui/layui.js"></script>
<script>
    //注意：導航 依賴 element 模塊，否則無法進行功能性操作
    layui.use('element', function(){
        var element = layui.element;

        //…
    });
</script>
</body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Selenium—選擇框的相關操作（單選框、多選框、復選框、下拉框） Vue —— 復選框、單選框、下拉框關於bootstrap--表單（下拉、文本域復選框和單選按鈕）單選框，復選框和下拉框回顯賦值問題 vue中表單的簡單應用（單選框，復選框，下拉框） html基本標簽表單實現交互原理，單選框，復選框，下拉框介紹常用JS操作（復選框、單選框、下拉框） Qt Quick 常用元素：RadioButton(單選框)，CheckBox(復選框) 與 GroupBox(分組框) 用jquery修改默認的單選框radio或者復選框checkbox選擇框樣式 Android學習使用基本界面組件（下拉框，單選框，復選框，數字轉輪，滾動條）