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

【WEB前端开辟】疾速上手前端框架layui

2019-11-16前端开发搜奇网86°c
A+ A-
layui(谐音:类UI) 是一款采纳本身模块范例编写的前端 UI 框架,遵照原生 HTML/CSS/JS 的誊写与组织情势,门坎极低,拿来即用。

一、引见

在运用layui之前,我们先要相识一下layui是什么?

我以为用作者贤心的一句话来归纳综合就好了:为后端程序员设想的前端框架。

越发细致的形貌是:这是一个封装了种种css和js、Ajax等等的前端框架,其封装水平之高,偶然以至对程序员来讲不大友爱。但关于前端手艺平常的人来讲,layui不失为一个好的东西。

二、最先运用layui

运用体式格局:下载后导入项目,然后援用即可

<script th:src="@{/jquery-3.3.1.min.js}"></script>
<script th:src="@{/layui/layui.js}"></script>
<link rel="stylesheet" th:href="@{/layui/css/layui.css}" />

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

为何一定要当地呢?没有CDN?

上面说了,layui封装得太“好”了,程序员的自主性受到限制,这个时刻须要修正layui的源码,比方css的款式——这也是layui的准确用法,而不只是简朴地运用。

layui的模块:layui是模块化的,包含form,layer,laydate,laypage等等模块,恰是这些模块组成了完全的layui。运用layui的时刻,须要指明本身运用的模块。

最先运用layui:

<script>
  layui.use(['mod1', 'mod2'],function(args){
    var mo1 = layui.mod1
       ,mo2 = layui.mod2;
  });
</script>

三、layui表单

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

html部份:

<fieldset class="layui-elem-field layui-field-title" style="margin-top:30px;">
    <legend style="text-align:center;">注册新账户</legend>
</fieldset>
<form id="reform" class="layui-form layui-form-pane"  th:action="@{/user/register.html}" method="POST">
    <div class="layui-form-item">
        <label class="layui-form-label">邮箱</label>
        <div class="layui-input-block">
        <input type="text" name="email" lay-verify="email" placeholder="请输入" autocomplete="off" class="layui-input" />
        </div>
    </div>
         
    <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-block">
            <input type="text" name="name" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input" />
        </div>
    </div>
         
    <div class="layui-form-item">
        <label class="layui-form-label">暗码</label>
        <div class="layui-input-block">
            <input type="password" name="password"  lay-verify="pass" placeholder="请输入暗码" autocomplete="off" class="layui-input" />
        </div>
    </div>
        
    <div class="layui-form-item">
        <label class="layui-form-label">反复暗码</label>
        <div class="layui-input-block">
            <input type="password" name="repassword"   lay-verify="repass" placeholder="请输入暗码" autocomplete="off" class="layui-input" />
        </div>
    </div>
        
    <div class="layui-form-item">
        <button  class="layui-btn layui-btn-fluid" lay-submit="" lay-filter="demo1">注册</button>
    </div>
        
    <div style="text-align:center;margin-top:15px;">
        <input type="checkbox" name="agree"  lay-skin="primary" checked=""/>
                               我已浏览并赞同
        <a href="#" id="agreementLink">《隐私条目》</a>
    </div>
</form>

javscript部份:

<!-- js for form input and submit -->
<script>
layui.use(['form'], function(){
  var form = layui.form;
 
  //自定义考证划定规矩
  form.verify({
    pass: [/(.+){6,12}$/, '暗码必需6到12位']
    ,repass:function(value){
    	var pvalue = $("input[name='password']").val();
    	if(pvalue!=value){
    		return "两次输入的暗码不一致";
    	}
    }
  }); 
  //监听提交
  form.on('submit(demo1)', function(data){
	var agreeChecked = data.field.agree;
    if(agreeChecked!="on"){
    	msg("未赞同隐私条目");
    	return false;//阻挠表单提交
    }
  });
});
</script>

效果图:

四、layui弹出层

下面报告一下弹出层,弹出可以说是一个很罕见的东西了,但基本的HTML/JS只要貌寝的alert("")要领,layui包含了一个叫做layer的弹出层模块。

运用layer的两种体式格局:

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

二、导入自力的layer模块文件,然后就可以直接运用;

关于第一种体式格局不予议论,这里引见一下第二种体式格局。

起首,从layer官网下载layer的文件,解压并放入本身的项面前目今,然后<script th:src="@{/layer/layer.js}"></script>相似如许的情势引入layer.js文件。

