layUI 学习记录

1 点击导航栏跳转页面

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><title>layout 后台大布局 - Layui</title><link rel="stylesheet" href="/css/layui.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin"><div class="layui-header"><div class="layui-logo">发送短信后台</div></div><div class="layui-side layui-bg-black"><div class="layui-side-scroll"><!-- 左侧导航区域（可配合layui已有的垂直导航） --><ul class="layui-nav layui-nav-tree"  lay-filter="test"><li class="layui-nav-item layui-nav-itemed"><a class="" href="javascript:;">发送短信</a><dl class="layui-nav-child"><dd><a href="javascript:;" data-id="1" data-title="发短信" data-url="sentMessage.html" class="site-demo-active" data-type="tabAdd">发短信</a></dd><dd><a href="javascript:;" data-id="2" data-title="已发列表" data-url="" class="site-demo-active" data-type="tabAdd">已发列表</a></dd></dl></li></ul></div></div><!-- <div class="layui-body">内容主体区域<div style="padding: 15px;"></div></div> --><!--tab标签--><div class="layui-tab" lay-filter="demo" lay-allowclose="true" style="margin-left: 200px;"><ul class="layui-tab-title"></ul><div class="layui-tab-content"></div></div><div class="layui-footer"><!-- 底部固定区域 -->© layui.com - 校园服务</div>
</div>
<script src="/layui.js"></script>
<script>
//JavaScript代码区域
/* layui.use('element', function(){var element = layui.element;}); */layui.use(['element', 'layer', 'jquery'], function () {var element = layui.element;// var layer = layui.layer;var $ = layui.$;// 配置tab实践在下面无法获取到菜单元素$('.site-demo-active').on('click', function () {var dataid = $(this);//这时会判断右侧.layui-tab-title属性下的有lay-id属性的li的数目，即已经打开的tab项数目if ($(".layui-tab-title li[lay-id]").length <= 0) {//如果比零小，则直接打开新的tab项active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));} else {//否则判断该tab项是否以及存在var isData = false; //初始化一个标志，为false说明未打开该tab项 为true则说明已有$.each($(".layui-tab-title li[lay-id]"), function () {//如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到，则说明该tab项已经打开if ($(this).attr("lay-id") == dataid.attr("data-id")) {isData = true;}})if (isData == false) {//标志为false 新增一个tab项active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));}}//最后不管是否新增tab，最后都转到要打开的选项页面上active.tabChange(dataid.attr("data-id"));});var active = {//在这里给active绑定几项事件，后面可通过active调用这些事件tabAdd: function (url, id, name) {//新增一个Tab项 传入三个参数，分别对应其标题，tab页面的地址，还有一个规定的id，是标签中data-id的属性值//关于tabAdd的方法所传入的参数可看layui的开发文档中基础方法部分element.tabAdd('demo', {title: name,content: '<iframe data-frameid="' + id + '" scrolling="auto" frameborder="0" src="' + url + '" style="width:100%;height:99%;"></iframe>',id: id //规定好的id})FrameWH();  //计算ifram层的大小},tabChange: function (id) {//切换到指定Tab项element.tabChange('demo', id); //根据传入的id传入到指定的tab项},tabDelete: function (id) {element.tabDelete("demo", id);//删除}};function FrameWH() {var h = $(window).height();$("iframe").css("height",h+"px");}
});</script>
</body>
</html>

参考资料：

载入外部页面的三种方式

参考二

layUI 学习记录相关推荐

微信小程序开发学习记录（一）：直播功能
微信小程序直播是最近上线的一个新功能,用了将近一天半的时间实现了用直播API去创建直播间,中间踩了很多坑(有的到现在也不是很明白为啥这样就可以那样就不行),网上有关直播功能的参考文章也比较少,所以这 ...
菜鸟的layui学习总结
菜鸟的layui学习总结说明一.概述 (1)layui说明 (2)layui引用二.图标(icon) 二.按钮(button) 三.导航栏(nav) 四.选型卡(tab) 五.进度条(progr ...
不逼自己一把都不知道自己还能这么优秀(小鹅通学习记录大批量队列同步)
不逼自己一把都不知道自己还能这么优秀-小鹅通学习记录大批量队列同步实战日志前言一.编程语言介绍 1.php是世界上最好的语言 2.第三方API对接的苦恼 3.为什么说好的项目进度表都是画饼二.炫 ...
Pytorch学习记录-torchtext和Pytorch的实例（使用神经网络训练Seq2Seq代码）
Pytorch学习记录-torchtext和Pytorch的实例1 0. PyTorch Seq2Seq项目介绍 1. 使用神经网络训练Seq2Seq 1.1 简介,对论文中公式的解读 1.2 数据预 ...
HTML5与CSS3权威指南之CSS3学习记录
title: HTML5与CSS3权威指南之CSS3学习记录 toc: true date: 2018-10-14 00:06:09 学习资料--<HTML5与CSS3权威指南>(第3版) ...
springboot @cacheable不起作用_Springboot学习记录13 使用缓存：整合redis
本学习记录的代码,部分参考自gitee码云的如下工程.这个工程有详尽的Spingboot1.x教程.鸣谢! https://gitee.com/didispace/SpringBoot-Learnin ...
【Cmake】Cmake学习记录
Cmake学习记录 1.1 常例 add_library(gen_reference_infogen_reference_info/gen_reference_info.hgen_reference_ ...
ASP.NETCore学习记录(一)
ASP.NETCore学习记录(一) asp.net core介绍 Startup.cs ConfigureServices Configure 0. ASP.NETCore 介绍 ASP.N ...
Android开发技术周报176学习记录
Android开发技术周报176学习记录教程当 OkHttp 遇上 Http 2.0 http://fucknmb.com/2018/04/16/%E5%BD%93OkHttp%E9%81%87% ...

layUI 学习记录

1 点击导航栏跳转页面

layUI 学习记录相关推荐

最新文章

热门文章