layui有什么功能?

layui是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到 API 的每一处细节都经过精心雕琢,非常适合界面的快速开发。

一、分页功能

layui框架分页使用,其实layui分页非常简单只需要传入一个总页数就可以很好运用这个功能。下面就看一下我对layui框架分页的介绍。

注意:传入的是页数不是数据库查询的条数

laypage的使用;

 <div id="demo1"></div>//界面容器
 
 <script src="//res.layui.com/layui/build/layui.js" charset="utf-8"></script>
 <!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 -->
 <script>
 //加载layui
 layui.use(['laypage', 'layer'], function(){
   var laypage = layui.laypage
   ,layer = layui.layer;
 
 laypage({
         cont: 'demo1'//界面容器ID
         ,pages:data.number1 //总页数
          ,groups: 5 //连续显示分页数
         , jump: function(obj, first){
      //得到了当前页,用于向服务端请求对应数据
          var curr = obj.curr;
         //向服务器发送请求通过当前页数去计算查询条数     
 
     }
   });
 };
 </script>

二、layui时间日功能

下面的代码的是一个开始结束日期功能

 <label class="layui-form-label">时间</label>
     <div  style="width: 100px" class="layui-input-inline">
       <input  class="layui-input" placeholder="开始日" id="LAY_demorange_s">
     </div>
     <div style="width: 100px" class="layui-input-inline">
       <input  class="layui-input" placeholder="截止日" id="LAY_demorange_e">
     </div>
     <!-- 没有写提交按钮 -->
 
 <script>
 //加载layui
 layui.use(['laydate','paging', 'form'], function() {
     var $ = layui.jquery,
             paging = layui.paging(),
             layerTips = parent.layer === undefined ? layui.layer : parent.layer, //获取父窗口的layer对象
             layer = layui.layer, //获取当前窗口的layer对象
             form = layui.form();
 
       var start = {
                 min:'1900-01-01 00:00:00'//设置最小日期
                 ,max: '2099-06-16 23:59:59'//设置最大日期
                 ,istoday: false
                 ,choose: function(datas){
                   end.min = datas; //开始日选好后,重置结束日的最小日期
                   end.start = datas //将结束日的初始值设定为开始日
                 }
               };
 
       var end = {
                 min:'1900-01-01 00:00:00'//设置最小日期
                 ,max: '2099-06-16 23:59:59'//设置最大日期
                 ,istoday: false
                 ,choose: function(datas){
                   start.max = datas; //结束日选好后,重置开始日的最大日期
                 }
               };
 
               //LAY_demorange_s日期容器ID
       document.getElementById('LAY_demorange_s').onclick = function(){
             start.elem = this;
             laydate(start);//对两个日期进行关联
           }
           //LAY_demorange_e日期容器ID
       document.getElementById('LAY_demorange_e').onclick = function(){
         end.elem = this
         laydate(end);//对两个日期进行关联
       }
 
 </script>

三、弹出框功能

layer.open的使用;

 <script src="//res.layui.com/layui/build/layui.js" charset="utf-8"></script>
 <!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 -->
 
 <script>
 //加载layui
 layui.use('layer', function(){ //独立版的layer无需执行这一句
   var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句
     var addBoxIndex = -1;//记录是否弹出
     //获取事件,点击事件#add按钮id
     $('#add').on('click', function() {
         if(addBoxIndex !== -1)
             return;
         //本表单通过ajax加载 --以模板的形式,当然你也可以直接写在页面上读取
         //ShiJian-form.html弹出后显示的界面
         $.get('ShiJian-form.html', null, function(form) {
             addBoxIndex = layer.open({
                 type: 1,
                 title: '添加事件',//弹出框标题
                 content: form,
                 btn: ['保存', '取消'],
                 shade: false,
                 offset: ['100px', '30%'],
                 area: ['700px', '600px'],
                 zIndex: 19950924,
                 maxmin: true,
                 yes: function(index) {
                 //确定按钮回调方法
                  layer.close(index);//这块是点击确定关闭这个弹出层
 
                  location.reload(); //刷新,对弹出前的页面进行刷新
                  setTimeout(function(){
                       top.layer.close(index);
                       top.window[iframeName].frames.location.reload();
                       }, 100);//延时0.1秒,对应360 7.1版本bug
                 },
                 full: function(elem) {
                 //取消和关闭按钮触发的回调
                     var win = window.top === window.self ? window : parent.window;
                     $(win).on('resize', function() {
                         var $this = $(this);
                         elem.width($this.width()).height($this.height()).css({
                             top: 0,
                             left: 0
                         });
                         elem.children('div.layui-layer-content').height($this.height() - 95);
                     });
                 },
                 success: function(layero, index) {
                 //层弹出后的成功回调方法
 
                 },
                 end: function() {
                 //层销毁后触发的回调
                     addBoxIndex = -1;
                 }
             });
         });
     });
 });
 
 });
 
 </script>

推荐文章
layui中关于弹出层关闭和刷新问题

描述:主页面,弹出第一个弹框,第一个弹框中在弹出第二个弹框,如图:1是主页面,2是子弹窗,3是孙弹窗功能一:好了,第一个我要实现的功能是点击弹窗3的确定之后关闭弹窗3上js代码,先贴出如何在主页面1中

layui框架中常见表单排版:水平+垂直排版

平常我们经常用到的表单排版方式常见的有两种,layui文档中已经给出垂直的排版方式,来源:https://www.layui.com/doc/element/form.html。我们做后台的时候也会用

layui中如何获取表格全部数据?

layui中获取表格全部数据第一步可以通过layui.table.cache["testReload"]的方式来获取表格全部数据,其中testReload是表格id第二步打开网页,我们可以看一下要获取

layui是什么软件?

layui不是软件,它是一款采用自身模块规范编写的前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到AP

浅谈layui表单中的inline和block

layui表单中的inline和block:block:block元素会独自占一行,多个block元素各自新起一行,默认情况下,block元素宽度自动填充其父元素宽度 单行输入框 验证必填项

layui表格中怎么显示图片?

layui的表格使用还是非常简单的,layui文档中已经非常详细,下面直接上代码了1、jsp代码 发布Banner 2、然后是js代码layui.use('table',function()

浅谈layui文件上传、预览及修改

单文件上传1、HTML &#xe67c;上传客服二维码 * 开始上传 温馨提示:每次最多上传一张图片,单张图片的大小不超过2MB 2、js部分varform=layui.for

如何使用webpack打包layui?(实践)

总的来说打包webpack打包layui要解决几个问题:1、解决引入layui-src报错的问题2、layui插件的打包方式3、解决打包后样式不生效的问题解决上面几个问题,基本就能成功打包了首先安装l

layui之关于表格数据变更的一种处理方式

表格数据变更,一般包括几个内容:新增、修改、删除、移动,开发中经常会面临的一个问题就是变更之后如何将数据同步到节点上,一直以来个人的建议还是利用表格重载,不管是url模式的还是data模式的实际都是需

layui是啥框架?

layui首个版本发布于2016年金秋,她区别于那些基于MVVM底层的UI框架,却并非逆道而行,而是信奉返璞归真之道。准确地说,她更多是为服务端程序员量身定做,你无需涉足各种前端工具的复杂配置,只需面

layui的模块是什么意思?

layui是一款采用自身模块规范编写的前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到API的每一处细

layui怎么设置时间选择框?

Layui中时间格式的输入框:html代码: 选择日期: -- - js代码:layui.use(['layer','form','table','laydate'],function()

layui兼不兼容ie8?

layui兼不兼容ie8?layui兼容ie8,layui兼容人类正在使用的全部浏览器(IE6/7除外),可作为PC端后台系统与前台界面的速成开发方案。layui(谐音:类UI)是一款采用自身模块规范

layui如何抓取表单数据?

注意事项:1、layui中提交按钮是基于“监听”机制实现的。2、form.on()的调用需置于layui.use的回调函数中。3、末尾的'returnfalse'不可或缺,以确保不会触发页面刷新。注意

浅谈layui中使用函数layui.define的方法

前言:1、如果你深刻理解并合理运用layui.define,那么本篇对你来说有点浪费时间了。2、如果你对于“Javascript模块化开发”听都没听过,更别说还要理解它。那么建议可以先在网络上找找什么

layui框架之如何导出表格全部数据?

2020.1.16最近终于又用到了导出表格,我在实际项目里使用了上次发现的导出全部数据方法,然后遇到了一些问题,并进行了解决,终于可以正式写在博客中了。整体代码: //导出表格配置 table.r

layui input只读属性是什么?

layuiinput只读属性是什么?layuiinput只读属性是readonly。readonly属性规定输入字段为只读。只读字段是不能修改的。不过,用户仍然可以使用tab键切换到该字段,还可以选中

layui数据表格删除当前行的方法

数据表格如下:t2={ elem:'#test2', data:tableData2, page:false, width:$(parent.window).width()-50, cols:[[ {

layui时间控件清空之后无法正常使用怎么办?

解决layui时间控件清空之后无法正常使用的问题,以及时间范围的选择。共有两种解决方式:方式一(layui1.x):html代码: js代码:varstart={ istime:tru

layui的优缺点是什么?

layui是一款采用自身模块规范编写的前端UI框架,它遵循原生的HTML/CSS/JS书写方式。它虽然外在极简,但是内容丰富,里面包含众多组件从核心代码到API都非常适合界面的快速开发。事实上layu