layui模块化_layui.config({ base-程序员宅基地

技术标签: JavaScript  

全局配置

layui.config({
  base: './res/modules/' //你存放新模块的目录,注意,不是layui的模块目录
})

定义模块(导出模块)

layui.define(function(exports){
  
	let a = 1;
	function b(str){
		alert(str + 'world')
	}
	exports('index', {
	  a,
	  b
	}); //注意,这里是模块输出的核心,模块名必须和use时的模块名一致
});   

使用模块

layui.use('index',function(){
	let index = layui.index
	index.b('hello')
}); 

layui整个后台的组织代码

 
 
<!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>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="format-detection" content="telephone=no">
  
  <link rel="stylesheet" href="./layui/css/layui.css"  media="all">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo">layui 后台布局</div>
    <!-- 头部区域(可配合layui已有的水平导航) -->
    <ul class="layui-nav layui-layout-left">
      <li class="layui-nav-item"><a href="">控制台</a></li>
      <li class="layui-nav-item"><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>
    </ul>
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item">
        <a href="javascript:;">
          <img src="" class="layui-nav-img">
          贤心
        </a>
        <dl class="layui-nav-child">
          <dd><a href="">基本资料</a></dd>
          <dd><a href="">安全设置</a></dd>
        </dl>
      </li>
      <li class="layui-nav-item"><a href="">退了</a></li>
    </ul>
  </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="./2.html">列表一</a></dd>
            <dd><a href="javascript:;">列表二</a></dd>
            <dd><a href="javascript:;">列表三</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="javascript:;">列表一</a></dd>
            <dd><a href="javascript:;">列表二</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>
    </div>
  </div>
  
  <div class="layui-body">
    <!-- 内容主体区域 -->
    <iframe id="iframeMain" src="" style="width: 100%"; height="100%";></iframe>
  </div>
  
  <div class="layui-footer">
    <!-- 底部固定区域 -->
     layui.com - 底部固定区域
  </div>
</div>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="./layui/layui.js" charset="utf-8"></script>
<script>
//JavaScript代码区域
layui.use(['element','jquery'], function(){
  var element = layui.element;
  
});
</script>
<script>
var _hmt = _hmt || [];


 $(document).ready(function(){
       $("a").click(function (e) {
            e.preventDefault();
            $("#iframeMain").attr("src",$(this).attr("href"));
        });
    });


</script>
</body>
</html>

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Yun__shen/article/details/102312043

智能推荐

kuka机器人计算机单元有几部分组成,详解KUKA机器人系统原理与结构-程序员宅基地

文章浏览阅读1.3k次。1 系统原理与结构系统由机械手、CCD 视觉传感器和超声波传感器及相应的信号处理单元等构成. CCD 安装在机械手末端执行器上,构成手眼视觉,超声波传感器的接收和发送探头也固定在机器人末端执行器上,由CCD 获取待识别和抓取物体的二维图像,并引导超声波传感器获取深度信息. 系统结构如图1 所示.图像处理主要完成对物体外形的准确描述,包括以下几个步骤:a. 图像边缘提取;b. 周线跟踪;c. 特征点..._kuka500机器人的结构组成和工作原理

第四十八节 Linux系统编程-网络通信-套接字UDP(二)_嵌入式linux网络通信udp套接字通信-程序员宅基地

文章浏览阅读231次。-------------------------------------资源来源于网络,仅供自学使用,如有侵权,联系我必删.第一:实战 网络通信-套接字 UDP1)UDP是用户数据报协议,它是一种无连接的传输层协议,提供面向事物的简单不可靠信息传送服务,所以在一些网络质量不满意的环境下,UDP 协议数据包丢失会比较严重,会造成数据的丢失。2)UDP 的特点是它不属于连接型协议,所以..._嵌入式linux网络通信udp套接字通信

SpringMVC与Freemark整合,多视图完美展示详细完美解决_ftl文件视图化-程序员宅基地

文章浏览阅读6.7k次,点赞2次,收藏7次。在霍金与他的伙伴出的新书中有这么一个故事: 金鱼生活在盛满水的圆形缸体中,金鱼看到的外部世界是扭曲的图景。它获得的真实世界的图景也许和我们的不同,但我们如何知道我们的图景就是正确的呢?我们很可能处在一个巨大的金鱼缸中。真实世界的图景不是唯一的,金鱼眼中看到的,和人类眼中看到的,同样有效。 最近换了份工作,这边的开发环境是2个java,一个UI设计,一个安卓_ftl文件视图化

如何实现全局弹窗组件____(this.$notice({}))__that.$notice-程序员宅基地

