layui 极简模块化前端 UI 框架

Layui是一套开源免费的的WebUI组件库,采用自身轻量级模块化规范,遵循原生态的HTML/CSS/JavaScript开发模式,极易上手,拿来即用。其风格简约轻盈,而内在雅致丰盈,甚至包括文档在内的每一处细节都经过精心雕琢,非常适合网页界面的快速构建。Layui区别于一众主流的前端框架,却并非逆道而行,而是信奉返璞归真之道。确切地说,它更多是面向于追求简单的务实主义者,他们无需涉足各类构建工具,只需面向浏览器本身,即可轻松掌握页面所需的元素与交互,进而信手拈来。...

Layui 上传附件前条件判断

一、由于导入数据需要有条件,避免点击上传直接就弹出附件选择html代码1234<button type="button"class="layui-btn"id="check">            <i class="layui-icon"></i>导入</button><button hiddentype="button"class="layui-btn"id="staffImport"         lay-data="{url:'/XXX'}"><i class="layui-ic...

layui上传附件

<buttontype="button"class="layui-upload-buttonlayui-btn"id="test1">上传附件<iclass="layui-icon">&#xe67c;</i></button><script>//文件上传varuploadFlag=0;varuploadInst=upload.render({elem:'#test1'//绑定元素,url:'/InsureStitution/Upload'//上传接口,accept:'file',exts:'doc|docx|pdf|bmp|jpg|png',multiple:true,size:51200,alldone:function(obj){//上传完毕回调console.log(obj.total);//得到总文件数console.log(obj.successful);//请求修改成功的文件数console.log(obj.aborted);//请求失败的文件数},before:function(obj){layer.lo...
开发笔记 开发笔记·2023-05-15

layui获取select下拉框选中的value和text

