乐趣区

LayUI入门基础篇2乐字节架构大数据

jiezi

根本元素

            
              如果须要更多材料点击下方图片加好友支付⬇（注明来意）
                   

按钮

用法

​ 向任意 HTML 元素设定 class=”layui-btn”，建设一个根底按钮。通过追加格局为layui-btn-{type} 的 class 来定义其它按钮格调。

<!-- 根底按钮 -->
<button type="button" class="layui-btn"> 一个规范的按钮 </button>
<a href="http://www.layui.com" class="layui-btn"> 一个可跳转的按钮 </a>
<div class="layui-btn"> 一个按钮 </div>
主题
名称 组合
原始 class=”layui-btn layui-btn-primary”
默认 class=”layui-btn”
百搭 class=”layui-btn layui-btn-normal”
寒色 class=”layui-btn layui-btn-warm”
正告 class=”layui-btn layui-btn-danger”
禁用 class=”layui-btn layui-btn-disabled”

示例：

<!-- 不同主题的按钮 -->
<button class="layui-btn"> 默认按钮 </button>
<button class="layui-btn layui-btn-primary"> 原始按钮 </button> 
<button class="layui-btn layui-btn-normal"> 百搭按钮 </button>
<button class="layui-btn layui-btn-warm"> 寒色按钮 </button>
<button class="layui-btn layui-btn-danger"> 正告按钮 </button>
<button class="layui-btn layui-btn-disabled"> 禁用按钮 </button>
尺寸
尺寸 组合
大型 class=”layui-btn layui-btn-lg”
默认 class=”layui-btn”
小型 class=”layui-btn layui-btn-sm”
迷你 class=”layui-btn layui-btn-xs” 
<!-- 不同尺寸的按钮 -->
<button class="layui-btn layui-btn-primary layui-btn-lg"> 大型 </button> 
<button class="layui-btn"> 默认 </button>
<button class="layui-btn layui-btn-sm layui-btn-danger"> 小型 </button>
<button class="layui-btn layui-btn-xs"> 迷你 </button>
圆角

layui-btn-radius

<button class="layui-btn layui-btn-radius"> 默认按钮 </button>
<button class="layui-btn layui-btn-primary layui-btn-radius"> 原始按钮 </button> 
<button class="layui-btn layui-btn-normal layui-btn-radius"> 百搭按钮 </button>
<button class="layui-btn layui-btn-warm layui-btn-radius"> 寒色按钮 </button>
<button class="layui-btn layui-btn-danger layui-btn-radius"> 正告按钮 </button>
<button class="layui-btn layui-btn-disabled layui-btn-radius"> 禁用按钮 </button>
图标
<button type="button" class="layui-btn">
    <i class="layui-icon">&#xe608;</i> 增加
</button>

<button type="button" class="layui-btn layui-btn-sm layui-btn-primary">
    <i class="layui-icon">&#x1002;</i> 刷新
</button>

导航

​ 导航个别指页面引导性频道汇合，多以菜单的模式出现，可利用于头部和侧边。面包屑构造简略，反对自定义分隔符。

​ <font color=”red”> 依赖加载模块：element</font>

实现步骤：

  1. 引入的资源

    <link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>

  2. 依赖加载模块

    <script type="text/javascript">
    // 留神：导航 依赖 element 模块，否则无奈进行功能性操作
    layui.use('element', function(){var element = layui.element;});
</script>
  3. 显示指定类型的导航
程度导航
<ul class="layui-nav">
    <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>
垂直 / 侧边导航
<ul class="layui-nav layui-nav-tree" >
<!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
  <li class="layui-nav-item layui-nav-itemed">
    <a href="javascript:;"> 默认开展 </a>
    <dl class="layui-nav-child">
      <dd><a href="javascript:;"> 选项 1 </a></dd>
      <dd><a href="javascript:;"> 选项 2 </a></dd>
      <dd><a href=""> 跳转 </a></dd>
    </dl>
  </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>
  <li class="layui-nav-item"><a href=""> 大数据 </a></li>
</ul>

