快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线:028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

layui框架的基础使用方法

这篇文章将为大家详细讲解有关layui框架的基础使用方法,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。

创新互联专注于平山网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供平山营销型网站建设,平山网站制作、平山网页设计、平山网站官网定制、小程序开发服务,打造平山网络公司原创品牌,更为您提供平山网站排名全网营销落地服务。

layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。

一、介绍

在使用layui之前,我们先要了解一下layui是什么?

我觉得用作者贤心的一句话来概括就好了:为后端程序员设计的前端框架。

更加详细的描述是:这是一个封装了各种css和js、Ajax等等的前端框架,其封装程度之高,有时甚至对程序员来说不大友好。但对于前端技术一般的人来说,layui不失为一个好的工具。

二、开始使用layui

使用方式:下载后导入项目,然后引用即可



先要引用jquery,然后再引用layui.js和layui.css。

为什么一定要本地呢?没有cdn?

上面说了,layui封装得太“好”了,程序员的自主性受到限制,这个时候需要修改layui的源码,比如css的样式——这也是layui的正确用法,而不只是简单地使用。

layui的模块:layui是模块化的,包括form,layer,laydate,laypage等等模块,正是这些模块组成了完整的layui。使用layui的时候,需要指明自己使用的模块。

开始使用layui:

三、layui表单

下面以HTML中最常见的form表单来演示layui的使用。

html部分:

注册新账户
我已阅读并同意 《隐私条款》

javscript部分:


效果图:

layui框架的基础使用方法

四、layui弹出层

下面讲述一下弹出层,弹出可以说是一个很常见的东西了,但基础的HTML/JS只有丑陋的alert("")方法,layui包含了一个叫做layer的弹出层模块。

使用layer的两种方式:

一、像上面使用form模块一样,layui.use声明,然后在use后面的function里使用;

二、导入独立的layer模块文件,然后就可以直接使用;

关于第一种方式不予讨论,这里介绍一下第二种方式。

首先,从layer官网下载layer的文件,解压并放入自己的项目下,然后类似这样的形式引入layer.js文件。

Example:

function msg(msg){
 	//墨绿深蓝风
    layer.alert(msg, {
      title:'消息'
      ,skin: 'layui-layer-molv' //样式类名
	  ,closeBtn: 0
	 },function(index){
		layer.close(index);//关闭
	 });
}

效果图:

layui框架的基础使用方法

layer不仅仅可以弹出提示框,还可以做到一些有趣且实用的动态效果,甚至可以加载一个弹出的HTML界面出来。

五、layui文件上传

下面介绍一下layui的文件上传,即upload模块


    

后端(java-spring-controller类中):

@Autowired
FileService fileService;

@RequestMapping(path="/uploadPicture",method= {RequestMethod.POST})
@ResponseBody
public Map uploadFile(@RequestParam("file")MultipartFile file,HttpServletRequest request){
	Map map = new HashMap();
	String path = fileService.uploadImg(file, "head");//service层保存文件
	
	//返回值,必须按照这样写——要符合upload模块的回调接口才行
	map.put("code", 0); //0表示成功
	map.put("msg","上传成功");
	map.put("data", "");
	map.put("url", path);
	return map;
}	

upload上传接口和返回值:

//上传接口
upload.render({
  elem: '#id'
  ,url: '/api/upload/' //必填项
  ,method: ''  //可选项。HTTP类型,默认post
  ,data: {} //可选项。额外的参数,如:{id: 123, abc: 'xxx'}
});   

//返回值
{
  "code": 0
  ,"msg": ""
  ,"data": {
    "src": "http://cdn.layui.com/123.jpg"
  }
}

效果图:

layui框架的基础使用方法

layui的upload模块能够在前端进行配置文件大小、格式、预览,还可以做到批量上传、重传功能。

六、layui分页

在网站中也经常会用到分页,后端的分页是容易实现的,但对于前端来说就不是那么理想了。layui提供了自己的分页模块——laypage。

layui.use(['element','laypage'], function(){
	  var element = layui.element
	  ,laypage = layui.laypage;
	  
	  $.ajax({
		 url:getRootPath()+'/news/count'
		 ,type:'GET'
		 ,async:true  //false表示非异步,即同步,即请求处理完毕后才能返回;
		 ,data:{"page":1, "limit":10}
		 ,dataType:'json'
		 ,success:function(alldata){
			var numbers = alldata.count;
		    //总页数大于页码总数
			laypage.render({
			    elem: 'demo'
			    ,count: numbers//数据总数
			    ,first: '首页'
			    ,last: '尾页'
			    ,jump: function(obj){
			      $.ajax({
		            url:getRootPath()+'/news/list'
		            ,type:'GET'
		            ,async:true
		            ,data:{"page":obj.curr, "limit":obj.limit}
		            ,dataType:'json'
		            ,success:function(data){
		            	var shtml = getNewsContentHTML(data);//js处理数据并填充div
		            	document.getElementById("allNewsDiv").innerHTML=shtml;
		            }
			      });
			    }
			 });
		 } 
	  });
});

如上,分页跳转的事件是在jump中进行的,在里面编写AJAX请求,通过jump的obj参数获得page和limit参数,然后在请求执行完毕并返回数据后进行处理即可。

七、layui数据表格

表格时常见的功能,但js拼接HTML表格算是一件比较繁琐且容易出错的事情。



  

效果图:

layui框架的基础使用方法

关于layui框架的基础使用方法就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。


文章名称:layui框架的基础使用方法
链接分享:http://6mz.cn/article/pdcpcg.html

其他资讯