layui学习2（按钮、导航、选项卡）
1.按钮
<button type="button" class="layui-btn">一个标准的按钮</button> <a href="http://www.ilayuis.com" class="layui-btn">一个可跳转的按钮</a> <div class="layui-btn">div标签加按钮样式</div> <hr> <button class="layui-btn layui-btn-normal">百搭按钮</button>
按钮 - 页面元素 - Layui (ilayuis.com)
2.导航
需要加载导航模块，也需要引入核心的js文件
导航依赖element模块
<script type="text/javascript"> //导航依赖element模块 layui.use('element',function(){ var element = layui.element; }); </script>
2.1 水平导航
水平导航： layui-nav
layui-item:表示导航项
layui-this:表示选中
layui-nav-child:表示二级菜单
<ul class="layui-nav" > <li class="layui-nav-item"><a href="">最新活动</a> </li> <!-- layui-this 表示选中--> <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="">解决方案</a> <!-- 二级菜单用dl表示--> <dl class="layui-nav-child"> <dd><a href="">移动模块</a> </dd> <dd><a href="">后台模块</a> </dd> <dd><a href="">电商平台</a> </dd> </dl> </li> </ul>
2.2垂直导航
就是在水平导航基础上再加一条：layui-nav layui-nav-tree
2.3侧边导航
再垂直基础上再加一条： layui-nav layui-nav-tree layui-nav-side
2.4颜色
通过 layui-bg-black 来设置
2.5添加徽章效果
直接在对应位置添加即可
2.6面包屑导航
面包屑导航：
cite标签是表示被选中的
lay-separator属性是用来自定义分隔符的
<span class="layui-breadcrumb" lay-separator="-"> <a href="">首页</a> <a href="">国际新闻</a> <a href="">亚太地区</a> <a><cite>正文</cite></a> </span>
导航.html
<!DOCTYPE html> <html lang="en"> <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> <!-- 水平导航： layui-nav layui-item:表示导航项 layui-this:表示选中 layui-nav-child:表示二级菜单 --> <ul class="layui-nav layui-bg-black" > <li class="layui-nav-item"><a href="">最新活动 <span class="layui-badge">9</span> </a> </li> <!-- layui-this 表示选中--> <li class="layui-nav-item layui-this"><a href="">产品 <span class="layui-badge-dot"></span> </a></li> <li class="layui-nav-item"><a href="">大数据</a> </li> <!-- 二级菜单--> <li class="layui-nav-item"> <a href="">解决方案</a> <!-- 二级菜单用dl表示--> <dl class="layui-nav-child"> <dd><a href="">移动模块</a> </dd> <dd><a href="">后台模块</a> </dd> <dd><a href="">电商平台</a> </dd> </dl> </li> </ul> <!-- 面包屑导航 cite标签是表示被选中的 lay-separator属性是用来自定义分隔符的 --> <!-- <span class="layui-breadcrumb" lay-separator="-">--> <!-- <a href="">首页</a>--> <!-- <a href="">国际新闻</a>--> <!-- <a href="">亚太地区</a>--> <!-- <a><cite>正文</cite></a>--> <!-- </span>--> <!-- 垂直导航 layui-nav layui-nav-tree --> <!--<ul class="layui-nav layui-nav-tree" >--> <!-- <li class="layui-nav-item"><a href="">最新活动</a> </li>--> <!-- <!– layui-this 表示选中–>--> <!-- <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="">解决方案</a>--> <!-- <!– 二级菜单用dl表示–>--> <!-- <dl class="layui-nav-child">--> <!-- <dd><a href="">移动模块</a> </dd>--> <!-- <dd><a href="">后台模块</a> </dd>--> <!-- <dd><a href="">电商平台</a> </dd>--> <!-- </dl>--> <!-- </li>--> <!--</ul>--> <!-- 侧边导航 layui-nav layui-nav-tree layui-nav-side --> <!--<ul class="layui-nav layui-nav-tree layui-nav-side" >--> <!-- <li class="layui-nav-item"><a href="">最新活动</a> </li>--> <!-- <!– layui-this 表示选中–>--> <!-- <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="">解决方案</a>--> <!-- <!– 二级菜单用dl表示–>--> <!-- <dl class="layui-nav-child">--> <!-- <dd><a href="">移动模块</a> </dd>--> <!-- <dd><a href="">后台模块</a> </dd>--> <!-- <dd><a href="">电商平台</a> </dd>--> <!-- </dl>--> <!-- </li>--> <!--</ul>--> <script type="text/javascript"> //导航依赖element模块 layui.use('element',function(){ var element = layui.element; }) </script> </body> </html>
3.选项卡
也是需要加载element模块
选项卡
layui-tab-brief 来设定简洁风格。
layui-tab-card 来设定卡片风格.
带删除的选项卡:对父层容器设置属性 lay-allowClose="true" 来允许Tab选项卡被删除
<!DOCTYPE html> <html lang="en"> <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> <!-- 选项卡 layui-tab-brief 来设定简洁风格。 layui-tab-card 来设定卡片风格. 带删除的选项卡:对父层容器设置属性 lay-allowClose="true" 来允许Tab选项卡被删除 --> <h2>默认选项卡</h2> <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> <hr> <h2>简洁风格选项卡</h2> <!--追加 layui-tab-brief--> <div class="layui-tab layui-tab-brief"> <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> <hr> <h2>卡片风格选项卡</h2> <!--追加layui-tab-card来设定卡片风格--> <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"> <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> <hr> <h2>带删除的选项卡</h2> <!--对父层容器设置属性 lay-allowClose="true" 来允许Tab选项卡被删除--> <div class="layui-tab layui-tab-card " 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> <script type="text/javascript"> layui.use('element',function (){ var element = layui.element; }); </script> </body> </html>
浙公网安备 33010602011771号