【layUI】：项目搭建|+分页器demo+弹窗的使用注意事项+layui与jquery结合使用

最新推荐文章于 2023-03-15 18:33:36 发布

BBbila

最新推荐文章于 2023-03-15 18:33:36 发布

阅读量451

点赞数

分类专栏：前端文章标签： layUI html5

本文链接：https://blog.csdn.net/qq_40610760/article/details/106545662

版权

前端专栏收录该内容

62 篇文章 1 订阅

订阅专栏

一、下载layui文件包，部署到项目目录

https://www.layui.com/

在html中引入其中两个文件。

二、以分页器为例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="layui/css/layui.css">
  <style>
    #biuuu_city_list {
      width: 400px;
      height: auto;
      background-color: aquamarine;
      box-sizing: border-box;
      padding: 10px 30px;
    }
  </style>
</head>
<body>
   
  <div id="demo20"></div>
  <ul id="biuuu_city_list"></ul> 

  <script src="layui/layui.js"></script>
  <script>
    layui.use('laypage', function(){
      var laypage = layui.laypage
     
      //测试数据
      var data = [
        '北京',
        '上海',
        '广州',
        '深圳',
        '杭州',
        '长沙',
        '合肥',
        '宁夏',
        '成都',
        '西安',
        '南昌',
        '上饶',
        '沈阳',
        '济南',
        '厦门',
        '福州',
        '九江',
        '宜春',
        '赣州',
        '宁波',
        '绍兴',
        '无锡',
        '苏州',
        '徐州',
        '东莞',
        '佛山',
        '中山',
        '成都',
        '武汉',
        '青岛',
        '天津',
        '重庆',
        '南京',
        '九江',
        '香港',
        '澳门',
        '台北'
      ];
      
      //调用分页
      laypage.render({
        elem: 'demo20'
        ,count: data.length
        ,jump: function(obj){
          //模拟渲染
          document.getElementById('biuuu_city_list').innerHTML = function(){
            var arr = []
            ,thisData = data.concat().splice(obj.curr*obj.limit - obj.limit, obj.limit);
            layui.each(thisData, function(index, item){
              arr.push('<li>'+ item +'</li>');
            });
            return arr.join('');
          }();
        }
      });
    });
   
  </script>

</body>
</html>

效果：

三、在项目中使用弹窗的时候，弹窗模块有单独的样式文件，处理引入以上的css文件外，还要引入layer.css。否则不生效

四、项目中用jquery处理页面逻辑，（layui官网有示例）

//使用拓展模块
layui.use(['jquery', 'cookie'], function(){
  var $= layui.jquery
  ,cookie= layui.cookie;
});

BBbila

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【layUI】：项目搭建|+分页器demo+弹窗的使用注意事项+layui与jquery结合使用

一、下载layui文件包，部署到项目目录https://www.layui.com/在html中引入其中两个文件。二、以分页器为例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&
复制链接

扫一扫