Pop-up layer
1. The pop-up layer is displayed, which will disappear in 3 seconds by default
Layer. MSG (' Data submitted successfully ')Copy the code
2. A confirmation dialog box is displayed
Layer. open({title: 'warm tips ', content:' content '});Copy the code
- If you want to style your pop-up layer separately, add your own class name to the pop-up layer (optional)
Layer. open({title: 'tips ', content:' content ', skin: 'demo-class'});Copy the code- You can also set the global popup layer class
// global use. Layer. config({skin: 'demo-class'})Copy the code3. Common message box Alert
Layer. alert(' just a simple alert ');Copy the code
- Close (index);
Function (index) {//do something layer.close(index); // Close the pop-up layer});Copy the code4. Set a pop-up layer for multiple buttons
1. A simple configuration is usually used as follows: layer.confirm(' Are you sure you want to save the data? Yes: function(index, layero) {console.log(' save button callback '); }}) 2. Can also be set as follows: The default button is ok cancel layer.confirm(' Are you sure you want to save data? }, function(index) {//do something layer.close(index); }); // More comprehensive configuration is as follows: layer.confirm(' Are you sure you want to save data? ', {BTN: [' save ', 'cancel '], // can be infinite buttons yes: function(index, layero) {console.log(' save button callback '); }, btn2: function(index, layero) {console.log(' cancel button callback '); }, cancel: function() {console.log(' top right close callback '); // Default is to turn off the pop-up layer}})Copy the code
5. Tips layer
//eg1 layer.tips(' just to be precise ', '#id'); //eg 2 $('#id').on('click', function(){ var that = this; Layer.tips (' Just want to be precise ', that); });});});}); //eg 3 layer.tips(' top ', '#id', {tips: 1});Copy the code
6. Layer. prompt(options, yes) – Input layer
FormType: 1, // Input field type, support 0 (text) default 1 (password) 2 (multi-line text) value: "", // initial value, default null character maxLength: Example 1 layer.prompt(function(value, index, elem){alert(value); // Get value layer.close(index); }); // Example 2 layer.prompt({formType: 2, value: 'initial value ', title:' Please enter value ', area: ['800px', '350px']}, function(value, index, elem){alert(value); // Get value layer.close(index); });Copy the code
7. Layer.tab (options) -tab layer
Layer. TAB ({area: ['600px', '300px'], TAB: [{title: 'TAB1', content: 'TAB2'}, {title: 'TAB2', content: '2'}, {title: 'TAB3', content:' 3'}]});Copy the code
paging
1. HTML element Settings
<div class="zhuboVideoList"> <div class="listInfo"></div> Data list <div ID ="paging_module" class="paging_module"></div> <div Class ="loadingEnd_module"> </div>Copy the code2. Paging JS Settings
(function ($) {$. PlayBack = {pageObj: {perPage: 12, / / each page shows article how much totalPage: 0, / / the total page number}, init: function () { $.playBack.initZhuboListInfo(0); // Initialize the data list $.playback.pagingSettings (); InitZhuboListInfo: function (iDisplayStart) {var data = {url: $.general.http + 'b.memberuploadvideo.uploadvideolist', iDisplayStart: iDisplayStart, iDisplayLength: $.playBack.pageObj.perPage, }; $.general.AjaxRequest(data, function (res) { if (res.success) { $.playBack.pageObj.totalPage = res.data.iTotalDisplayRecords; var htmls = ''; if (res.data.aaData.length > 0) { $.each(res.data.aaData, function (index, perObj) { htmls += ' <a href="" class="perItem">\n' + ' </a>' }); } else {// Set HTMLS += '<div class="norecord_module">\n' + '< img SRC = "/ template/web/skin/default/images/norecord SVG" Alt = "no record" > \ n '+' < / div > '; } $('.zhuboVideoList').find('.listInfo').append(htmls); } else {layer.open({title: 'warm tips', content: res.reason}); }}); Function () {layui.use('laypage', function () {var layPage = layui.laypage; Render ({elem: $('. ZhuboVideoList ').find('. Paging_module '), // element count: $. PlayBack. PageObj totalPage, / / total number of pages limit: $. PlayBack. PageObj. PerPage, / / each page shows next: 'click to load more' layout: [' next '], jump: Function (obj, first) {// If (! first) { var iDisplayStart = $.general.getPageInfo(obj.curr, $.playBack.pageObj.perPage).iDisplayStart; $.playBack.initZhuboListInfo(iDisplayStart); } //////////// var $dom_zhuboVideoList = $('.zhuboVideoList'); $dom_zhubovideolist. find('.paging_module').hide(); $dom_zhuboVideoList ('.paging_module').hide(); $dom_zhuboVideoList.find('.loadingEnd_module').hide(); $dom_zhubovideolist.find ('.paging_module').hide(); $dom_zhubovideolist.find ('.paging_module').hide(); $dom_zhuboVideoList.find('.loadingEnd_module').show(); } else { $dom_zhuboVideoList.find('.paging_module').show(); $dom_zhuboVideoList.find('.loadingEnd_module').hide(); }} //////////}}); }); }, // Page Settings -- page format: 123456.... pagingSettings: function () { layui.use('laypage', function () { var laypage = layui.laypage; Render ({elem: $('. ZhuboVideoList ').find('. Paging_module '), // element count: $. PlayBack. PageObj totalPage, / / total number of pages limit: $. PlayBack. PageObj. PerPage, / / each page shows prev: '<', next: '>' jump: Function (obj, first) {// If (! first) { var iDisplayStart = $.general.getPageInfo(obj.curr, $.playBack.pageObj.perPage).iDisplayStart; $.playBack.initZhuboListInfo(iDisplayStart); } the if (obj. Count = = 0 | | obj. Pages) {/ / data query is less than $(' user_myMsg '), find (' paging_module '). Hide (); }}}); }); }, } })(jQuery)Copy the code3. Pagination of information flow
<div class="user_myMsg"> <! - the message list -- > < div id = "msgList" class = "msgList" > < / div > < / div > 2. Do not display loading more Settings css. layui-flow-more {a {display: none! important; Function ($) {$.mymsg2 = {pageObj: {totalPage: 0, totalPage: 0, totalPage: 0, totalPage: 0, totalPage: 0, totalPage: 0, totalPage: 0, totalPage: 0, totalPage: 0, totalPage: 0, totalPage: 0, totalPage: 0, totalPage: 0, totalPage: 0, totalPage: 0, totalPage: 0, totalPage: 0, totalPage: 0, totalPage: 0, totalPage: 0, totalPage: 0 function () { $.myMsg2.msgFlowList(); }, // msgFlowList: function () {layui.use('flow', function () {var flow = layui.flow; Flow. load({elem: '#msgList', // specify list container end: '<div style="display: block;" Class ="loadingEnd_module"> Load all ~ </div>', MB: 10, done: Function (page, next) {// Reach critical MB value (default scroll trigger), $.myMSg2. getMsgInfo(page,function (dataArrayHtmls) {next(dataArrayHtmls. Join (" "), $.myMsg2.pageObj.curPage < $.myMsg2.pageObj.totalPage); }); }}); }); }, getMsgInfo:function (curPage,callback) { $.myMsg2.pageObj.curPage = curPage; var listHtmlsArray = []; var data = { url: $.general.http + 'b.notice.querysyssendmsg', sSorts: 'read_time,asc; send_time,desc', iDisplayStart: ($.myMsg2.pageObj.perPage) * ($.myMsg2.pageObj.curPage - 1), iDisplayLength: $.myMsg2.pageObj.perPage, }; $.general.AjaxRequest(data, Function (res) {if (res) success) {/ / set the total number of pages $. MyMsg2. PageObj. TotalPage = math.h ceil (res) data) iTotalDisplayRecords / $.myMsg2.pageObj.perPage); if (res.data.iTotalDisplayRecords > 0) { $('.layui-flow-more').show(); $.each(res.data.aaData, function (index, perObj) { var htmls = '<div data-id=' + perObj.id + ' class="perItemMsg">\n' + ' <div class="title">' + perObj.msg_title + '===' + (perObj.id) + '</div>\n' + ' <div class="time">' + perObj.send_time + '</div>\n' + '</div>'; listHtmlsArray.push(htmls); }); } else { $('.layui-flow-more').hide(); Var HTMLS = '<div class="norecord_module">' + '< img style="width: 350px; SRC = "/ template/web/skin/default/images/norecord SVG" Alt = "no record" > \ n '+' < / div > '; listHtmlsArray.push(htmls); } callback(listHtmlsArray); } else {layer.open({title: 'warm tips', content: res.reason}); } }, true, null, true); } } })(jQuery)Copy the codeshuffling
1. The HTML Settings
<div class=" layui-Carousel "id="test1"> <div carousel-item> <div> Item 1</div> <div> Item 2</div> <div> Item 3</div> </div> </div> </div>Copy the code2. Js configuration items
layui.use('carousel', function() { var carousel = layui.carousel; Carousel. render({elem: '#test1', width: '100%', // set container width arrow: 'always', // always display arrows //,anim: 'updown' // Toggle animation}); });Copy the code3. Common parameters
4. Switch events
- The callback function returns an object argument with the following members:
var carousel = layui.carousel; Carousel. on('change(test1)', function(obj){ console.log(obj.index); // The index of the current entry console.log(obj.prevIndex); // Console. log(obj.item); // Element object of the current entry});Copy the code5. Reset the multicast
- When the carousel.render(options) method is executed, there is an object that returns the current instance. This object contains properties and methods used to manipulate the current multicast
var ins = carousel.render(options); // reset ins.reload(options);Copy the codeBread crumbs
- The default Settings
< span class = "layui - breadcrumb" > < a href = "" > home page < / a > < a href =" "> my echo wall < / a > < a > < cite > title content < cite > < / a > < / span >Copy the code- Customize the separator with lay-separator=”-“
< span class = "layui - breadcrumb lay - the separator =" ">" > < a href = "" > home page < / a > < a href =" "> my echo wall < / a > < a > < cite > title content < cite > < / a > </span>Copy the code