程度、垂直、侧边三个导航的 HTML 构造是齐全一样的，不同的是：

程度导航：layui-nav
垂直导航须要追加 class：layui-nav-tree
侧边导航须要追加 class：layui-nav-tree layui-nav-side
导航主题

​ 通过对导航追加 CSS 背景类，让导航出现不同的主题色

<!-- 如定义一个墨绿背景色的导航 -->
<ul class="layui-nav layui-bg-move" >
  …
</ul>

程度导航反对的其它背景主题有：layui-bg-cyan（藏青）、layui-bg-molv（墨绿）、layui-bg-blue（艳蓝）
垂直导航反对的其它背景主题有：layui-bg-cyan（藏青）

面包屑
<span class="layui-breadcrumb">
  <a href=""> 首页 </a>
  <a href=""> 国内新闻 </a>
  <a href=""> 亚太地区 </a>
  <a><cite> 注释 </cite></a>
</span>

你还能够通过设置属性 lay-separator=”” 来自定义分隔符。例如：

<span class="layui-breadcrumb" lay-separator="-">
  <a href=""> 首页 </a>
  <a href=""> 国内新闻 </a>
  <a href=""> 亚太地区 </a>
  <a><cite> 注释 </cite></a>
</span>

选项卡

​ 导航菜单可利用于头部和侧边，反对响应式，反对删除选项卡等性能。

​ <font color=”red”> 依赖加载模块：element</font>

实现步骤

  1. 引入的资源

    <link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>

  2. 依赖加载模块

    <script type="text/javascript">
    // 留神：选项卡 依赖 element 模块，否则无奈进行功能性操作
    layui.use('element', function(){var element = layui.element;});
</script>

  3. 加载 HTML

    <div class="layui-tab">
  <ul class="layui-tab-title">
    <li class="layui-this"> 网站设置 </li>
    <li> 用户治理 </li>
    <li> 权限调配 </li>
    <li> 商品治理 </li>
    <li> 订单治理 </li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show"> 内容 1 </div>
    <div class="layui-tab-item"> 内容 2 </div>
    <div class="layui-tab-item"> 内容 3 </div>
    <div class="layui-tab-item"> 内容 4 </div>
    <div class="layui-tab-item"> 内容 5 </div>
  </div>
</div>
选项卡格调
默认格调：layui-tab
简洁格调须要追加 class：layui-tab-brief
卡片格调须要追加 class：layui-tab-card
带删除的选项卡

能够对父层容器设置属性 lay-allowClose=”true” 来容许 Tab 选项卡被删除

<div class="layui-tab" lay-allowClose="true">
  <ul class="layui-tab-title">
    <li class="layui-this"> 网站设置 </li>
    <li> 用户治理 </li>
    <li> 权限调配 </li>
    <li> 商品治理 </li>
    <li> 订单治理 </li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show"> 内容 1 </div>
    <div class="layui-tab-item"> 内容 2 </div>
    <div class="layui-tab-item"> 内容 3 </div>
    <div class="layui-tab-item"> 内容 4 </div>
    <div class="layui-tab-item"> 内容 5 </div>
  </div>
</div>

表格

惯例用法
<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>
根底属性
属性名 属性值 备注
lay-even 无 用于开启 隔行 背景，可与其它属性一起应用
lay-skin=” 属性值 ” line（行边框格调）
row（列边框格调）
nob（无边框格调）		 若应用默认格调不设置该属性即可
lay-size=” 属性值 ” sm（小尺寸）
lg（大尺寸）		 若应用默认尺寸不设置该属性即可

你所须要的根底属性写在 table 标签上，例如：

<!-- 一个带有隔行背景，且行边框格调的大尺寸表格 -->
<table class="layui-table" lay-even lay-size="lg" lay-skin="row">
  <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>

表单

​ <font color=”red”> 依赖加载模块：form </font>

  1. 在一个容器中设定 class=”layui-form” 来标识一个表单元素块

    <form class="layui-form" action="">
    
