layUi 03 （之动态选项卡&iframe使用）

 

目录

一、tab选项卡

1.什么是Tab选项卡

2.Tab分类

2.1 Tab简约风格

2.2 Tab卡片风格

2.3 响应式Tab

2.4 带删除的Tab 

2.5 动态Tab 

二、iframe使用

三、登录功能实现

dao层

Jsp界面 

js代码

---

一、tab选项卡

1.什么是Tab选项卡

Tab广泛应用于Web页面，因此我们也对其进行了良好的支持（简约风格、卡片风格、响应式Tab以及带删除的Tab等等）。Layui内置多种Tab风格，支持删除选项卡、并提供响应式支持。 

2.Tab分类 

2.1 Tab简约风格

 <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
      <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>
    </div>  

2.2 Tab卡片风格

   <div class="layui-tab layui-tab-card">
      <ul class="layui-tab-title">
        <li class="layui-this">网站设置</li>
        <li>用户管理</li>
        <li>权限分配</li>
        <li>商品管理</li>
        <li>订单管理</li>
      </ul>
      <div class="layui-tab-content" style="height: 100px;">
        <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 class="layui-tab-item">6</div>
      </div>
    </div>

2.3 响应式Tab

 当容器的宽度不足以显示全部的选项时，即会自动出现展开图标。 

2.4 带删除的Tab 

与默认相比没有什么特别的结构，就是多了个属性 lay-allowClose="true"

  <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 class="layui-tab-item">6</div>
      </div>
    </div>

2.5 动态Tab 

1）根据模块名称判断是否已经存在tab选项卡

$(".layui-tab-title li[lay-id='"