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方法相关推荐

layui引入php项目,Layui使用入门教程
layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用.非常适合界面的快速开发. 获得 layui 后,将其完 ...
layui向body添加html_layui使用教程 html引入layui教程-layui下载
layui教程,网站.前端开发.程序开发中layui应用引入教程,layui提供大量的前端美化元素模块.表格排版.表单美化.网页特效等资源,如何应用引入使用到我的项目中? layui使用教程以上UI ...
layui前端项目打包方法_layui封装模块基础教程
layui是国人开发的一款非常简洁的UI框架,使用了模块化加载方式,因此在使用过程中我们难免需要添加自己的模块,本教程就教大家封装一个简单的模块. 平常使用中,ajax可以说使用广泛,所以这里我们添加 ...
python怎么安装requests库-Python3.6安装及引入Requests库的实现方法
本博客可能没有那么规范,环境之类的配置.只是让你直接开始编程写python. 至于各种配置网络上有多种方法. 本文仅代表我的观点的一种方法. 电脑环境:win10 64位第一步:下载python. ...
jar包打补丁 jar -uf_maven项目引入本地jar包的方法
maven项目引入本地jar包的方法标签:maven 当maven项目中从中央仓库中找到不到某些Jar包,或者想把自己开发的Jar文件引入到项目中使用.可以把Jar包上传maven中央仓库或自建的私 ...
python用代码安装3.6_Python3.6安装及引入Requests库的实现方法
本博客可能没有那么规范,环境之类的配置.只是让你直接开始编程写python. 至于各种配置网络上有多种方法. 本文仅代表我的观点的一种方法. 电脑环境:win10 64位第一步:下载python. ...
vue项目引入CNZZ数据专家（方法汇总篇）
vue项目引入CNZZ数据专家(方法汇总篇) 很多网站都有cnzz数据统计,用于分析网站页面受访情况. 今天就来备注一下开发经验: vue如何集成cnzz数据专家进行受访记录? 友盟+CNZZ官方文档 ...
ionic3.0--angular4.0 引入第三方插件库的方法
ionic3.0 引入第三方插件 (swiper),方法很多,现详细说明下官方推荐(typings)做法. 1.全局安装Typings 1. npm install -g typings 2.搜索你 ...
vue导入静态js_vue引入静态js文件的方法
由于一些演示,需要对编码名称等可快速进行修改,需要页面方便配置.由于build后的vue项目基本已经看不出原样,因此需要创建一个文件,并在打包的时候不会进行编译. vue-cli 2.0的作法是在st ...

001-引入layui和layui.code方法

001-引入layui和layui.code方法相关推荐

最新文章

热门文章