溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

Layui的基礎(chǔ)使用方法

發(fā)布時間：2020-06-28 09:35:31 來源：億速云 閱讀：145 作者：Leah 欄目：web開發(fā)

本篇文章為大家展示了Layui的基礎(chǔ)使用方法，代碼簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

layui（諧音：類UI) 是一款采用自身模塊規(guī)范編寫的前端 UI 框架，遵循原生 HTML/CSS/JS 的書寫與組織形式，門檻極低，拿來即用。非常適合界面的快速開發(fā)。

獲得 layui 后，將其完整地部署到你的項目目錄（或靜態(tài)資源服務(wù)器），你只需要引入下述兩個文件：

./layui/css/layui.css
./layui/layui.js //提示：如果是采用非模塊化方式（最下面有講解），此處可換成：./layui/layui.all.js

沒錯，不用去管其它任何文件。因為他們（比如各模塊）都是在最終使用的時候才會自動加載。

這是一個基本的入門頁面：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>開始使用layui</title>
  <link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body>
 
<!-- 你的HTML代碼 -->
 
<script src="../layui/layui.js"></script>
<script>
//一般直接寫在一個js文件中
layui.use(['layer', 'form'], function(){
  var layer = layui.layer
  ,form = layui.form;
  
  layer.msg('Hello World');
});
</script> 
</body>
</html>

注：使用layui需要先加載模塊使用，上述代碼中就是預(yù)先加載模塊！如果 首先不加載模塊就直接layer. 使用的話運行時是會報錯的！找不到layer該對象或者找不到方法等其他問題！

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

下面是我使用的代碼案例：

調(diào)用layui：

    <!--layui-->
    <link href="/libs/layui/css/layui.css" rel="stylesheet" type="text/css"/>
    <script src="/libs/layui/layui.js" type="text/javascript"></script>

預(yù)先加載：

//layui layer
let layuiLayer;
//layui預(yù)先加載
layui.use(['layer'], function () {
    layuiLayer = layui.layer;
});

使用layui對象：

  layuiLayer.open({
            title: '提示',
            content: '請輸入名字！'
        })

上述內(nèi)容就是Layui的基礎(chǔ)使用方法，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手