layui 自定义模块 hello

最新推荐文章于 2023-07-13 12:41:22 发布

privateobject

最新推荐文章于 2023-07-13 12:41:22 发布

阅读量323

点赞数

分类专栏： js 文章标签： js layui 模块 hello html

本文链接：https://blog.csdn.net/privateobject/article/details/112061824

版权

js 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

这里写自定义目录标题

layui 自定义模块hello

layui 自定义模块hello

参考链接

layui封装模块小白教程
版本layui-v2.5.7

截图

在这里插入图片描述

源码

hello.js

/** layui-v2.5.7 自定义模块 */
layui.define(['jquery','layer'],function(exports){
	//使用内置模块
	var $ = layui.jquery,layer = layui.layer;
	//自定义模块的对象
	var obj = {
		log: function(text){
			console.log(text||'hello layui log.');
		},
		alert: function(text){
			layer.msg(text||'hello layui msg.')
		},
		html: function(text){
			$('body').append($('<div></div>').html(text||'<h1>hello layui html</h1>'));
		}
	};
	//输出组件接口
	exports('hello',obj);
})

layui.customs.js

/** layui-v2.5.7 自定义模块-引用 */
layui.config({
	base:'static/layui/customs/'
}).extend({
	hello:'hello'
})

test.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta name="renderer" content="webkit"/>
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
		<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>
		<meta http-equiv="Pragma" content="no-cache"/>
		<meta http-equiv="expires" content="0"/>
		<meta http-equiv="Cache" content="no-cache"/>
		<link rel="icon" href="favicon.ico"/>
		<title>首页</title>
		<style type="text/css">
			
		</style>
	</head>
	<body>
	</body>
	<script src="static/layui/layui.js" type="text/javascript" charset="utf-8"></script>
	<script src="static/layui/layui.customs.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		layui.use(['hello'],function(){
			var hello = layui.hello;
			hello.log();
			hello.html();
			hello.alert();
		})
	</script>
</html>

效果

在这里插入图片描述

privateobject

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
layui 自定义模块 hello

这里写自定义目录标题layui 自定义模块hello参考链接截图源码效果layui 自定义模块hello参考链接layui封装模块小白教程版本layui-v2.5.7截图源码hello.js/** layui-v2.5.7 自定义模块 */layui.define(['jquery','layer'],function(exports){ //使用内置模块 var $ = layui.jquery,layer = layui.layer; //自定义模块的对象 var obj
复制链接

扫一扫