layui学习3（静态表格、表单元素）
1.静态表格
表格: <table class="layui-table"></table>
属性:
lay-even 实现隔行换色效果
lay-skin="属性值" 【line （行边框风格）、row （列边框风格）、nob （无边框风格）】
lay-size="属性值" 【sm （小尺寸）、lg （大尺寸）】
表格 - 页面元素 - Layui (ilayuis.com)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>静态表格</title> <link rel="stylesheet" type="text/css" href="layui/css/layui.css"> </head> <body> <!-- 表格: <table class="layui-table"></table> 属性: lay-even 实现隔行换色效果 lay-skin="属性值" 【line （行边框风格）、row （列边框风格）、nob （无边框风格）】 lay-size="属性值" 【sm （小尺寸）、lg （大尺寸）】 --> <h2>标准表格</h2> <table class="layui-table"> <colgroup> <col width="150"> <col width="200"> <col> </colgroup> <thead> <tr> <th>昵称</th> <th>加入时间</th> <th>签名</th> </tr> </thead> <tbody> <tr> <td>贤心</td> <td>2016-11-29</td> <td>人生就像是一场修行</td> </tr> <tr> <td>许闲心</td> <td>2016-11-28</td> <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td> </tr> </tbody> </table> <hr> <h2>隔行换色效果</h2> <!--lay-even 实现隔行换色效果--> <table class="layui-table" lay-even> <colgroup> <col width="150"> <col width="200"> <col> </colgroup> <thead> <tr> <th>昵称</th> <th>加入时间</th> <th>签名</th> </tr> </thead> <tbody> <tr> <td>贤心</td> <td>2016-11-29</td> <td>人生就像是一场修行</td> </tr> <tr> <td>许闲心</td> <td>2016-11-28</td> <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td> </tr> <tr> <td>贤心</td> <td>2016-11-29</td> <td>人生就像是一场修行</td> </tr> <tr> <td>许闲心</td> <td>2016-11-28</td> <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td> </tr> </tbody> </table> </body> </html>
2.表单元素
表单 - 页面元素 - Layui (ilayuis.com)
<!--加载form模块--> <script type="text/javascript"> layui.use('form',function (){ var form = layui.form; }); </script>
2.1输入框：
<input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
required lay-verify="required"：可以用来验证，如果没有填写内容的时候，就会弹出提醒信息；
其中required表示是必填字段
lay-verify:需要验证的类型，required表示必填，还有别的取值如Email。
placeholder:默认显示文本信息
autocomplete:表单是否自动填充
在class中还提供了layui-input-block:占据全部宽度和layui-input-inline:占据部分宽度
<!-- 1.在一个容器中设定 class="layui-form" 来标识一个表单元素块 --> <form action="" class="layui-form"> <!-- 2.基本的行区块结构--> <div class="layui-form-item"> <label class="layui-form-label">标题</label> <!-- layui-input-block:表示占一整行，inline就不会占一整行--> <div class="layui-input-inline"> <!-- 文本框--> <input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input"> </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>
2.2下拉选择框
下拉框:
lay-verify="required"也是会校验是否为空
通过selected属性设置默认选项(<option>标签中使用)
禁用下拉框: 添加属性 disabled(<select><option>标签中都可使用)
分组效果：通过 optgroup 标签给select分组
通过设置lay-search开启搜索功能
实现分组效果
搜索匹配的效果:假如数据有：layer、form、layim输入l就会有匹配的值
代码：
<!-- 下拉框: 1.lay-verify="required"也是会校验是否为空 2.通过selected属性设置默认选项(<option>标签中使用) 3.禁用下拉框: 添加属性 disabled(<select><option>标签中都可使用) 4.分组效果：通过 optgroup 标签给select分组 5.通过设置lay-search开启搜索功能 --> <div class="layui-form-item"> <label class="layui-form-label">城市</label> <div class="layui-input-inline"> <select name="city" lay-verify="required" > <option value="">请选择一个城市</option> <option value="010">北京</option> <option value="021" selected>上海</option> <option value="0571" disabled>杭州</option> </select> <!-- 分组效果：通过 optgroup 标签给select分组--> <select name="quiz"> <option value="">请选择</option> <optgroup label="城市记忆"> <option value="你工作的第一个城市">你工作的第一个城市？</option> </optgroup> <optgroup label="学生时代"> <option value="你的工号">你的工号？</option> <option value="你最喜欢的老师">你最喜欢的老师？</option> </optgroup> </select> <!-- 开启搜索匹配--> <select name="city" lay-verify="" lay-search> <option value="">请选择</option> <option value="010">layer</option> <option value="021">form</option> <option value="0571">layim</option> </select> </div> </div>
2.3复选框
复选框
1.title属性设置自定义文本（不需要则不设置）
2.checked选中
3.lay-skin="parmary"更换为原始的复选框模式
4.value值为了后台人员能知道选中了什么元素
5.disabled值可以禁用元素
<!-- 复选框 1.title属性设置自定义文本（不需要则不设置） 2.checked选中 3.lay-skin="parmary"更换为原始的复选框模式 4.value值为了后台人员能知道选中了什么元素 5.disabled值可以禁用元素 --> <!--基本的行区块结构--> <div class="layui-form-item"> <label class="layui-form-label">爱好</label> <div class="layui-input-block"> <!-- 默认复选框--> <input type="checkbox" name="hobby" title="唱歌" value="唱歌" checked> <input type="checkbox" name="hobby" title="跳舞" value="跳舞"> <input type="checkbox" name="hobby" title="弹琴" value="弹琴" disabled> <br> <!-- 原始效果--> <input type="checkbox" name="hobby" title="唱歌" lay-skin="primary" value="唱歌" checked> <input type="checkbox" name="hobby" title="跳舞" lay-skin="primary" value="跳舞"> <input type="checkbox" name="hobby" title="弹琴" lay-skin="primary" value="弹琴"> </div> </div>
2.4开关
开关：
只要把复选框加上一个属性即可lay-skin="switch"
1.默认打开checked
2.禁选：disabled
3.自定义，lay-text="打开的值|关闭的值"来设定开关两种状态的文本
4.通过value属性设置选中提交的值
<!-- 开关： 只要把复选框加上一个属性即可lay-skin="switch" 1.默认打开checked 2.禁选：disabled 3.自定义，lay-text="打开的值|关闭的值"来设定开关两种状态的文本 4.通过value属性设置选中提交的值 --> <div class="layui-form-item"> <label class="layui-form-label">开关</label> <!-- layui-input-block:表示占一整行，inline就不会占一整行--> <div class="layui-input-block"> <!--开关：只要给复选框加上一个属性即可,checked表示默认打开--> <input type="checkbox" name="a" lay-skin="switch"> <input type="checkbox" name="b" lay-skin="switch" checked> <input type="checkbox" name="c" lay-skin="switch" checked lay-text="on|off"> <input type="checkbox" name="d" lay-skin="switch" checked lay-text="打开|关闭" value="打开"> <input type="checkbox" name="e" lay-skin="switch" lay-text="打开|关闭" disabled> </div> </div>
2.5单选框
<!-- 单选框 --> <div class="layui-form-item"> <label class="layui-form-label">单选框</label> <div class="layui-input-block"> <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> </div> </div>
2.6文本域
<!-- 文本域 <textarea name="" required lay-verify="required" placeholder="请输入" class="layui-textarea"></textarea> --> <div class="layui-form-item"> <label class="layui-form-label">简介</label> <div class="layui-input-inline"> <textarea name="" required lay-verify="required" placeholder="请输入" class="layui-textarea"></textarea> </div> </div>
2.7组装行内表单
组装行内表单：
class="layui-inline"：定义外层行内
class="layui-input-inline"：定义内层行内
<!-- 组装行内表单： class="layui-inline"：定义外层行内 class="layui-input-inline"：定义内层行内 --> <div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-label">范围</label> <div class="layui-input-inline"> <input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input"> </div> <div class="layui-form-mid">-</div> <div class="layui-input-inline"> <input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-inline"> <label class="layui-form-label">密码</label> <div class="layui-input-inline"> <input type="password" name="pwd" placeholder="请输入密码" class="layui-input"> </div> </div> </div>
2.8忽略美化渲染
单元素增加属性 lay-ignore 设置后，将不会对该标签进行美化渲染，即保留系统风格
<div class="layui-form-item"> <label class="layui-form-label">简介</label> <div class="layui-input-inline"> <input type="radio" name="ra" value="" title="男" lay-ignore="">男 <input type="radio" name="ra" value="" title="男"> </div> </div>
2.9表单方框风格
表单方框风格：
layui-form-pane 的class，来设定表单的方框风格
也可以直接在form里面的class追加，这样子就不用一个一个添加。
<!-- 表单方框风格： layui-form-pane 的class，来设定表单的方框风格 --> <div class="layui-form-item"> <label class="layui-form-label">渲染效果</label> <div class="layui-input-inline"> <input type="radio" name="ra" value="" title="男" lay-ignore="">男 <input type="radio" name="ra" value="" title="男"> </div> </div> <div class="layui-form-item layui-form-pane" > <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里面追加的效果
在表单追加的效果
2.10表单.html代码
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/html"> <head> <meta charset="UTF-8"> <title>表单元素</title> <link rel="stylesheet" type="text/css" href="layui/css/layui.css"> <script src="layui/layui.js" type="text/javascript" charset="utf-8"></script> </head> <body> <!-- 1.在一个容器中设定 class="layui-form" 来标识一个表单元素块 --> <form action="" class="layui-form"> <!-- 2.基本的行区块结构--> <div class="layui-form-item"> <label class="layui-form-label">标题</label> <!-- layui-input-block:表示占一整行，inline就不会占一整行--> <div class="layui-input-inline"> <!-- 文本框--> <input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input"> </div> </div> <!-- 下拉框: 1.lay-verify="required"也是会校验是否为空 2.通过selected属性设置默认选项(<option>标签中使用) 3.禁用下拉框: 添加属性 disabled(<select><option>标签中都可使用) 4.分组效果：通过 optgroup 标签给select分组 5.通过设置lay-search开启搜索功能 --> <div class="layui-form-item"> <label class="layui-form-label">城市</label> <div class="layui-input-inline"> <select name="city" lay-verify="required" > <option value="">请选择一个城市</option> <option value="010">北京</option> <option value="021" selected>上海</option> <option value="0571" disabled>杭州</option> </select> <!-- 分组效果：通过 optgroup 标签给select分组--> <select name="quiz"> <option value="">请选择</option> <optgroup label="城市记忆"> <option value="你工作的第一个城市">你工作的第一个城市？</option> </optgroup> <optgroup label="学生时代"> <option value="你的工号">你的工号？</option> <option value="你最喜欢的老师">你最喜欢的老师？</option> </optgroup> </select> <!-- 开启搜索匹配--> <select name="city" lay-verify="" lay-search> <option value="">请选择</option> <option value="010">layer</option> <option value="021">form</option> <option value="0571">layim</option> </select> </div> </div> <!-- 复选框 1.title属性设置自定义文本（不需要则不设置） 2.checked选中 3.lay-skin="parmary"更换为原始的复选框模式 4.value值为了后台人员能知道选中了什么元素 5.disabled值可以禁用元素 --> <!--基本的行区块结构--> <div class="layui-form-item"> <label class="layui-form-label">爱好</label> <div class="layui-input-block"> <!-- 默认复选框--> <input type="checkbox" name="hobby" title="唱歌" value="唱歌" checked> <input type="checkbox" name="hobby" title="跳舞" value="跳舞"> <input type="checkbox" name="hobby" title="弹琴" value="弹琴" disabled> <br> <!-- 原始效果--> <input type="checkbox" name="hobby" title="唱歌" lay-skin="primary" value="唱歌" checked> <input type="checkbox" name="hobby" title="跳舞" lay-skin="primary" value="跳舞"> <input type="checkbox" name="hobby" title="弹琴" lay-skin="primary" value="弹琴"> </div> </div> <!-- 开关： 只要把复选框加上一个属性即可lay-skin="switch" 1.默认打开checked 2.禁选：disabled 3.自定义，lay-text="打开的值|关闭的值"来设定开关两种状态的文本 4.通过value属性设置选中提交的值 --> <div class="layui-form-item"> <label class="layui-form-label">开关</label> <!-- layui-input-block:表示占一整行，inline就不会占一整行--> <div class="layui-input-block"> <!--开关：只要给复选框加上一个属性即可,checked表示默认打开--> <input type="checkbox" name="a" lay-skin="switch"> <input type="checkbox" name="b" lay-skin="switch" checked> <input type="checkbox" name="c" lay-skin="switch" checked lay-text="on|off"> <input type="checkbox" name="d" lay-skin="switch" checked lay-text="打开|关闭" value="打开"> <input type="checkbox" name="e" lay-skin="switch" lay-text="打开|关闭" disabled> </div> </div> <!-- 单选框 --> <div class="layui-form-item"> <label class="layui-form-label">单选框</label> <div class="layui-input-block"> <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> </div> </div> <!-- 文本域 <textarea name="" required lay-verify="required" placeholder="请输入" class="layui-textarea"></textarea> --> <div class="layui-form-item"> <label class="layui-form-label">简介</label> <div class="layui-input-inline"> <textarea name="" required lay-verify="required" placeholder="请输入" class="layui-textarea"></textarea> </div> </div> <!-- 组装行内表单： class="layui-inline"：定义外层行内 class="layui-input-inline"：定义内层行内 --> <div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-label">范围</label> <div class="layui-input-inline"> <input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input"> </div> <div class="layui-form-mid">-</div> <div class="layui-input-inline"> <input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-inline"> <label class="layui-form-label">密码</label> <div class="layui-input-inline"> <input type="password" name="pwd" placeholder="请输入密码" class="layui-input"> </div> </div> </div> <!-- 忽略美化渲染： 单元素增加属性 lay-ignore 设置后，将不会对该标签进行美化渲染，即保留系统风格 --> <div class="layui-form-item"> <label class="layui-form-label">简介</label> <div class="layui-input-inline"> <input type="radio" name="ra" value="" title="男" lay-ignore="">原始效果 <input type="radio" name="ra" value="" title="男"> </div> </div> <!-- 表单方框风格： layui-form-pane 的class，来设定表单的方框风格 --> <div class="layui-form-item"> <label class="layui-form-label">渲染效果</label> <div class="layui-input-inline"> <input type="radio" name="ra" value="" title="男" lay-ignore="">男 <input type="radio" name="ra" value="" title="男"> </div> </div> <div class="layui-form-item layui-form-pane" > <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"> <div class="layui-input-inline"> <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button> </div> </div> </form> <!--加载form模块--> <script type="text/javascript"> layui.use('form',function (){ var form = layui.form; }); </script> </body> </html>
浙公网安备 33010602011771号