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

基本元素

            
              如果需要更多资料点击下方图片加好友领取⬇（注明来意）
                   

按钮

用法

​ 向任意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>

导航

​ 导航一般指页面引导性频道集合，多以菜单的形式呈现，可应用于头部和侧边。面包屑结构简单，支持自定义分隔符。

​ 依赖加载模块：element

实现步骤：

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>

选项卡

​ 导航菜单可应用于头部和侧边，支持响应式，支持删除选项卡等功能。

​ 依赖加载模块：element

实现步骤

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>

表单

​ 依赖加载模块：form

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=" 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=" 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>