layui框架的基礎(chǔ)使用方法
這篇文章將為大家詳細講解有關(guān)layui框架的基礎(chǔ)使用方法，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。
創(chuàng)新互聯(lián)專注于平山網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供平山營銷型網(wǎng)站建設(shè)，平山網(wǎng)站制作、平山網(wǎng)頁設(shè)計、平山網(wǎng)站官網(wǎng)定制、小程序開發(fā)服務(wù)，打造平山網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供平山網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。
layui（諧音：類UI) 是一款采用自身模塊規(guī)范編寫的前端 UI 框架，遵循原生 HTML/CSS/JS 的書寫與組織形式，門檻極低，拿來即用。
一、介紹
在使用layui之前，我們先要了解一下layui是什么？
我覺得用作者賢心的一句話來概括就好了：為后端程序員設(shè)計的前端框架。
更加詳細的描述是：這是一個封裝了各種css和js、Ajax等等的前端框架，其封裝程度之高，有時甚至對程序員來說不大友好。但對于前端技術(shù)一般的人來說，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;
//自定義驗證規(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彈出層
下面講述一下彈出層，彈出可以說是一個很常見的東西了，但基礎(chǔ)的HTML/JS只有丑陋的alert("")方法，layui包含了一個叫做layer的彈出層模塊。
使用layer的兩種方式：
一、像上面使用form模塊一樣，layui.use聲明，然后在use后面的function里使用；
二、導入獨立的layer模塊文件，然后就可以直接使用；
關(guān)于第一種方式不予討論，這里介紹一下第二種方式。
首先，從layer官網(wǎng)下載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);//關(guān)閉
});
}效果圖：
layer不僅僅可以彈出提示框，還可以做到一些有趣且實用的動態(tài)效果，甚至可以加載一個彈出的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;
//選完文件后不自動上傳
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模塊的回調(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/' //必填項
,method: '' //可選項。HTTP類型，默認post
,data: {} //可選項。額外的參數(shù)，如：{id: 123, abc: 'xxx'}
});
//返回值
{
"code": 0
,"msg": ""
,"data": {
"src": "http://cdn.layui.com/123.jpg"
}
}效果圖：
layui的upload模塊能夠在前端進行配置文件大小、格式、預覽，還可以做到批量上傳、重傳功能。
六、layui分頁
在網(wǎng)站中也經(jīng)常會用到分頁，后端的分頁是容易實現(xiàn)的，但對于前端來說就不是那么理想了。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;
//總頁數(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中進行的，在里面編寫AJAX請求，通過jump的obj參數(shù)獲得page和limit參數(shù)，然后在請求執(zhí)行完畢并返回數(shù)據(jù)后進行處理即可。
七、layui數(shù)據(jù)表格
表格時常見的功能，但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 //開啟分頁
});
//監(jiān)聽工具條
table.on('tool(teamTool)', function(obj){ //注：tool是工具條事件名，test是table原始容器的屬性 lay-filter="對應(yīng)的值"
var data = obj.data; //獲得當前行數(shù)據(jù)
var layEvent = obj.event; //獲得 lay-event 對應(yīng)的值（也可以是表頭的 event 參數(shù)對應(yīng)的值）
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>效果圖：
關(guān)于layui框架的基礎(chǔ)使用方法就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
本文名稱：layui框架的基礎(chǔ)使用方法
文章分享：http://jinyejixie.com/article26/pdcpcg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、全網(wǎng)營銷推廣、ChatGPT、網(wǎng)站設(shè)計、標簽優(yōu)化、外貿(mào)建站
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)
- APP開發(fā)成本高的原因 2016-08-26
- 北京街舞APP開發(fā)可以滿足用戶的哪些需求 2023-03-05
- 手機網(wǎng)站制作與App開發(fā)有什么區(qū)別？ 2021-09-30
- app開發(fā)：如何設(shè)計出增加用戶粘性的APP界面？ 2020-11-17
- 敢說出來嗎?究竟APP開發(fā)需要多少錢... 2022-08-07
- 哈爾濱代駕app開發(fā)功能與方案 2023-03-13
- 智能硬件類成都app開發(fā)需要哪些功能？ 2022-07-03
- 法律在線律師咨詢類APP開發(fā)基礎(chǔ)功能有哪些 2020-12-09
- 小程序開發(fā)可以替代APP開發(fā)嗎? 2023-03-06
- 一個APP開發(fā)過程需要多少人員 2016-08-02
- 面對微信小程序的挑戰(zhàn)，APP開發(fā)當如何面對？ 2022-06-30
- 電商平臺制作商城APP開發(fā)優(yōu)勢有哪些？ 2020-11-24