layui获取text和value的方法<formclass="layui-form"action=""><divclass="layui-inline"><divclass="layui-input-inline"><selectname="modules"lay-verify="required"lay-search=""lay-filter="test"id="CoalSelect"></select></div></div></form>layui.use(['form','layedit','laydate'],function(){varform=layui.form,layer=layui.layerform.on('select(test)',function(data){coalName=data.elem[data.elem.selectedIndex].text;//获取选中值的textcoalCode=data.value;//获取选中值的value});})&nbs...

layui动态赋值select下拉

$.ajax({url:"/EnvironmentMonitor/GetAnalogSensor",type:"GET",dataType:"json",data:{mineCode:data.value,},success:function(data){if(data.code==0){if(data.count==0){layer.msg("当前煤矿没有传感器类型!")}else{for(vari=0;i<data.data.length;i++){$("#equcode").append("<optionvalue="+data.data[i].Value+">"+data.data[i].Text+"</option>")}//需要渲染一下form.render();}}},error:function(){console.log("error")}}); ...

基于Layui + .net mvc 文件压缩

html<buttontype="button"class="layui-btnlayui-btn-sm"onclick="compress()">文件压缩</button>jsfunctioncompress(){$.post('/FileCompress/compress',{},function(){});}ControllerusingCOMMON;usingSystem;usingSystem.Collections.Generic;usingSystem.Web.Mvc;namespaceSFMVC3._0.Controllers{publicclassFileCompressController:Controller{///<summary>///获取文件///</summary>///<returns></returns>publicstringgetFiles(){List<string>NoiceList=newList<string>();NoiceList.Add(S...

layui实现文件分片上传

html代码<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>layui</title><metaname="renderer"content="webkit"><metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1"><metaname="viewport"content="width=device-width,initial-scale=1,maximum-scale=1"><linkrel="stylesheet"href="/static/layui/css/layui.css"media="all"><scriptsrc="/static/layui/layui.js"charset="utf-8"></script><!--注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的--><...

基于Layui + .net mvc文件上传

html<div><tablewidth="100%"><tr><td><buttontype="button"class="layui-btnlayui-btn-sm"id="附件上传">附件上传</button></td></tr></table></div>js/*文件上传方法*/layui.use('upload',function(){var$=layui.jquery,upload=layui.upload,form=layui.form;upload.render({elem:'#附件上传'//附件上传按钮ID,url:'/tool/upload(附件上传后台地址)',multiple:true,accept:'file',exts:'zip|rar|7z|doc|docx|ppt|pptx|txt|pdf'//允许的类别,before:function(obj){/*上传前执行的部分*/},done:function(res){/*上传后执行的部分*/...

layui 富文本textarea

<linkrel="stylesheet"href="/app/admin/component/layui-v2.6.8/css/layui.css"/><scriptsrc="/app/admin/admin/js/jquery1.2.3.js"></script><scriptsrc="/app/admin/component/layui-v2.6.8/layui.js"></script><divclass="layui-form-item"><labelclass="layui-form-labelrequired">详情</label><divclass="layui-input-block"><textareaid="detail"lay-verify="detail"name="detail"></textarea></div></div><!--新增-->layui.use(['form','layedi...
开发笔记 开发笔记·2023-05-10

layui获取checkbox选中状态及点击事

单个checkboxhtml部分<divclass="layui-form-item"><labelclass="layui-form-label">单选框</label><divclass="layui-input-inline"><inputtype="checkbox"name="ck"id="ck"title="点击事件"lay-filter="ck"></div></div>js部分<script>layui.use(['form'],function(){var$=layui.$,form=layui.form,layer=layui.layer;//单选框事件form.on('checkbox(resource)',function(obj){if(obj.elem.checked==true){//选中事件}else{//未选中事件}});});</script>多个checkbox实现单击一个checkbox多选其他checkboxhtml<divclas...

layui的confirm使用

使用layui的confirmlayer.confirm('确认提交?',function(index){console.log('www.51dev.com');layer.close(index);}); ...
开发笔记 开发笔记·2021-05-26

layui弹出输入框

layer.prompt({formType:2,value:data.email},function(value,index){obj.update({email:value});layer.close(index);}); ...
星空 星空·2021-03-22

layui-弹窗携带参数

1layer.open({2type:2,3skin:'layui-layer-molv',4content:setter.host+'/toBox',5offset:'auto',6area:['1000px','584px'],7title:["选择机构"],8closeBtn:1,9success:function(layero,index){//弹出时执行10variframeWindow=window['layui-layer-iframe'+index]11,subBody=layero.find('iframe').contents();12subBody.find("#id").val("123");13//varbody=layer.getChildFrame('body',index);14//variframeWin=window[layero.find('iframe')[0]['name']];15//varsubBody=layero.find('iframe').contents();16//body.find('.score').val(data.sco...
代码星球 代码星球·2021-02-20

layui-弹窗回显

1if(JSON.parse(data).code==0){2layer.msg('提交成功',{3icon:1,4time:1000//2秒关闭(如果不配置,默认是3秒)5},function(){6window.location.href=setter.host+"/Login?";7});8}else{9layer.alert(JSON.parse(data).msg)10} ...
代码星球 代码星球·2021-02-20

layui中的table模块中的基础参数应用

layui的table模块是一个重头,在基础参数方面尽可能地做到友好,即:保证功能的前提而又避免过于繁杂的配置。基础参数一般出现在以下几种场景中:1场景一:下述lay-data里面的内容即为基础参数项,切记:值要用单引号2<tablelay-data="{height:300,url:'/api/data'}"lay-filter="demo">……</table>34场景二:下述方法中的键值即为基础参数项5table.render({6height:3007,url:'/api/data'8});910更多场景:下述options即为含有基础参数项的对象11>table.init('filter',options);//转化静态表格12>vartableObj=table.render({});13tableObj.reload(options);//重载表格接下来看一下基础元素有哪些?1、elem -绑定元素是指定原始table容器,只适用于 table.render()的渲染方式1HTML:2<tableid="tes...
首页上一页12345...下一页尾页