layui入门案例（简单）

r囧r小猫 2021-09-22 14:36 632阅读 0赞

**引言：layui作为一款新兴ui组件库，主要用于后端开发的前端设计，我觉得十分好用，简洁美观大方**

首先要下载layui官方文档的jar包

--------------------

百度网盘链接：https://pan.baidu.com/s/1VP0I0tR\_TbHnbs0GJ0gSFg   
提取码：cg3e

js的jar包:

百度网盘链接：https://pan.baidu.com/s/1dFy6VKT4qu8PyL2uHUxU7w   
提取码：424

--------------------

<!DOCTYPE html>  
<html>  
<head>  
  <meta charset="utf-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">  
  <title>layout 后台大布局 - Layui</title>  
  <link rel="stylesheet" href="./layui/css/layui.css" />

<script src="./js/jquery-2.1.1.js"></script>  
<script  src="./layui/layui.all.js"></script>

</head>  
<style>  
    body .mylayuicss\{color:balck;\}  
</style>  
<body>

<button class="layui-btn layui-sm btn">弹出一个dialog框</button>  
<button class="layui-btn-normal layui-btn layui-sm btn2">弹出一个dialog框</button>  
<script>  
        layui.use('layer', function () \{//调用layui组件  
          var layer=layui.layer;  
          $=layui.jquery;  
          $(".btn").on('click',function()\{//为按钮添加一个事件  
              layer.open(\{  
                  title:'haha'//标题栏  
                  ,skin:'mylayuicss'  
                  ,content:'http://www.baidu.com'//内容  
              \})  
          \});  
          $(".btn2").on('click',function()\{  
             layer.msg("nihao aa",\{icon:1\})  
          \});  
             
        \});  
    </script>  
</body>  
</html>

--------------------

![70][]

--------------------

希望能给那些入门的爱好者做一个指引

[70]: /images/20210920/20ce2a4562e4403993431f7ec37cdf9b.png

发表评论取消回复

表情：

评论列表（有 0 条评论，632人围观）

还没有评论，来说两句吧...

相关阅读

相关【LayUi】之入门

目录 1.什么是layui 2.layui、easyui与bootstrap的对比有趣的对比方式，嘿嘿嘿.... easyui=jquery+html4（用来做后台的

亦凉/ 2024年04月08日 10:37/ 0 赞/ 80 阅读

相关 Layui基础入门

一、引言 -------------------- 1.1 介绍 > 官网：<https://www.layui.com/ > 这个不维护了看下面这个 > >

心已赠人/ 2024年03月16日 22:04/ 0 赞/ 69 阅读

相关 Layui入门

Layui入门首先，我们要先了解什么是Layui，它是干什么用的，能为我们提供哪些快捷的方法。 layui（谐音：类UI) 遵循原生 HTML/CSS/JS

￡神魔★判官ぃ/ 2022年11月30日 15:48/ 0 赞/ 171 阅读

相关 SpringBoot简单入门案例HelloWorld

Spring框架入门案例：（HelloWorld） 1：创建一个MavenProject 2：在Pom.xml中添加依赖关系（spr

朱雀/ 2022年05月24日 06:34/ 0 赞/ 281 阅读

相关 layui入门笔记

介绍 > layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。相关链接

缺乏、安全感/ 2022年05月24日 04:29/ 0 赞/ 203 阅读

相关 Mybatis入门案例简单分析

Mybatis的快速入门 public void testFindAll() throws IOException { // 读取

た入场券/ 2022年04月17日 00:25/ 0 赞/ 273 阅读

相关简单的vue入门案例

一、简单入门Hello World案例 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_a

一时失言乱红尘/ 2022年01月22日 01:15/ 0 赞/ 535 阅读

相关 Dubbo简单入门案例

一、前言环境：`idea`、`jdk 1.8`、`tomcat 8`、`mysql 5.7` 准备：zookeeper安装完成、dubbo-admin管理平台搭建完成

约定不等于承诺〃/ 2021年12月15日 06:59/ 0 赞/ 425 阅读

相关 layui入门

文章目录前言 layui简介特点特性 layui傻瓜式使用前言因为作者在编写Java Web项目时需要编写前端页面。所以就

曾经终败给现在/ 2021年11月22日 10:58/ 0 赞/ 492 阅读

相关 layui入门案例（简单）

引言：layui作为一款新兴ui组件库，主要用于后端开发的前端设计，我觉得十分好用，简洁美观大方首先要下载layui官方文档的jar包 -----------------

r囧r小猫/ 2021年09月22日 14:36/ 0 赞/ 633 阅读