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.js7. 加載模塊方法
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方法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 027_jQuery DOM 元素方法
- 下一篇： 029-数据表格一