Shulou(Shulou.com)06/03 Report--

This article mainly introduces the main functions of layui, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

I. paging function

Layui framework paging is used, in fact, layui paging is very simple, you only need to pass in a total number of pages to make good use of this function. Let's take a look at my introduction to layui framework paging.

Note: the number of pages passed in is not the number of database queries

The use of laypage

/ / Interface container / / load layui layui.use (['laypage',' layer'], function () {var laypage = layui.laypage, layer = layui.layer) Laypage ({cont: 'demo1'// interface container ID, pages:data.number1 / / total number of pages, groups: 5 / / continuously displays the number of pages, jump: function (obj, first) {/ / gets the current page, which is used to request the corresponding data var curr = obj.curr from the server / / send a request to the server to calculate the number of queries by the current number of pages}});}

Related recommendation: "layui Framework tutorial"

II. Layui time and Day function

The following code is a start and end date function

Time / / load layui layui.use (['laydate','paging',' form'], function () {var $= layui.jquery, paging = layui.paging (), layerTips = parent.layer = = undefined? Layui.layer: parent.layer, / / get the layer object of the parent window layer = layui.layer, / / get the layer object of the current window form = layui.form () Var start = {min:'1900-01-01 00 max / set the minimum date, max: '2099-06-16 23 15 15 59 Swiss 59 hand / set the maximum date, istoday: false, choose: function (datas) {end.min = datas / / after the start date is selected, reset the minimum date of the end date end.start = datas / / set the initial value of the end date to the start date}} Var end = {min:'1900-01-01 00 max / set the minimum date, max: '2099-06-16 23 15 15 59 Swiss 59 hand / set the maximum date, istoday: false, choose: function (datas) {start.max = datas / / after the end date is selected, reset the maximum date of the start date}}; / / LAY_demorange_s date container ID document.getElementById ('LAY_demorange_s'). Onclick = function () {start.elem = this; laydate (start) / / Associate two dates} / / LAY_demorange_e date container ID document.getElementById ('LAY_demorange_e'). Onclick = function () {end.elem = this laydate (end); / / associate two dates}

Third, pop-up box function

The use of layer.open

/ / loading layui layui.use ('layer', function () {/ / standalone version of layer does not need to execute the sentence var $= layui.jquery, layer = layui.layer; / / independent version of layer does not need to execute the sentence var addBoxIndex =-1 / / record whether the event pops up / / get the event, click the event # add button id $('# add') .on ('click', function () {if (addBoxIndex! = =-1) return / / this form is loaded through ajax-in the form of a template Of course, you can also write directly on the page to read / / ShiJian-form.html the interface $.get ('ShiJian-form.html', null, function (form) {addBoxIndex = layer.open ({type: 1, title:' add event', / / pop-up box title content: form) Btn: ['save', 'cancel'], shade: false, offset: ['100pxspell,' 30%'], area: ['700pxspell,' 600px'], zIndex: 19950924, maxmin: true Yes: function (index) {/ / confirm the button callback method layer.close (index) / / Click OK to close the pop-up layer location.reload (); / / refresh, refresh the page before the pop-up setTimeout (function () {top.layer.close (index); top.window [iframeName] .frames.location.reload ();}, 100) / / delay 0.1 seconds, corresponding to 360 7.1 version bug}, full: function (elem) {/ / callback triggered by cancel and close buttons 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) {/ / callback method after layer popup}, end: function () {/ / callback triggered after layer termination addBoxIndex =-1 Thank you for reading this article carefully. I hope the article "what are the main functions of layui" shared by the editor will be helpful to you? at the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.