</form>

  2. 根本的行区块构造，它提供了响应式的反对。能够换成其余构造，但必须要在外层容器中定义class=”layui-form”，form 模块能力失常工作。

    <div class="layui-form-item">
      <label class="layui-form-label"> 标签区域 </label>
      <div class="layui-input-block">
        原始表单元素区域
      </div>
</div>
输入框
<input type="text" name="title" required lay-verify="required" placeholder="请输出题目" autocomplete="off" class="layui-input" />
  • required：注册浏览器所规定的必填字段
  • lay-verify：注册 form 模块须要验证的类型
  • class=”layui-input”：layui.css 提供的通用 CSS 类
下拉抉择框
<select name="city" lay-verify="">
  <option value=""> 请抉择一个城市 </option>
  <option value="010"> 北京 </option>
  <option value="021"> 上海 </option>
  <option value="0571"> 杭州 </option>
</select>
  • 属性 selected 可设定默认项
  • 属性 disabled 开启禁用，select 和 option 标签都反对
<select name="city" lay-verify="">
  <option value="010"> 北京 </option>
  <option value="021" disabled> 上海（禁用成果）</option>
  <option value="0571" selected> 杭州 </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>
  • 通过设定属性 lay-search 来开启搜寻匹配性能
<select name="city" lay-verify="" lay-search>
  <option value="010">layer</option>
  <option value="021">form</option>
  <option value="0571" selected>layim</option>
</select>
复选框
<h2> 默认格调：</h2>
<input type="checkbox" name=""title=" 写作 " checked>
<input type="checkbox" name=""title=" 发愣 "> 
<input type="checkbox" name=""title=" 禁用 " disabled> 
 
<h2> 原始格调：</h2>
<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>
  • 属性 title 可自定义文本（舒适提醒：如果只想显示复选框，能够不必设置 title）
  • 属性 checked 可设定默认选中
  • 属性 lay-skin 可设置复选框的格调（原始格调：lay-skin=”primary”）
  • 设置 value=”1″ 可自定义值，否则选中时返回的就是默认的 on
开关

将复选框 checkbox，通过设定 lay-skin=”switch” 造成了开关格调

<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>
  • 属性 checked 可设定默认开
  • 属性 disabled 开启禁用
  • 属性 lay-text 可自定义开关两种状态的文本（两种文本用 “|” 隔开）
  • 设置 value=”1″ 可自定义值，否则选中时返回的就是默认的 on
单选框
<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>
  • 属性 title 可自定义文本
  • 属性 disabled 开启禁用
  • 设置 value=”xxx” 可自定义值，否则选中时返回的就是默认的 on
文本域
<textarea name="remark" required lay-verify="required" placeholder="请输出集体介绍" class="layui-textarea"></textarea>
  • class=”layui-textarea”：layui.css 提供的通用 CSS 类
组装行内表单
<div class="layui-form-item">
    <div class="layui-inline">
        <label class="layui-form-label"> 范畴 </label>
        <div class="layui-input-inline" style="width: 100px;">
          <input type="text" name="price_min" placeholder="￥" 
                 autocomplete="off" class="layui-input">
        </div>
        <div class="layui-form-mid">-</div>
        <div class="layui-input-inline" style="width: 100px;">
          <input type="text" name="price_max" placeholder="￥" 
                 autocomplete="off" class="layui-input">
        </div>
    </div>
</div>
  • class=”layui-inline”：定义外层行内
  • class=”layui-input-inline”：定义内层行内
疏忽丑化渲染

​ 能够对表单元素减少属性 lay-ignore 设置后，将不会对该标签进行丑化渲染，即保留零碎格调。

<input type="radio" name="sex" value="nan" title="男" lay-ignore>
表单方框格调

​ 通过追加 layui-form-pane 的 class，来设定表单的方框格调。

<form class="layui-form layui-form-pane" action="">
  <!-- 
        内部结构都一样，值得注意的是 复选框 / 开关 / 单选框 这些组合在该格调下须要额定增加 pane 属性（否则        会看起来比拟顺当），如：-->
  <div class="layui-form-item" 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>
</form>
退出移动版