精华内容
下载资源
问答
  • thinkphp5 layui分页样式

    万次阅读 2019-09-02 13:23:08
    tp5之layui分页样式 1.分页类 路径:\thinkphp\library\think\paginator\driver Layui.php <?php namespace think\paginator\driver; use think\Paginator; class Layui extends Paginator { /** * 上一...

    tp5之layui分页样式

    1.分页类

    路径:\thinkphp\library\think\paginator\driver

    Layui.php

    <?php
    namespace think\paginator\driver;
    use think\Paginator;
    class Layui extends Paginator
    {
    
        /**
         * 上一页按钮
         * @param string $text
         * @return string
         */
        protected function getPreviousButton($text = "上一页")
        {
    
            if ($this->currentPage() <= 1) {
                return $this->getDisabledTextWrapper($text);
            }
    
            $url = $this->url(
                $this->currentPage() - 1
            );
    
            return $this->getPageLinkWrapper($url, $text);
        }
    
        /**
         * 下一页按钮
         * @param string $text
         * @return string
         */
        protected function getNextButton($text = '下一页')
        {
            if (!$this->hasMore) {
                return $this->getDisabledTextWrapper($text);
            }
    
            $url = $this->url($this->currentPage() + 1);
    
            return $this->getPageLinkWrapper($url, $text);
        }
    
        /**
         * 页码按钮
         * @return string
         */
        protected function getLinks()
        {
            if ($this->simple)
                return '';
    
            $block = [
                'first'  => null,
                'slider' => null,
                'last'   => null
            ];
    
            $side   = 3;
            $window = $side * 2;
    
            if ($this->lastPage < $window + 6) {
                $block['first'] = $this->getUrlRange(1, $this->lastPage);
            } elseif ($this->currentPage <= $window) {
                $block['first'] = $this->getUrlRange(1, $window + 2);
                $block['last']  = $this->getUrlRange($this->lastPage - 1, $this->lastPage);
            } elseif ($this->currentPage > ($this->lastPage - $window)) {
                $block['first'] = $this->getUrlRange(1, 2);
                $block['last']  = $this->getUrlRange($this->lastPage - ($window + 2), $this->lastPage);
            } else {
                $block['first']  = $this->getUrlRange(1, 2);
                $block['slider'] = $this->getUrlRange($this->currentPage - $side, $this->currentPage + $side);
                $block['last']   = $this->getUrlRange($this->lastPage - 1, $this->lastPage);
            }
    
            $html = '';
    
            if (is_array($block['first'])) {
                $html .= $this->getUrlLinks($block['first']);
            }
    
            if (is_array($block['slider'])) {
                $html .= $this->getDots();
                $html .= $this->getUrlLinks($block['slider']);
            }
    
            if (is_array($block['last'])) {
                $html .= $this->getDots();
                $html .= $this->getUrlLinks($block['last']);
            }
    
            return $html;
        }
    
        /**
         * 渲染分页html
         * @return mixed
         */
        public function render()
        {
            if ($this->hasPages()) {
                if ($this->simple) {
                    return sprintf(
                        '<ul class="pager">%s %s</ul>',
                        $this->getPreviousButton(),
                        $this->getNextButton()
                    );
                } else {
                    return sprintf(
                        '%s %s %s',
                        $this->getPreviousButton(),
                        $this->getLinks(),
                        $this->getNextButton()
                    );
                }
            }
        }
    
        /**
         * 生成一个可点击的按钮
         *
         * @param  string $url
         * @param  int    $page
         * @return string
         */
        protected function getAvailablePageWrapper($url, $page)
        {
            return '<a href="' . htmlentities($url) . '">' . $page . '</a>';
        }
    
        /**
         * 生成一个禁用的按钮
         *
         * @param  string $text
         * @return string
         */
        protected function getDisabledTextWrapper($text)
        {
            return '<a class="layui-laypage-prev" >' . $text . '</a>';
        }
    
        /**
         * 生成一个激活的按钮
         *
         * @param  string $text
         * @return string
         */
        protected function getActivePageWrapper($text)
        {
            return '<span class="layui-laypage-curr"> <em class="layui-laypage-em"></em><em>' . $text . '</em></span>';
        }
    
        /**
         * 生成省略号按钮
         *
         * @return string
         */
        protected function getDots()
        {
            return $this->getDisabledTextWrapper('...');
        }
    
        /**
         * 批量生成页码按钮.
         *
         * @param  array $urls
         * @return string
         */
        protected function getUrlLinks(array $urls)
        {
            $html = '';
    
            foreach ($urls as $page => $url) {
                $html .= $this->getPageLinkWrapper($url, $page);
            }
    
            return $html;
        }
    
        /**
         * 生成普通页码按钮
         *
         * @param  string $url
         * @param  int    $page
         * @return string
         */
        protected function getPageLinkWrapper($url, $page)
        {
            if ($page == $this->currentPage()) {
                return $this->getActivePageWrapper($page);
            }
    
            return $this->getAvailablePageWrapper($url, $page);
        }
    }

    2.配置文件

    paginate.php

    <?php
    /**
     * @auther: xxf
     * Date: 2019/9/2
     * Time: 10:24
     */
    //分页配置
    return [
        'type' => 'Layui',
        'var_page' => 'page',
    ];

    3.模型查询

     public function getUserShowList($size = 20, $where = null)
        {
            $res = $this
                ->field('id,title,list_order,is_top,create_time,create_time time')
                ->where($where)
                ->order(['is_top' => 'desc', 'list_order' => 'desc', 'id' => 'desc'])
                ->paginate($size);
          
            return $res;
        }

    4.模板渲染

    <div class="layui-box layui-laypage layui-laypage-molv">{$list|raw}</div>

    效果

    展开全文
  • layui分页样式改变

    千次阅读 2020-01-17 09:04:45
    layui分页的原始样式: 修改成如下样式: 新增css代码如下:(pageBox为放置分页的容器id) /*修改layui分页的样式*/ #pageBox .layui-laypage a{ color: #94999F; font-size: 12px; } #pageBox .layui-...

    layui分页的原始样式:

    修改成如下样式:

    新增css代码如下:(pageBox为放置分页的容器id)

    /*修改layui分页的样式*/
    #pageBox .layui-laypage a{
        color: #94999F;
        font-size: 12px;
    }
    #pageBox .layui-laypage em{
         font-size: 12px;
    }

    .layui-laypage .layui-laypage-spr{
        margin-right: 5px;
    }
    #pageBox .layui-laypage a{
        margin-right: 5px;
    }
    #pageBox .layui-laypage-curr{
        margin-right: 5px;
    }
    .layui-laypage-prev,.layui-laypage-next{
        font-family: "fontello";
    }
    #pageBox .layui-laypage .layui-laypage-curr .layui-laypage-em{
        background-color: #1FB1EA;
    }

    #pageBox .layui-laypage a,#pageBox  .layui-laypage span:not(.layui-laypage-skip){
        box-sizing: border-box;
        padding: 4px 9px;
        height: 26px;
        width: 26px;
        line-height: 1.42857143;
    }
    #pageBox  .layui-laypage .layui-laypage-count{
        width: auto!important;
        float: none;
        color: #94999F;
        font-size: 12px;
    }
    #pageBox .layui-laypage-btn{
        background-color: #1FB1EA;
        color: #FFFFFF;
        width: 50px;
        height: 26px;
        padding: 1px 5px;
        line-height: 1.5;
    }

    #pageBox .layui-laypage a,#pageBox .layui-laypage-spr{
        border: 0px;
    }
    #pageBox a.layui-laypage-prev,#pageBox a.layui-laypage-next{
        border: 1px solid #ddd;
    }
    #pageBox>.layui-laypage>a:hover{
        color: #fff;
        background-color: #58CAF4;
        border-color: #58CAF4;
    }
    #pageBox a.layui-laypage-prev:hover,#pageBox a.layui-laypage-next:hover{
        color: #94999F;
         background-color: #fff;
        border-color: #ddd;
    }
    #pageBox .layui-laypage-curr em:not(.layui-laypage-em){
        line-height: 1.328571;
    }
    #pageBox .layui-laypage-btn:hover{
        color: #656A71;
        border-color: #DEE1E3;
        background-color: #fff;
    }
    </style>

     

    js的设置:

        prev: "",//是字体图标的方框
        next: "",
        layout: ['count', 'prev', 'page', 'next','skip'],

    展开全文
  • LayUI默认样式调整

    千次阅读 2019-12-20 16:22:44
    1、Layui 表格一个单元格显示多行数据 .layui-table-cell { height: auto; text-overflow: inherit; overflow: visible; white-space: normal; word-wrap: break-word; } 2、Layui表格,单元格宽度溢出,...
    • 1、Layui 表格一个单元格显示多行数据
    .layui-table-cell {
        height: auto;
        text-overflow: inherit;
        overflow: visible;
        white-space: normal;
        word-wrap: break-word;
    }
    
    • 2、Layui表格,单元格宽度溢出,鼠标移入时会出现下拉框,点击时会弹窗显示所有单元格内容,影响美观,可在表格渲染完毕后的done事件中解绑该事件
    $('.layui-table-body').off('mouseenter','td');
    • 3、Layui控件会重写当前div(传入layui控件的元素),一些style不会生效,要获取当前控件的兄弟元素或父子元素:
    • <div id="likeLevel' + i + '">' + 这里是控件div,可能在表格里,因此每个元素设置id不方便 + '</div><div style="display:none;">' + 把一个其他地方用到的属性隐藏在这里 +'</div>

      下文中{其他作用域}this.spanthis可以指向控件内的元素,但不能this.next() {this本身是一个包含了当前控件的对象,但不是指向某一个元素,所以this.parent()指向别的地方会报错}

      因此,想要使用旁边元素,可以先指向子元素,在指到父元素:

      this.span.parent().next().text();

     

     

     

    展开全文
  • thinkphp5 默认分页改为 Layui分页样式

    千次阅读 2018-08-08 09:43:18
    在extend目录下新增layui目录 新建Layui.php,内容如下 &lt;?php namespace layui; use think\Paginator; class Layui extends Paginator { protected $uri; /** * 上一页按钮 * @param string $text...

    在extend目录下新增layui目录

    新建Layui.php,内容如下

    <?php
    
    
    namespace layui;
    
    use think\Paginator;
    
    class Layui extends Paginator
    {
        protected $uri;
        /**
         * 上一页按钮
         * @param string $text
         * @return string
         */
        protected function getPreviousButton($text = "上一页")
        {
    
            if ($this->currentPage() <= 1) {
                return $this->getDisabledTextWrapper($text);
            }
    
            $url = $this->url(
                $this->currentPage() - 1
            );
    
            return $this->getPageLinkWrapper($url, $text);
        }
    
        /**
         * 下一页按钮
         * @param string $text
         * @return string
         */
        protected function getNextButton($text = '下一页')
        {
            if (!$this->hasMore) {
                return $this->getDisabledTextWrapper($text);
            }
    
            $url = $this->url($this->currentPage() + 1);
    
            return $this->getPageLinkWrapper($url, $text);
        }
    
        /**
         * 页码按钮
         * @return string
         */
        protected function getLinks()
        {
            if ($this->simple)
                return '';
    
            $block = [
                'first'  => null,
                'slider' => null,
                'last'   => null
            ];
    
            $side   = 3;
            $window = $side * 2;
    
            if ($this->lastPage < $window + 6) {
                $block['first'] = $this->getUrlRange(1, $this->lastPage);
            } elseif ($this->currentPage <= $window) {
                $block['first'] = $this->getUrlRange(1, $window + 2);
                $block['last']  = $this->getUrlRange($this->lastPage - 1, $this->lastPage);
            } elseif ($this->currentPage > ($this->lastPage - $window)) {
                $block['first'] = $this->getUrlRange(1, 2);
                $block['last']  = $this->getUrlRange($this->lastPage - ($window + 2), $this->lastPage);
            } else {
                $block['first']  = $this->getUrlRange(1, 2);
                $block['slider'] = $this->getUrlRange($this->currentPage - $side, $this->currentPage + $side);
                $block['last']   = $this->getUrlRange($this->lastPage - 1, $this->lastPage);
            }
    
            $html = '';
    
            if (is_array($block['first'])) {
                $html .= $this->getUrlLinks($block['first']);
            }
    
            if (is_array($block['slider'])) {
                $html .= $this->getDots();
                $html .= $this->getUrlLinks($block['slider']);
            }
    
            if (is_array($block['last'])) {
                $html .= $this->getDots();
                $html .= $this->getUrlLinks($block['last']);
            }
    
            return $html;
        }
    
        /**
         * 渲染分页html
         * @return mixed
         */
        public function render()
        {
            if ($this->hasPages()) {
                if ($this->simple) {
                    return sprintf(
                        '<ul class="pager">%s %s</ul>',
                        $this->getPreviousButton(),
                        $this->getNextButton()
                    );
                } else {
                    return sprintf(
                        '<div class="layui-laypage">%s %s %s %s %s</div>',
                        $this->getTotal($this->total),
                        $this->getPreviousButton(),
                        $this->getLinks(),
                        $this->getNextButton(),
                        $this->goPage()
                    );
                }
            }
        }
    
        /**
         * 生成一个可点击的按钮
         *
         * @param  string $url
         * @param  int    $page
         * @return string
         */
        protected function getAvailablePageWrapper($url, $page)
        {
            return '<a href="' . htmlentities($url) . '">' . $page . '</a>';
        }
    
        /**
         * 生成一个禁用的按钮
         *
         * @param  string $text
         * @return string
         */
        protected function getDisabledTextWrapper($text)
        {
            return '<a class="layui-laypage-prev layui-disabled" >' . $text . '</a>';
        }
    
        /**
         * 生成一个激活的按钮
         *
         * @param  string $text
         * @return string
         */
        protected function getActivePageWrapper($text)
        {
            return '<span class="layui-laypage-curr"><em class="layui-laypage-em"></em><em>' . $text . '</em></span>';
        }
    
        /**
         * 生成省略号按钮
         *
         * @return string
         */
        protected function getDots()
        {
            return $this->getDisabledTextWrapper('...');
        }
    
        /**
         * 批量生成页码按钮.
         *
         * @param  array $urls
         * @return string
         */
        protected function getUrlLinks(array $urls)
        {
            $html = '';
    
            foreach ($urls as $page => $url) {
                $html .= $this->getPageLinkWrapper($url, $page);
            }
    
            return $html;
        }
    
        /**
         * 生成普通页码按钮
         *
         * @param  string $url
         * @param  int    $page
         * @return string
         */
        protected function getPageLinkWrapper($url, $page)
        {
            if ($page == $this->currentPage()) {
                return $this->getActivePageWrapper($page);
            }
    
            return $this->getAvailablePageWrapper($url, $page);
        }
    
        /**
         *  生成总条数
         * @param $num
         * @return string
         */
        protected function getTotal($num)
        {
            return '<span class="layui-laypage-count">共'.$num.'条</span>';
        }
    
        /**
         * 跳转
         * @return string
         */
        protected function goPage()
        {
    
            $this->getUri();
            return '<span class="layui-laypage-skip">到第<input type="text" min="1" value="1" onkeydown="javascript:if(event.keyCode==13){var page=(this.value>'.$this->lastPage.')?'.$this->lastPage.':this.value;location=\''.$this->uri.'page=\'+page+\'\'}" class="layui-input" ><button type="button" class="layui-laypage-btn" onclick="javascript:var page =(this.previousSibling.value > '.$this->lastPage.') ? '.$this->lastPage.': this.previousSibling.value;location=\''.$this->uri.'page=\'+page+\'\'">确定</button></span>';
        }
    
    
        /**
         * 获取url
         */
        private function getUri(){
            $url=$_SERVER["REQUEST_URI"].(strpos($_SERVER["REQUEST_URI"], '?')?'':"?");
            $parse=parse_url($url);
    
            if(isset($parse["query"])){
                parse_str($parse['query'],$params);
                unset($params["page"]);
                $url=$parse['path'] . '?' . http_build_query($params) .'&';
            }else{
                $url=$parse['path'] . '?';
            }
    
            $this->uri = $url;
    
        }
    }

    修改config.php配置

     //分页配置
        'paginate'               => [
           /* 'type'      => 'bootstrap',*/
            'type'      => 'layui\Layui',
            'var_page'  => 'page',
            'list_rows' => 15,
        ],

    在模板中引入

    {$list->render()}

    效果如下

    展开全文
  • 首先在tp源码根目录 thinkphp... driver 文件夹内新增 Layui.php 这个类文件 然后复制下面的代码粘贴进去。 <?php // +---------------------------------------------------------------------- // | ThinkPH...
  • 1.先配置你的分页参数: //分页配置 'paginate'=>[ 'type'=>'Layui', 'var_page'=>'page', 'list_rows'=>15, 'newstyle'=>true, ], ...
  • LayUi

    2020-05-07 14:10:38
    1.layui 图标的使用 第一步:引入文件 第二步:需要一个容器,例如DIV,TABLE,UL,并添加样式。...查看样式:https://www.layui.com/doc/element/icon.html 2.layui按钮的使用 一个标准的按钮 一个可跳转的按钮...
  • LayUI

    2020-09-02 11:44:07
    由国⼈开发,16年出⼚的框架,其主要提供了很多好看、⽅便的样式,并且基本拿来即⽤,和Bootstrap有些相似,但该框架有个极⼤的好处就是定义了很多前后端交互的样式接⼝,如分⻚表格,只需在前端配置好接⼝,后端则...
  • layUI

    2020-12-04 17:09:17
    layUI layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。 https://www.layui.com/doc/ 将layUI全部路径导入项目(注意项目文件路径) ...
  • Layui

    2021-05-30 10:04:37
    Layui 开发工具与关键技术:layui 作者:李则农 撰写时间:2021/5/27 开始使用 - 入门指南 1. 官网首页下载 你可以在我们的官网首页下载到 layui 的最新版,它经过了自动化构建,更适合用于生产环境。目录...
  • layui排序后table样式丢失

    千次阅读 2019-05-24 16:00:34
    table.on('sort(goods-table2)', function(obj){ //注:tool是工具条事件名,goods-table2是table原始容器的属性 lay-filter="对应的... $(".layui-table-main .layui-table tbody tr td").css("height","120px"); ...
  • layui 登录页面样式+短信接口

    千次阅读 2019-04-29 15:44:28
    <span class="username" style="height:19px">用户:</span> <div class="clear"></div> <span class="username"style="height:19px">密码:</span> <div class="clear"></div> ...
  • layui laydate时间控件样式放大

    千次阅读 2020-06-04 17:25:26
    .laydate-set-ym span, .layui-laydate-header i{ font-size: 30px; } .layui-laydate-content td, .layui-laydate-content th{ padding: 5px 15px !important; font-size: 26px !important; } .layui-laydate-...
  • layui

    2018-12-13 13:41:39
    directory 栅格 颜色 图标 动画 contents ...layui-container&amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;gt; #固定宽度 &amp;amp;amp;amp;amp;amp;lt;div calss=&am
  • layUI笔记

    2021-02-16 19:51:46
    layUI笔记 一、引言 1.1 介绍 官网:https://www.layui.com/ 在官网首页,可以很方便的下载LayUI LayUI 是一款经典模块化前端 UI 框架,我们只需要定义简单的HTML、CSS、JS即可实现很复杂的前端效果。 使得前端...
  • link rel="stylesheet" type="text/css" href="/static/css/layui.css"> <script charset="utf-8" src="/static/js/jquery-3.4.1.min.js"></script> <script charset="utf-8" src="/static/js/vue...
  • layui使用

    2019-03-17 23:24:37
    LK最近使用layui跟换i了系统中的前端框架,现将一些知识点做一总结: layui官网:https://www.layui.com/doc/ 介绍:是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,...
  • 在之前的版本,默认复选框是要有值得,默认为“勾选”...<span xss=removed> </span><div class=layui-form> <table class=layui-table> <th><input type=checkbox name= lay-skin=primary lay-filter=all
  • ../../static/frame/layui-v2.5.6/layui/css/layui.css"> <link rel="stylesheet" href="../../static/css/log/log.css"> <link rel="stylesheet" href=...
  • Layui表格自定义表格字体样式

    千次阅读 2019-08-16 17:08:48
    Layui表格中单元格样式可通过templet-自定义模板改变单元格内容样式: 在默认情况下,单元格的内容是完全按照数据接口返回的content原样输出的,如果你想对某列的单元格添加链接等其它元素,你可以借助templet参数...
  • 修改layui 数据表格每行样式 tabledivid 是数据表格div的id 其中颜色根据自己喜好调整 #tabledivid .layui-table{ background-color: transparent !important; } #tabledivid .layui-table-view{ background-color...
  • layui弹框

    2019-04-23 14:43:07
    http://layer.layui.com/api.html https://www.layui.com/demo/layer.html ...span id="reset" onclick="uploadfile()">添加</span> function uploadfile() { //window.open(this.hr...
  • layui项目

    千次阅读 2019-07-15 20:43:54
    layui后台框架的搭建 使用npm进行安装 cnpm install layui-src layui重新开始搞起来 使用方法 元素还是自己进行获取注册 事件 将其绑定 具体的样式 直接使用他的就可以;额 layui.use(['jquery', 'layer'], ...
  • layui徽章

    2019-10-02 14:23:50
    相关样式 layui-badge-dot 小圆点 layui-badge 弧形徽章 layui-badge-rim 边框徽章 组合使用 详细代码 <%-- Created by IntelliJ IDEA. User: Lenovo Date: 2019/10/2 Time: 14:15 To change ...
  • 如下所示: ... <span class=layui-badge>正常</span> {{# } else { }} <span class=layui-badge>禁用</span> {{# } }} [removed] layui.use(['layer', 'form','table'], function(){ layer
  • layui案例

    2019-07-10 21:50:35
    文章目录1.导入相关依赖2.dao层去访问数据3.web层去调用dao层给前台返回数据4.在struts_sy.xml进行配置5.js界面6.写jsp 1.导入相关依赖 前言:这个案例写了一个用户表,和角色表,根据用户的所拥有权限展示菜单 ...
  • <span style="color:white;background-color:red;padding:5px;"> ' + d.f5 + ' </span> ' } else { return ' <span > ' + d.f5 + ' </span> ' } } }); 可以使用templet 模板实现每一个单元格...
  • layui学习

    千次阅读 2018-08-05 22:54:06
    1、全局配置:layui.config(options) 2、定义模块:layui.define([mods],callback) 3、加载所需模块:layui.use([mods],callback) 4、其他的方法 二、页面元素(认识) 三、模块规范 四、页面元素(使用) 1...
  • layui给数据表格列添加样式的方式目前我就发现三种方式,如下是给表格的列“类型”添加字体颜色的三种方式。 一、方式一(最简单的方法) 如下给列“类型”添加了字体颜色#f67d06 layList.tableList('userList',&...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,126
精华内容 450
关键字:

layuispan样式