hi,你好!欢迎访问本站!登录
本站由网站地图腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - 教程 - 前端开发 - 正文 君子好学,自强不息!

【WEB前端开辟】Layui运用入门教程

2019-11-15前端开发搜奇网61°c
A+ A-
layui(谐音:类UI) 是一款采纳本身模块范例编写的前端 UI 框架,遵照原生 HTML/CSS/JS 的誊写与组织形式,门坎极低,拿来即用。异常合适界面的疾速开辟。

取得 layui 后,将其完整地布置到你的项目目次(或静态资本服务器),你只须要引入下述两个文件:

./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须要先加载模块运用,上述代码中就是预先加载模块!假如 起首不加载模块就直接layer. 运用的话运行时是会报错的!找不到layer该对象或许找不到要领等其他题目!

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

下面是我运用的代码案例:

挪用layui:

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

预先加载:

//layui layer
let layuiLayer;
//layui预先加载
layui.use(['layer'], function () {
    layuiLayer = layui.layer;
});

运用layui对象:

  layuiLayer.open({
            title: '提醒',
            content: '请输入名字!'
        })

以上就是Layui运用入门教程的细致内容,更多请关注ki4网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  移步手机端
【WEB前端开辟】Layui运用入门教程

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
标签:

本文来源:搜奇网

本文地址:https://www.sou7.cn/281611.html

关注我们:微信搜索“搜奇网”添加我为好友

版权声明: 本文仅代表作者个人观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。请记住本站网址https://www.sou7.cn/搜奇网。

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>