侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 中国象棋ai
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

对于layui框架源码兼容性微调介绍

前端  /  管理员 发布于 4年前   467

layui提供了丰富的内置模块,他们皆可通过模块化的方式按需加载,本教程为大家提供了一些对于layui框架源码兼容性微调的介绍,希望可以解决大家使用layui框架时遇到的兼容性问题。

table.js

1、描述:【所有浏览器】 加载图标是静止的,想要做成动画。

解决:寻找到每一个"layui-icon-loading",添加上"layui-anim layui-anim-rotate layui-anim-loop"即可

2、描述:【火狐和IE10+】单元格内如果是纯文本,那么后面的省略的字数需要达到 3 个字符以上才会触发 layer.tips 弹窗。

解决:因为内部使用到了”scrollWidth“,它在这两款表现不同于谷歌。

现在通过计算内部的文字长度来推算像素

// 源码 table.js 1600 左右开始var othis = $(this),elemCell = othis.children(ELEM_CELL);// mvar computedFontWidth = function() {  var fontSize = parseFloat(elemCell.css('font-size'))  var text = elemCell.text()  var width = 0, i = 0, len = text.length  while ( i < len) {    // 基础像素,我的是 14px,不知道可以看 html 或者 body 内的字体大小设置。    // 火狐和IE中字体的长度就是双字节文字按基础像素计算,单字节文字接触像素/2。    // 谷歌比较另类,双字节文字按基础像素计算,单字节是基础像素/2与 16/2 的差值,    // 不知道是不是我想复杂了,所以用 +1,微调下浏览器的差异    width += text.charAt(i).match(/[^\x00-\xff]/ig) != null ? fontSize : (fontSize / 2 + 1)    i++   }  return width}var computedScrollWidth = function() {  var hasChildren = elemCell.children().length > 0  var originScrollWidth = elemCell.prop('scrollWidth')  var realScrollWidth = hasChildren     ? 0    : (computedFontWidth() + parseFloat(elemCell.css('padding-left')) + parseFloat(elemCell.css('padding-right')))  // 这里比较大小值,为了对于原来非纯文本还是采用 layui 原本的方式  return Math.max(originScrollWidth, realScrollWidth)}if(hide){  othis.find('.layui-table-grid-down').remove();// } else if(elemCell.prop('scrollWidth') > elemCell.outerWidth()){ // 注释掉原本的代码} else if(computedScrollWidth() > elemCell.outerWidth()){  if(elemCell.find('.'+ ELEM_GRID_DOWN)[0]) return;  othis.append('<div class="'+ ELEM_GRID_DOWN +'"><i class="layui-icon layui-icon-down"></i></div>');}

form.js

1、描述:【所有浏览器】select 的定位,项目中 select 如果在最右边,右下角,点击会让无滚动的页面出现滚动条

解决:

// 修改部分定位写法var showDown = function(){  // 将样式复位  dl.css({    top: '',    left: '',    right: ''  })  var top = reElem.offset().top + reElem.outerHeight() + 5 - $win.scrollTop()  ,dlHeight = dl.outerHeight(), dlWidth = dl.outerWidth(), winWidth = $(window).width();   index = select[0].selectedIndex; //获取最新的 selectedIndex   // 判断是否在最右边的临界点  if (dlWidth + reElem.offset().left > winWidth) {    dl.css({      left: 'auto',      right: 0    })  }  reElem.addClass(CLASS+'ed');  dds.removeClass(HIDE);  nearElem = null;    //初始选中样式  dds.eq(index).addClass(THIS).siblings().removeClass(THIS);  //上下定位识别  if(top + dlHeight > $win.height() && top >= dlHeight){    reElem.addClass(CLASS + 'up');  } else {    // 定位重写定义      // 动画需要的距离和弹窗的间隔,这是根据 layui 的样式来的,理论应该计算    var ANIM_UP = 30, SPACE = 5;     var reElemBottom = reElem.get(0).getBoundingClientRect().bottom;    var dlTop = parseInt(dl.css('top'));    var winHeight = $win.height();    if (reElemBottom + dlHeight + ANIM_UP > winHeight ) {      var computeValue = dlTop - (reElemBottom + SPACE - (winHeight - dlHeight - ANIM_UP))      dl.css('top', computeValue)    }  }  followScroll();}

tree.js

描述:我使用的是 layui2.4.5 版本,内部的 tree功能已经满足了,但是因为图标问题,这里我干脆隐藏

解决:

// 第一处修改Tree.prototype.tree = function() {   // 大概在 line 48   var li = $(['<li '+ (hasChild ? " is-branch " : " is-leaf ") + (item.spread ? 'data-spread="'+ item.spread +'"' : '') +'>'}// 第二处修改// 大概在 72 - 76 注释掉/*+ ('<i class="layui-icon layui-tree-'+ (hasChild ? "branch" : "leaf") +'">'+ (         hasChild ? ( item.spread ? icon.branch[1] : icon.branch[0]) : icon.leaf) +'</i>') */ //节点图标

更多layui框架知识请关注layui框架教程。

以上就是对于layui框架源码兼容性微调介绍的详细内容,更多请关注其它相关文章!


  • 上一条:
    Layui使用入门教程
    下一条:
    layui之弹出层关闭和刷新问题
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 使用 Alpine.js 排序插件对元素进行排序(0个评论)
    • 在js中使用jszip + file-saver实现批量下载OSS文件功能示例(0个评论)
    • 在vue中实现父页面按钮显示子组件中的el-dialog效果(0个评论)
    • 使用mock-server实现模拟接口对接流程步骤(0个评论)
    • vue项目打包程序实现把项目打包成一个exe可执行程序(0个评论)
    • 近期文章
    • 在go语言中使用api.geonames.org接口实现根据国际邮政编码获取地址信息功能(1个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf分页文件功能(0个评论)
    • gmail发邮件报错:534 5.7.9 Application-specific password required...解决方案(0个评论)
    • 欧盟关于强迫劳动的规定的官方举报渠道及官方举报网站(0个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf文件功能(0个评论)
    • Laravel从Accel获得5700万美元A轮融资(0个评论)
    • 在go + gin中gorm实现指定搜索/区间搜索分页列表功能接口实例(0个评论)
    • 在go语言中实现IP/CIDR的ip和netmask互转及IP段形式互转及ip是否存在IP/CIDR(0个评论)
    • PHP 8.4 Alpha 1现已发布!(0个评论)
    • Laravel 11.15版本发布 - Eloquent Builder中添加的泛型(0个评论)
    • 近期评论
    • 122 在

      学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..
    • 123 在

      Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..
    • 原梓番博客 在

      在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..
    • 博主 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..
    • 1111 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
    • 2016-10
    • 2016-11
    • 2017-06
    • 2017-07
    • 2017-08
    • 2017-09
    • 2017-10
    • 2017-11
    • 2018-03
    • 2018-04
    • 2018-05
    • 2018-06
    • 2018-09
    • 2018-11
    • 2018-12
    • 2019-02
    • 2020-03
    • 2020-04
    • 2020-05
    • 2020-06
    • 2021-04
    • 2021-05
    • 2021-07
    • 2021-08
    • 2021-09
    • 2021-10
    • 2021-11
    • 2022-08
    • 2022-09
    • 2022-10
    • 2022-11
    • 2022-12
    • 2023-01
    • 2023-02
    • 2023-03
    • 2023-04
    • 2023-05
    • 2023-06
    • 2023-07
    • 2023-09
    • 2023-10
    • 2023-11
    • 2023-12
    • 2024-01
    • 2024-02
    • 2024-03
    • 2024-04
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客