资讯专栏INFORMATION COLUMN

layui-v2.4.5 兼容性微调

JerryWangSAP / 1042人阅读

摘要:解决寻找到每一个,添加上即可。解决因为内部使用到了,它在这两款表现不同于谷歌。现在通过计算内部的文字长度来推算像素。火狐和中字体的长度就是双字节文字按基础像素计算,单字节文字接触像素。

在 layui 的社区已经写过了,但是社区的编辑器实在不行,在此重新书写一遍,正好可以巩固下
table.js

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

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

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

解决:因为内部使用到了scrollWidth,它在这两款表现不同于谷歌。现在通过计算内部的文字长度来推算像素。

// 源码 table.js 1600 左右开始
var othis = $(this)
,elemCell = othis.children(ELEM_CELL);
// m
var 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("
"); }
form.js

描述:【所有浏览器】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 = $(["
  • " } // 第二处修改,大概在 72 - 76 注释掉 /*+ (""+ ( hasChild ? ( item.spread ? icon.branch[1] : icon.branch[0]) : icon.leaf) +"") */ //节点图标
  • TODO

    持续更新中...

    转载还请注明,本文地址

    文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

    转载请注明本文地址:https://www.ucloud.cn/yun/102391.html

    相关文章

    • SEO优化后期网站微调起关键性稳定排名的作用

      摘要:后期阶段的定义是网站进入前名并稳定排名的阶段。因此,在后期,我们需要对网站进行微调,让网站的时效性得以维持,以便排名可以持续的稳定。这样,不用多久百度就会拿掉网站的排名了。 SEO后期阶段的定义是:网站进入前3名并稳定排名的阶段。在这个阶段,我们的工作重点是对网站进行微调,并且寻求微...

      不知名网友 评论0 收藏0
    • [译] 负边距详解

      摘要:正是因为没有很好地了解负边距才是导致各种奇怪的问题。不理解它负边距不会在的设计窗口展示出效果。有两种场景负边距是很重要的。微调元素这是负外边距最常也是最简单的使用方式。 原文 The Definitive Guide to Using Negative Margins 自从1998年CSS2作为推荐以来,表格的使用渐渐退去,成为历史。正因为此,从那以后CSS布局成为了优雅代码的代名词。...

      Vixb 评论0 收藏0

    发表评论

    0条评论

    最新活动
    阅读需要支付1元查看
    <