您好,登錄后才能下訂單哦!
這篇文章主要介紹如何快速上手前端框架layui,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
layui(諧音:類UI) 是一款采用自身模塊規(guī)范編寫的前端 UI 框架,遵循原生 HTML/CSS/JS 的書寫與組織形式,門檻極低,拿來即用。
一、介紹
在使用layui之前,我們先要了解一下layui是什么?
我覺得用作者賢心的一句話來概括就好了:為后端程序員設(shè)計(jì)的前端框架。
更加詳細(xì)的描述是:這是一個(gè)封裝了各種css和js、Ajax等等的前端框架,其封裝程度之高,有時(shí)甚至對(duì)程序員來說不大友好。但對(duì)于前端技術(shù)一般的人來說,layui不失為一個(gè)好的工具。
二、開始使用layui
使用方式:下載后導(dǎo)入項(xiàng)目,然后引用即可
<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封裝得太“好”了,程序員的自主性受到限制,這個(gè)時(shí)候需要修改layui的源碼,比如css的樣式——這也是layui的正確用法,而不只是簡單地使用。
layui的模塊:layui是模塊化的,包括form,layer,laydate,laypage等等模塊,正是這些模塊組成了完整的layui。使用layui的時(shí)候,需要指明自己使用的模塊。
開始使用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;">注冊(cè)新賬戶</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="請(qǐng)輸入" 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="請(qǐng)輸入" 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="請(qǐng)輸入密碼" autocomplete="off" class="layui-input" /> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">重復(fù)密碼</label> <div class="layui-input-block"> <input type="password" name="repassword" lay-verify="repass" placeholder="請(qǐng)輸入密碼" autocomplete="off" class="layui-input" /> </div> </div> <div class="layui-form-item"> <button class="layui-btn layui-btn-fluid" lay-submit="" lay-filter="demo1">注冊(cè)</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; //自定義驗(yàn)證規(guī)則 form.verify({ pass: [/(.+){6,12}$/, '密碼必須6到12位'] ,repass:function(value){ var pvalue = $("input[name='password']").val(); if(pvalue!=value){ return "兩次輸入的密碼不一致"; } } }); //監(jiān)聽提交 form.on('submit(demo1)', function(data){var agreeChecked = data.field.agree; if(agreeChecked!="on"){ msg("未同意隱私條款"); return false;//阻止表單提交 } });});</script>
效果圖:
四、layui彈出層
下面講述一下彈出層,彈出可以說是一個(gè)很常見的東西了,但基礎(chǔ)的HTML/JS只有丑陋的alert("")方法,layui包含了一個(gè)叫做layer的彈出層模塊。
使用layer的兩種方式:
一、像上面使用form模塊一樣,layui.use聲明,然后在use后面的function里使用;
二、導(dǎo)入獨(dú)立的layer模塊文件,然后就可以直接使用;
關(guān)于第一種方式不予討論,這里介紹一下第二種方式。
首先,從layer官網(wǎng)下載layer的文件,解壓并放入自己的項(xiàng)目下,然后<script th:src="@{/layer/layer.js}"></script>類似這樣的形式引入layer.js文件。
Example:
function msg(msg){ //墨綠深藍(lán)風(fēng) layer.alert(msg, { title:'消息' ,skin: 'layui-layer-molv' //樣式類名 ,closeBtn: 0 },function(index){layer.close(index);//關(guān)閉 });}
效果圖:
layer不僅僅可以彈出提示框,還可以做到一些有趣且實(shí)用的動(dòng)態(tài)效果,甚至可以加載一個(gè)彈出的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"></i>選擇圖片 </button> <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格式,文件大小應(yīng)小于10MB</label> </div></div>
<!-- 文件上傳 --><script>layui.use('upload',function(){var $ = layui.jquery,upload = layui.upload;//選完文件后不自動(dòng)上傳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類中):
@AutowiredFileService fileService;@RequestMapping(path="/uploadPicture",method= {RequestMethod.POST})@ResponseBodypublic 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模塊的回調(diào)接口才行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/' //必填項(xiàng) ,method: '' //可選項(xiàng)。HTTP類型,默認(rèn)post ,data: {} //可選項(xiàng)。額外的參數(shù),如:{id: 123, abc: 'xxx'}}); //返回值{ "code": 0 ,"msg": "" ,"data": { "src": "http://cdn.layui.com/123.jpg" }}
效果圖:
layui的upload模塊能夠在前端進(jìn)行配置文件大小、格式、預(yù)覽,還可以做到批量上傳、重傳功能。
六、layui分頁
在網(wǎng)站中也經(jīng)常會(huì)用到分頁,后端的分頁是容易實(shí)現(xiàn)的,但對(duì)于前端來說就不是那么理想了。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表示非異步,即同步,即請(qǐng)求處理完畢后才能返回; ,data:{"page":1, "limit":10} ,dataType:'json' ,success:function(alldata){var numbers = alldata.count; //總頁數(shù)大于頁碼總數(shù)laypage.render({ elem: 'demo' ,count: numbers//數(shù)據(jù)總數(shù) ,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處理數(shù)據(jù)并填充div document.getElementById("allNewsDiv").innerHTML=shtml; } }); } }); } });});
如上,分頁跳轉(zhuǎn)的事件是在jump中進(jìn)行的,在里面編寫AJAX請(qǐng)求,通過jump的obj參數(shù)獲得page和limit參數(shù),然后在請(qǐng)求執(zhí)行完畢并返回?cái)?shù)據(jù)后進(jìn)行處理即可。
七、layui數(shù)據(jù)表格
表格時(shí)常見的功能,但js拼接HTML表格算是一件比較繁瑣且容易出錯(cuò)的事情。
<!-- 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' //返回一個(gè)List<TeamMember>的list,cellMinWidth:80,cols:[[{field:'id', title:'ID', sort:true},{field:'name', title:'姓名'},{field:'birth', title:'出生日期'} //這里的templet值時(shí)模板元素的選擇器,{field:'position', title:'身份'},{field:'information', title:'個(gè)人信息'} ,{field:'right', title:'操作', toolbar:'#barDemo'} ]] ,page:true //開啟分頁 });//監(jiān)聽工具條table.on('tool(teamTool)', function(obj){ //注:tool是工具條事件名,test是table原始容器的屬性 lay-filter="對(duì)應(yīng)的值" var data = obj.data; //獲得當(dāng)前行數(shù)據(jù) var layEvent = obj.event; //獲得 lay-event 對(duì)應(yīng)的值(也可以是表頭的 event 參數(shù)對(duì)應(yīng)的值) var tr = obj.tr; //獲得當(dāng)前行 tr 的DOM對(duì)象 console.log("id:"+data.id); if(layEvent === 'detail'){ //查看 //do somethinglayer.msg('ID:'+ data.id + ' 的查看操 } else if(layEvent === 'del'){ //刪除 layer.confirm('確認(rèn)刪除人員信息?', 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”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。