前端开发(layui框架)

Posted 嵌入式-老费

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端开发(layui框架)相关的知识,希望对你有一定的参考价值。

【 声明:版权所有,欢迎转载,请勿用于商业用途。 联系信箱:feixiaoxing @163.com】

        写软件使用成熟的框架,这是很常见的事情。之前一直以为前端开发都是从0到1开发的,后来发现也不是。最早用bootstrap,以为前端只是一些美化的工作,等到后来学习layui,发现框架也可以实现前后端的数据交互,只要符合前端的格式要求就好了。layui就是这样一个框架。

1、layui下载

        建议大家直接在github上查看,

GitHub - layui/layui: 一套遵循原生态开发模式的 Web UI 组件库,采用自身轻量级模块化规范,易上手,可以更简单快速地构建网页界面。一套遵循原生态开发模式的 Web UI 组件库,采用自身轻量级模块化规范,易上手,可以更简单快速地构建网页界面。 - GitHub - layui/layui: 一套遵循原生态开发模式的 Web UI 组件库,采用自身轻量级模块化规范,易上手,可以更简单快速地构建网页界面。https://github.com/layui/layui

2、学习教程

        学习的教程很多,一方面是在线的网站,另外一方面是作者提供的example示例,

Layui 开发使用文档 - 入门指南https://layui.itze.cn/doc/index.html

3、最简单的demo程序

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>开始使用 Layui</title>
    <link href="./layui/css/layui.css" rel="stylesheet">
  </head>
  <body>
    <!-- HTML -->
     
    <script src="./layui/layui.js"></script>
    <script>
    // 使用组件
    layui.use(['layer', 'form'], function()
      var layer = layui.layer;
      var form = layui.form;
      
      // 欢迎语
      layer.msg('Hello World');
    );
    </script> 
  </body>
</html>

        如代码所示,这里面最重要的就是两个部分。第一个部分是引入layui.css文件,另外一个部分是layui.js部分。前者是为了美化用,后者是为了交互使用。

        按照上面这个代码所示,如果没有什么意外的,你打开网页,会看到一个弹窗,

4、 简单控件美化

        layui支持的控件美化还是蛮多的。一般的导航、按钮、表单、表格、进度条、图标和时间线,这些都不是问题。使用者所要做的就是添加一个class选项就好了。

<button type="button" class="layui-btn">一个标准的按钮</button>

5、复杂控件的美化

        如果是比较复杂的控件,那就需要写一点代码了。不过放心,也不是很多,就拿date举例,因为涉及到laydate模块,所以需要js先引用下,源代码是这样的,

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layDate快速使用</title>
  <link rel="stylesheet" href="../src/css/layui.css" media="all">
</head>
<body>
 
<div class="layui-inline"> <!-- 注意:这一层元素并不是必须的 -->
  <input type="text" class="layui-input" id="test1">
</div>
 
<script src="../src/layui.js"></script>
<script>
layui.use('laydate', function()
  var laydate = layui.laydate;
  
  //执行一个laydate实例
  laydate.render(
    elem: '#test1' //指定元素
  );
);
</script>
</body>
</html>

        这样,打开网页后,你就会看到这样的结果,

         当然,这里面的属性是可以不停修改的,比如可以设置年、月、日、时、分、秒,

//年选择器
laydate.render( 
  elem: '#test1'
  ,type: 'year'
);
 
//年月选择器
laydate.render( 
  elem: '#test1'
  ,type: 'month'
);
 
//日期选择器
laydate.render( 
  elem: '#test1'
  //,type: 'date' //默认,可不填
);
 
//时间选择器
laydate.render( 
  elem: '#test1'
  ,type: 'time'
);
 
//日期时间选择器
laydate.render( 
  elem: '#test1'
  ,type: 'datetime'
);
   

        如果你愿意,想设置一下时间区间,只需要增加一个range:true选项就好,

         当然,等到时间选择好后,就可以添加自己的回调函数了,

<script>
layui.use('laydate', function()
  var laydate = layui.laydate;
  
  //执行一个laydate实例
  laydate.render(
    elem: '#test1' //指定元素
	,done: function(value, date)
		console.log("date=====>",date);
		console.log("value====>",value);
    
  );
);
</script>

        不出意外,在console窗口可以看到这样的内容打印,

         其他的控件基本都是这样的操作方法,大家可以去试一试。

以上是关于前端开发(layui框架)的主要内容,如果未能解决你的问题,请参考以下文章

前端LayUI框架快速上手详解

使用LayUI展示数据

使用LayUI展示数据

LayUI前端框架开发视频讲解

LayUI前端框架开发视频讲解

layui 学习增删改查分页