Example:

function msg(msg){
 	//茶青深蓝风
    layer.alert(msg, {
      title:'音讯'
      ,skin: 'layui-layer-molv' //款式类名
	  ,closeBtn: 0
	 },function(index){
		layer.close(index);//封闭
	 });
}

效果图:

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

五、layui文件上传

下面引见一下layui的文件上传,即upload模块

<!-- 上传图片-->
<div class="layui-tab-item">
    <div class="layui-upload">
        <button type="button" class="layui-btn layui-btn-normal" id="headButton">
            <i class="layui-icon">&#xe67c;</i>挑选图片
        </button>&nbsp;&nbsp;&nbsp;&nbsp;
        <button type="button" class="layui-btn" id="headAddButton">最先上传</button>
    </div>
               
    <div class="layui-inline layui-word-aux" style="margin-top:20px;">
        <label>注重:支撑jpg,png和gif花样,文件大小应小于10MB</label>
    </div>
</div>
<!-- 文件上传 -->
<script>
layui.use('upload',function(){
	var $ = layui.jquery
	,upload = layui.upload;
	
	//选完文件后不自动上传
	upload.render({
		elem: '#headButton'
		,url: getRootPath()+'/user/uploadPicture'
		,size: 10*1024 //10*1024KB = 10MB
		,accept: 'images'
		,acceptMime: 'image/jpg,image/png,image/gif'
		,auto: false
		,bindAction: '#headAddButton'
		,done: function(res){
			msg(res.msg);
			//革新头像地点
			var resUrl = res.url;
			if(resUrl!=""){
				document.getElementById("userImg").src=getRootPath()+ resUrl;
			}
		}
	});
});
</script>

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

@Autowired
FileService fileService;

@RequestMapping(path="/uploadPicture",method= {RequestMethod.POST})
@ResponseBody
public Map<String,Object> uploadFile(@RequestParam("file")MultipartFile file,HttpServletRequest request){
	Map<String,Object> map = new HashMap<String,Object>();
	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的upload模块可以在前端举行配置文件大小、花样、预览,还可以做到批量上传、重传功用。

六、layui分页

在网站中也常常会用到分页,后端的分页是轻易完成的,但关于前端来讲就不是那末理想了。layui供应了本身的分页模块——laypage。

<div id="allNewsDiv"></div>
<div id="demo"></div>
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表格算是一件比较烦琐且轻易失足的事变。

<!-- team分页table -->
<table class="layui-hide" id="teamTable" lay-filter="teamTool">
</table>
<script>
layui.use('table',function(){
 	var table = layui.table;//模块声明
	
	table.render({
		elem:'#teamTable'
		,method:'get'
		,url:getRootPath()+'/team/admin/list' //返回一个List<TeamMember>的list
		,cellMinWidth:80
		,cols:[[
			{field:'id', title:'ID', sort:true}
			,{field:'name', title:'姓名'}
			,{field:'birth', title:'出生日期'} //这里的templet值时模板元素的挑选器
			,{field:'position', title:'身份'}
			,{field:'information', title:'个人信息'}
		    ,{field:'right', title:'操纵', toolbar:'#barDemo'}
	    ]]
	    ,page:true  //开启分页
	    
	});
	
	//监听东西条
	table.on('tool(teamTool)', function(obj){ //注:tool是东西条事宜名,test是table原始容器的属性 lay-filter="对应的值"
	  var data = obj.data; //取得当前行数据
	  var layEvent = obj.event; //取得 lay-event 对应的值(也可所以表头的 event 参数对应的值)
	  var tr = obj.tr; //取得当前行 tr 的DOM对象
	 
	  console.log("id:"+data.id);
	  if(layEvent === 'detail'){ //检察
	    //do something
		layer.msg('ID:'+ data.id + ' 的检察操
	  } else if(layEvent === 'del'){ //删除
 	    layer.confirm('确认删除职员信息?', function(index){
 	      //do something
 	      layer.close(index);
	    }); 
	  } else if(layEvent === 'edit'){ //编辑
		  //do something
	  }
	});
});
</script>
  
<!-- tools -->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">检察</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

效果图:

更多layui学问请关注layui框架。

以上就是疾速上手前端框架layui的细致内容,更多请关注ki4网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  移步手机端
【WEB前端开辟】疾速上手前端框架layui

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

本文来源:搜奇网

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

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

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

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>