001-引入layui和layui.code方法
1. layui官方網(wǎng)址: https://www.layui.com/。
2. 點(diǎn)擊立即下載按鈕, 下載最新版的layui。
3. 下載完成layui-v2.5.7.zip。
4. 解壓縮layui-v2.5.7.zip, 查看layui目錄。
5. layui目錄說(shuō)明。
6. 引入layui
6.1. 將解壓后完整的layui目錄部署到你的項(xiàng)目目錄, 你只需要引入下述兩個(gè)文件:
<link rel="stylesheet" type="text/css" href="layui/css/layui.css"> <script type="text/javascript" src="layui/layui.js"></script> // 如果是采用非模塊化方式, 此處src可換成: layui/layui.all.js7. 加載模塊方法
7.1. 語(yǔ)法: layui.use([mods], callback)
7.2. layui的內(nèi)置模塊并非默認(rèn)就加載的, 他必須在你執(zhí)行該方法后才會(huì)加載。另外請(qǐng)注意, mods里面必須是一個(gè)合法的模塊名, 不能包含目錄。
7.3. mods參數(shù)并非只能是一個(gè)數(shù)組, 你也可以直接傳一個(gè)字符型的模塊名, 但是這樣只能依賴一個(gè)模塊。
7.4. 加載模塊模塊
<script type="text/javascript">// 使用use方法引入模塊layui.use('table', function(){// 獲取table接口var table = layui.table; }); </script>7.5. use方法的函數(shù)其實(shí)返回了所加載的模塊接口, 所以其實(shí)也可以不通過(guò)layui對(duì)象賦值獲得接口:
layui.use(['code'], function(code){}); layui.use(['layer', 'form'], function(layer, form){});8. 全模塊用法(一般用于線上環(huán)境)
8.1. 事實(shí)上layui的「模塊化加載」十分適用于開發(fā)環(huán)境, 它方便團(tuán)隊(duì)開發(fā)和代碼調(diào)試。但對(duì)于「線上環(huán)境」, 我們更推薦您采用「全模塊加載」, 即直接引入layui.all.js, 它包含了layui所有的內(nèi)置模塊, 且無(wú)需再通過(guò) layui.use()方法加載模塊, 直接調(diào)用即可。如:
<script type="text/javascript" src="../layui/layui.all.js"></script> <script type="text/javascript">;!function(){// 無(wú)需再執(zhí)行l(wèi)ayui.use()方法加載模塊, 直接使用即可var form = layui.form,layer = layui.layer;//…}(); </script>9. 代碼修飾器文檔 - layui.code
9.1. code模塊通常針對(duì)于程序員, 它是layui中一個(gè)極其輕量的組成。通俗而言, 該模塊就是對(duì)你的pre元素進(jìn)行一個(gè)修飾, 從而保證你展現(xiàn)的代碼更具可讀性。目前它沒(méi)有對(duì)不同的語(yǔ)言進(jìn)行顏色高亮。
9.2. 使用
9.2.1. code模塊的使用非常簡(jiǎn)單, 假設(shè)你在頁(yè)面有這樣一段pre標(biāo)簽和class="layui-code"屬性:
<pre class="layui-code"> // 代碼區(qū)域 var person = { firstName:"Bill",lastName:"Gates",age:50,eyeColor:"blue" } </pre>9.2.2. 那么你只需要經(jīng)過(guò)下面的方式:
layui.use('code', function(){ // 加載code模塊layui.code(); // 引用code方法 });9.3. 例子
9.3.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>layui.code()默認(rèn)方法</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. 基礎(chǔ)參數(shù)
9.4.1. layui.code(options)方法, 它接受一個(gè)對(duì)象參數(shù)options, 支持以下key的設(shè)定:
9.4.2. 除了上述方式的設(shè)置, 還允許你直接在pre標(biāo)簽上設(shè)置屬性來(lái)替代:
<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模塊會(huì)去自動(dòng)查找class為layui-code的類, 如果你初始給的不是該類, 那么需要通過(guò)elem設(shè)置選擇器來(lái)指向元素:
layui.code({elem: '#code2' // 默認(rèn)值為.layui-code });9.6. title設(shè)置標(biāo)題
9.6.1. title設(shè)置標(biāo)題, 即左上角顯示的文本, 默認(rèn)值為code:
layui.code({title: '轉(zhuǎn)義html代碼' });9.7. height設(shè)置最大高度
9.7.1. 你可以設(shè)置height來(lái)控制修飾器的最大高度。如果內(nèi)容低于該高度, 則會(huì)自適應(yīng)內(nèi)容高度; 如果內(nèi)容超過(guò)了該高度, 則會(huì)自動(dòng)出現(xiàn)滾動(dòng)條:
layui.code({height: '200px' });9.8. encode轉(zhuǎn)義html標(biāo)簽
9.8.1. 事實(shí)上很多時(shí)候你都需要在pre標(biāo)簽中展現(xiàn)html標(biāo)簽, 而不希望它被瀏覽器解析。那么code模塊允許你這么做, 只需要開啟encode即可:
layui.code({encode: true });9.9. skin風(fēng)格選擇
9.9.1. 你肯定不會(huì)滿足于code的某一種顯示風(fēng)格, 而skin參數(shù)則允許你設(shè)定許多種顯示風(fēng)格, 目前l(fā)ayui內(nèi)置了兩種, 分別為默認(rèn)和notepad:
layui.code({skin: 'notepad' });9.10. about剔除關(guān)于
9.10.1. 如果你不喜歡出現(xiàn)右上角的layui.code字眼, 你是可以剔除的。設(shè)置about: false即可:
layui.code({about: false });9.11. 例子?
9.11.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>layui.code()方法參數(shù)</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>計(jì)算機(jī)輸出標(biāo)簽有:</p><kbd>定義計(jì)算機(jī)代碼。</kbd><code>定義鍵盤碼。</samp><samp>定義計(jì)算機(jī)代碼樣本。</code><tt>定義打字機(jī)代碼。</tt><var>定義變量。</var><pre>定義預(yù)格式文本。</pre></pre><script type="text/javascript">// 使用use方法引入模塊layui.use(['code'], function(code){code();code({elem: '#code2',title: '轉(zhuǎn)義html代碼',height: '200px',encode: true,skin: 'notepad',about: false});});</script> </body> </html>9.11.2. 效果圖
總結(jié)
以上是生活随笔為你收集整理的001-引入layui和layui.code方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 027_jQuery DOM 元素方法
- 下一篇： 029-数据表格一