初识layui(一)

最新推荐文章于 2023-08-08 10:29:42 发布

xingxing12323

最新推荐文章于 2023-08-08 10:29:42 发布

阅读量158

点赞数

分类专栏： # layui

本文链接：https://blog.youkuaiyun.com/xingxing12323/article/details/104473809

版权

layui 专栏收录该内容

3 篇文章

订阅专栏

layui的基本使用

下载依赖文件
效果
导入项目中使用
导入layui的依赖

<!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">  <!--导入css文件-->
</head>
<body>
<!-- 你的HTML代码 -->
好好学习，天天向上。
<script src="../layui/layui.js"></script><!--导入js文件-->
<script>
   //使用layui中自己定义的模块
   layui.use(['layer', 'form'], function(){
       var layer = layui.layer
           ,form = layui.form;

       layer.msg('Hello World');
   });
</script>
</body>
</html>

使用自定义模块

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <link href="../layui/css/layui.css" rel="stylesheet">
</head>
<body>
   好好学习，天天学习！
   <script src="../layui/layui.js"></script>
   <script>
       layui.config({
           base: '../moudles/' //指定自定义模板的路径
       }).use(['index','common','layer', 'form'],function () {
           var layer = layui.layer
               ,csCommon = layui.common //
               ,form = layui.form;
               csCommon.msg();

       }); //加载入口
   </script>
</body>
</html>

在这里插入图片描述
moudles下的common.js文件

layui.define(['layer', 'form'], function(exports){
    var layer = layui.layer
        ,form = layui.form,

        csCommon={
            msg : function () {
                layer.msg("手动阀手动阀");
            }
        }

    exports('common', csCommon); //注意，这里是模块输出的核心，模块名必须和use时的模块名一致
});

效果：
在这里插入图片描述

设置layui区域显示

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <link rel="stylesheet" href="../layui/css/layui.css">
   <script src="../layui/layui.js"></script>
</head>
<body>
<div class="layui-layout layui-layout-admin">
   <div class="layui-header">头部</div>
   <div class="layui-side layui-bg-black">侧边栏</div>
   <div class="layui-body">内容</div>
   <div class="layui-footer">底部</div>
</div>
<script>
   //注意：导航 依赖 element 模块，否则无法进行功能性操作
   layui.use('element', function(){
       var element = layui.element;
       //…
   });
</script>
</body>
</html>

效果如图：
在这里插入图片描述

设置layui区域显示，加入响应元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="../layui/css/layui.css">
    <script src="../layui/layui.js"></script>
</head>
<body class="layui-layout-body" style="overflow: hidden">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">layui 后台布局</div>
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item"><a href="">layui文档</a></li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item"><a href="">layui文档</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <ul class="layui-nav layui-nav-tree"  lay-filter="test">
                <li class="layui-nav-item"><a href="">侧边栏导航</a></li>
            </ul>
        </div>
    </div>

    <div class="layui-body" >
        <!-- 内容主体区域 -->
        <iframe src="https://www.baidu.com/" frameborder="0" height="100%" width="100%"></iframe>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © layui.com - 底部固定区域
    </div>
</div>
<!--<script src="../src/layui.js"></script>-->
<script>
    //JavaScript代码区域
    layui.use('element', function(){
        var element = layui.element;

    });
</script>
</body>
</body>
</html>

效果：
在这里插入图片描述