001-引入layui和layui.code方法

1. layui官方网址: https://www.layui.com/。

2. 点击立即下载按钮, 下载最新版的layui。

3. 下载完成layui-v2.5.7.zip。

4. 解压缩layui-v2.5.7.zip, 查看layui目录。

5. layui目录说明。

6. 引入layui

6.1. 将解压后完整的layui目录部署到你的项目目录, 你只需要引入下述两个文件:

<link rel="stylesheet" type="text/css" href="layui/css/layui.css">
<script type="text/javascript" src="layui/layui.js"></script> // 如果是采用非模块化方式, 此处src可换成: layui/layui.all.js

7. 加载模块方法

7.1. 语法: layui.use([mods], callback)

7.2. layui的内置模块并非默认就加载的, 他必须在你执行该方法后才会加载。另外请注意, mods里面必须是一个合法的模块名, 不能包含目录。

7.3. mods参数并非只能是一个数组, 你也可以直接传一个字符型的模块名, 但是这样只能依赖一个模块。

7.4. 加载模块模块

<script type="text/javascript">
	// 使用use方法引入模块
	layui.use('table', function(){
		// 获取table接口
		var table = layui.table; 
	});
</script>

7.5. use方法的函数其实返回了所加载的模块接口, 所以其实也可以不通过layui对象赋值获得接口:

layui.use(['code'], function(code){
	
});
layui.use(['layer', 'form'], function(layer, form){

});

8. 全模块用法(一般用于线上环境)

8.1. 事实上layui的「模块化加载」十分适用于开发环境, 它方便团队开发和代码调试。但对于「线上环境」, 我们更推荐您采用「全模块加载」, 即直接引入layui.all.js, 它包含了layui所有的内置模块, 且无需再通过 layui.use()方法加载模块, 直接调用即可。如:

<script type="text/javascript" src="../layui/layui.all.js"></script>  
<script type="text/javascript">
    ;!function(){
      // 无需再执行layui.use()方法加载模块, 直接使用即可
      var form = layui.form
      ,layer = layui.layer;
      
      //…
    }();
</script>

9. 代码修饰器文档 - layui.code

9.1. code模块通常针对于程序员, 它是layui中一个极其轻量的组成。通俗而言, 该模块就是对你的pre元素进行一个修饰, 从而保证你展现的代码更具可读性。目前它没有对不同的语言进行颜色高亮。

9.2. 使用

9.2.1. code模块的使用非常简单, 假设你在页面有这样一段pre标签和class="layui-code"属性:

<pre class="layui-code">
// 代码区域
var person = { 
    firstName:"Bill",
    lastName:"Gates",
    age:50,
    eyeColor:"blue"
}
</pre>

9.2.2. 那么你只需要经过下面的方式:

layui.use('code', function(){ // 加载code模块
    layui.code(); // 引用code方法
});

9.3. 例子

9.3.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />

		<title>layui.code()默认方法</title>
		
		<link rel="stylesheet" type="text/css" href="layui/css/layui.css">
		<script type="text/javascript" src="layui/layui.all.js"></script>
	</head>
	<body>
		<pre class="layui-code">
			var person = { 
			    firstName:"Bill",
			    lastName:"Gates",
			    age:50,
			    eyeColor:"blue"
			}
		</pre>      

		<script type="text/javascript">
			// 使用use方法引入模块
			;!function(){
				// 引用code方法
				layui.code(); 
			}();
		</script> 
	</body>
</html>

9.3.2. 效果图

9.4. 基础参数

9.4.1. layui.code(options)方法, 它接受一个对象参数options, 支持以下key的设定:

9.4.2. 除了上述方式的设置, 还允许你直接在pre标签上设置属性来替代:

<pre class="layui-code" id="code1" lay-title="JavaScript变量">
	var person = { 
	    firstName:"Bill",
	    lastName:"Gates",
	    age:50,
	    eyeColor:"blue"
	}
</pre>

9.5. elem指定元素

9.5.1. code模块会去自动查找class为layui-code的类, 如果你初始给的不是该类, 那么需要通过elem设置选择器来指向元素:

layui.code({
  elem: '#code2' // 默认值为.layui-code
});

9.6. title设置标题

9.6.1. title设置标题, 即左上角显示的文本, 默认值为code:

layui.code({
	title: '转义html代码'
});

9.7. height设置最大高度

9.7.1. 你可以设置height来控制修饰器的最大高度。如果内容低于该高度, 则会自适应内容高度; 如果内容超过了该高度, 则会自动出现滚动条:

layui.code({
	height: '200px'
});

9.8. encode转义html标签

9.8.1. 事实上很多时候你都需要在pre标签中展现html标签, 而不希望它被浏览器解析。那么code模块允许你这么做, 只需要开启encode即可:

layui.code({
	encode: true
});

9.9. skin风格选择

9.9.1. 你肯定不会满足于code的某一种显示风格, 而skin参数则允许你设定许多种显示风格, 目前layui内置了两种, 分别为默认和notepad:

layui.code({
	skin: 'notepad'
});

9.10. about剔除关于

9.10.1. 如果你不喜欢出现右上角的layui.code字眼, 你是可以剔除的。设置about: false即可:

layui.code({
	about: false
});

9.11. 例子

9.11.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />

		<title>layui.code()方法参数</title>
		
		<link rel="stylesheet" type="text/css" href="layui/css/layui.css">
		<script type="text/javascript" src="layui/layui.js"></script>
	</head>
	<body>
		<pre class="layui-code" id="code1" lay-title="JavaScript变量">
			var person = { 
			    firstName:"Bill",
			    lastName:"Gates",
			    age:50,
			    eyeColor:"blue"
			}
		</pre>      
		<pre id="code2">
			<p>计算机输出标签有:</p>
		  	<kbd>定义计算机代码。</kbd>
		  	<code>定义键盘码。</samp>
		  	<samp>定义计算机代码样本。</code>
		  	<tt>定义打字机代码。</tt>
		  	<var>定义变量。</var>
		  	<pre>定义预格式文本。</pre>
		</pre>
		<script type="text/javascript">
			// 使用use方法引入模块
			layui.use(['code'], function(code){
				code();
				
				code({
					elem: '#code2'
					,title: '转义html代码'
					,height: '200px'
					,encode: true
					,skin: 'notepad'
					,about: false
				});
			});
		</script> 
	</body>
</html>

9.11.2. 效果图

001-引入layui和layui.code方法

猜你喜欢