文章浏览阅读1.4k次。如何实现全局弹窗组件____(this.$notice({}))弹窗这类组件的特点是它们在当前vue实例之外独⽴存在,通常挂载于body;它们是通过JS动态创建的,不需要在任何组件中声明。常⻅使⽤姿势: submitFrom() { this.$refs.loginItem.validate((isValid) => { console.log(isValid); this.$notice({ title: "提示信息", __that.$notice

大数据发展必备三个条件_大数据发展依赖于什么-程序员宅基地

文章浏览阅读1.8k次。大数据概念的横空出世,有赖于短短几年出现的海量数据。据统计,互联网上的数据每两年翻一番,而目前世界上90%以上的数据大数据概念的横空出世,有赖于短短几年出现的海量数据。据统计,互联网上的数据每两年翻一番,而目前世界上90%以上的数据都是最近几年才产生的。当然,海量数据仅仅是“大数据”概念的一部分,只有具备4个“V”的特征,大数据的定义才算完整,而价值恰恰是决定大数据未来走向的关键。..._大数据发展依赖于什么

eclipse搭建maven环境的过程_maven unable to parse global settings-程序员宅基地

文章浏览阅读659次。首先认清Maven在管理项目中的作用MAVEN是优秀的构建工具,但不仅仅是构建,还有:1.版本2.构建3.输出管理物4.依赖关系5.文档和构建结果6.项目关系7.移植性进入正题,如何搭建MAVEN环境了,步骤如下,分为1,2,3...第1步 安装JDK:Maven依赖java的jdk,首先得搭配JDK环境,这个不用说。C:\Users\Admin_maven unable to parse global settings

随便推点

十八、Flink源码阅读--JobManager启动过程_--executionmode cluster-程序员宅基地

文章浏览阅读1.2k次。本文我们详细看下Jm的启动步骤,主要看下stand-alone模式下Jm的启动,在关键步骤是穿插on-yarn模式的说明入口分析从flink安装包的bin/start-cluster.sh分析开始,会发现Jm的主类org.apache.flink.runtime.entrypoint.StandaloneSessionClusterEntrypoint,tm的主类是org.apache...._--executionmode cluster

SpringBoot2+SpringSecurity整合JWT,前后端分离的API权限认证框架搭建手册_springboot jwt 前后端分离-程序员宅基地

文章浏览阅读2.2w次,点赞27次,收藏186次。前言之前又用到JWT,但是基本都是别人搭建,直接使用,有什么可以优化的,也不知道,所以还是要自己实践一遍,实践才能出真理。也看到很多整合的文章,有些说的细致但是版本太旧了,有些说的不够详细,而且细节也挺多的,纸上得来终觉浅,绝知此事要躬行,所以自己动手实践了一下。本文应该有很多中叫法的,可以叫:springboot + spring security + jwt 实现api权限控制基于S..._springboot jwt 前后端分离

linux系统下如何获取进程和系统的cpu占用率_查看某个进程的cpu占用-程序员宅基地

文章浏览阅读1.6k次,点赞2次,收藏11次。在开发SDK的过程中,需要收集进程和系统相关的负载信息。其中,CPU占用率是一个非常关键的指标。在早期阶段,我们使用管道方式获取top命令返回结果。但后来发现在线上存在一些异常情况,即上报的CPU占用率为0。考虑到top命令会带来较大的开销,并且管道使用不当容易出现问题,最终我们采用了proc文件系统方式获取CPU占用率。_查看某个进程的cpu占用

调停者模式_网络范式中的调停者-程序员宅基地

文章浏览阅读199次。调停者模式定义:用一个中介对象来封装一系列的对象交互。中介者使各对象不需要显式地相互引用,从而使其耦合松散,而且可以独立地改变它们之间的交互。将网状调用关系变成星调用关系。将多对多的关系化解成一对多的关系。类图:源代码:/** * 职员接口 */abstract class Employee { String name; private Mediator mediator;..._网络范式中的调停者

JS 分页打印_js打印表格在一页显示-程序员宅基地

文章浏览阅读1.3k次。在调用window.print()时,可以实现打印效果,但内容太多时要进行分页打印。在样式中有规定几个打印的样式page-break-before和page-break-afterCSS属性并不会修改网页在屏幕上的显示,这两个属性是用来控制文件的打印方式。每个打印属性都可以设定4种设定值:auto、always、left和right。其中Auto是默认值,只有在有需要时,才需设定分页符号 (Pa..._js打印表格在一页显示

XXL-JOB原理--任务调度中心任务管理(四)_triggerkey triggerkey = triggerkey.triggerkey(jobn-程序员宅基地

文章浏览阅读2.1w次,点赞3次,收藏32次。 在任务调度中心可以进行新建任务,新建任务之后可以在任务列表中查看相关任务,任务可以根据我们配置的cron表达式进行任务调度,或者也可以在任务列表中执行、暂停、删除和查看相关运行日志等操作。一、任务调度中心管理1、新建任务、2、任务列表任务操作二、任务创建与操作 我们了解到xxl-job是基于quartz来实现定时任务的(其实任务调度中心任务执行..._triggerkey triggerkey = triggerkey.triggerkey(jobname, jobgroup)

推荐文章

热门文章

相关标签