layui模块化_苗泽云的博客-程序员秘密

技术标签: 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

智能推荐

写一函数,求一个字符串的长度。在main函数中输入字符串,并输出其长度。_写一个函数求一个字符串的长度,在main_月已满西楼的博客-程序员秘密

写一函数,求一个字符串的长度。在main函数中输入字符串,并输出其长度。解题思路: 字符串以\0作为结尾,则从第一个字符开始向后移动遇到\0认为字符串结束。答案:#include &lt;stdio.h&gt;int mystrlen(char *str){ int len = 0; char *ptr = str; while (*ptr != '\0') { ptr++; len++; } return len;}int main(){ char buf[1024];

初窥门径定时任务:QuartzJobBean_quartzjobbean怎么用_神雕大侠mu的博客-程序员秘密

定时任务:QuartzJobBean以我做天气预报项目为例概述定时任务的使用:第一步:写一个要定时执行的任务的类,让他继承QuartzJobBean (类上不加@component)package com.sinux.weather.controller;import com.sinux.weather.entity.City;import com.sinux.weather.serv...

spring boot实战之集成spring-boot-devtools_spring-boot-devtools集成_crayon-shin-chan的博客-程序员秘密

1.简介Spring Boot包括一组额外的工具,这些工具可以使应用程序开发体验更加愉快。spring-boot-devtools模块可以包含在任何项目中,以提供其他开发时功能。要包括devtools支持,请将模块依赖项添加到您的构建中&lt;dependencies&gt; &lt;dependency&gt; &lt;groupId&gt;org.springframework.boot&lt;/groupId&gt; &lt;artifactId&gt;spring-boo

第11天 | Seaborn数据分析,条形图,让数据一目了然_老陈说编程的博客-程序员秘密

条形图barplot,主要展现的是每个矩形高度的数值变量的中心趋势的估计。它只显示平均值或其他估计值,以矩形条的方式展示数据的点估值和置信区间,用每个矩形的高度来表示数值变量的集中趋势的估计值,并提供误差条来显示估计值得不确定度。条形图的纵轴是从零开始的,这对于0值是有意义的情况是非常好的。它的语法为:barplot(*, x=None, y=None, hue=None, data=None, order=None, hue_order=None,estimator=np.mean,

bcrypt加密工具_艾瑞莉娅_的博客-程序员秘密

简介:bcrypt是一种跨平台的文件加密工具。Bcrypt就是一款加密工具,可以比较方便地实现数据的加密工作。你也可以简单理解为它内部自己实现了随机加盐处理例如,我们使用MD5加密,每次加密后的密文其实都是一样的,这样就方便了MD5通过大数据的方式进行破解。Bcrypt生成的密文是60位的。而MD5的是32位的。使用BCrypt 主要是能实现每次加密的值都是不一样的。maven依赖:&lt;dependency&gt; &lt;groupId&gt;org.springframework

随便推点

NVIDIA Jetson Tx2部署ORB -SLAM2并进行测试_tx2部署slam_fzu_zhengbinchen的博客-程序员秘密

教程搬运工并实际测试一、ROS安装和ORB-SLAM2安装教程https://www.it610.com/article/1293425974813204480.htm备注:安装ROS中间可能会出现一些error,这些很可能就是网络的问题,重新进行按照操作即可,然后就是等待安装成功。二、ORB-SLAM2安装测试1.RGB-D实例******准备数据************1)下载TUM数据集从下面这个链接https://vision.in.tum.de/data/dat..

Ubantu 16.04 用apt-get自动安装oracle java_ppp8300885的博客-程序员秘密

每次安装都要查一遍,索性记录一下。首先执行:sudo apt-get install python-software-propertiessudo add-apt-repository ppa:webupd8team/javasudo apt-get update对于需要的java版本,继续执行:Oracle JDK 6: sudo apt-get install oracle-java6-i

都2022年了,不会实现接口自动化测试的你确定不来看看..._测试界的彭于晏的博客-程序员秘密

最近接到一个接口自动化测试的case,并展开了一些调研工作,最后发现,使用pytest测试框架并以数据驱动的方式执行测试用例,可以很好的实现自动化测试。这种方式最大的优点在于后续进行用例维护的时候对已有的测试脚本影响很小。当然,pytest还有以下其他优点:相比较其它的测试框架,比如Robot Framework(在创建自定义的HTML报告方面比较繁琐,顶多能用来生成xUnit格式的简短报告)、UniteTest/PyUnit(需要大量的样板代码),pytest更适合作为本次自动化测试的框架。下面为大家详细

五十六中华民族_kenny_yangzhao的博客-程序员秘密

五十六中华民族 汉族 壮族 苗族 回族 藏族 土家族 布衣族 白族 侗族 水族 仡老族 满族 瑶族 彝族 蒙古族哈尼族 哈萨克族 傣族 黎族 傈僳族 佤族 畲族 高山族 拉祜族 朝鲜族 东乡族 纳西族 景颇族柯尔克孜族 土族 达斡尔族 仫佬族 羌族 布朗族 撒拉族 毛南族 维吾尔族 锡伯族 阿昌族 普米族 塔吉克族 怒族 乌孜别克族 俄罗斯族 鄂温克族 德昂族 保安族 裕固族 京族 塔塔尔族

【Android驱动】proc与sysfs节点创建_John_chaos的博客-程序员秘密

例,TP驱动中节点创建流程:1.sysfs节点:2.proc节点

画图至 UIImage ,而后再在 drawRect 里面,贴上UIImage,图片模糊的问题_cgcontext 绘画模糊_天占的博客-程序员秘密

画图至 UIImage ,而后再在 drawRect 里面,贴上UIImage,图片模糊的问题解决方式:UIGraphicsBeginImageContext(CGSizeMake(maxWidth*2, maxHeight*2)); CGContextRef context = UIGraphicsGetCurrentContext(); CGF