Layui 프레임워크를 사용하는 방법-레이이 튜토리얼-php.cn

집

웹 프론트엔드

레이이 튜토리얼

Layui 프레임워크를 사용하는 방법

angryTom

Aug 01, 2019 pm 01:15 PM

layui

Layui 프레임워크를 사용하는 방법

layui(동음이의어: UI-like)는 자체 모듈 사양을 사용하여 작성된 프런트 엔드 UI 프레임워크로 기본 HTML/CSS/JS의 작성 및 구성 형식을 따릅니다. 즉시 사용할 수 있습니다. 하지만 그것을 사용하려면 그의 규칙을 따라야 합니다. 결국 그 사람은 손이 짧고 몇 가지 트릭을 사용할 수 있으며 이는 또한 규칙 내에 있습니다.

layui에 대해 더 알고 싶다면 다음을 클릭하세요: layui tutorial

layui 공식 웹사이트: https://www.layui.com/

Layui 프레임워크를 사용하는 방법

다운로드 후, 압축을 풀고layui 폴더를 꺼냅니다. 편집기를 열고 드롭하세요.

Layui 프레임워크를 사용하는 방법

그런 다음 CSS 파일과 js 파일을 html에 도입하기 시작하세요. 여기서 필요한 것은 두 개의layui 코어 파일인layui.css와layui.js입니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="layui/layui.js"></script>
</head>
<body>
//模块和回调函数
<script>
//一般直接写在一个js文件中
layui.use([&#39;layer&#39;, &#39;form&#39;], function(){
  var layer = layui.layer
  ,form = layui.form;
  layer.msg(&#39;Hello World&#39;);
});
</script> 
</body>
</html>

이 시점에서 사용해야 할 모듈과 콜백 함수도 선언해야 합니다. 물론, 공식문서를 참고하셔서 원하는 효과를 선택하시면 됩니다! !

예:

Layui 프레임워크를 사용하는 방법

다음으로 예제로 마무리하겠습니다.

Layui 프레임워크를 사용하는 방법

공식 문서 탐색에서 예를 들었습니다.

Layui 프레임워크를 사용하는 방법

잘 읽으셨네요. 방금 복사했습니다. , 그리고

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="layui/layui.js"></script>
</head>
<body>
<ul lay-filter="">
    <li><a href="">最新活动</a></li>
    <li class="layui-nav-item layui-this"><a href="">产品</a></li>
    <li><a href="">大数据</a></li>
    <li>
        <a href="javascript:;">解决方案</a>
        <dl> <!-- 二级菜单 -->
            <dd><a href="">移动模块</a></dd>
            <dd><a href="">后台模版</a></dd>
            <dd><a href="">电商平台</a></dd>
        </dl>
    </li>
    <li><a href="">社区</a></li>
</ul>
<script>
    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use(&#39;element&#39;, function(){
        var element = layui.element;
        //…
    });
</script>
</body>
</html>

더 이상은 없습니다. 이것만 있으면 효과가 달성됩니다 ...

Layui 프레임워크를 사용하는 방법