【WEB前端开辟】关于layui框架源码兼容性微调引见

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);
// 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('<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框架源码兼容性微调引见的细致内容,更多请关注ki4网别的相干文章!

点赞

发表评论

电子邮件地址不会被公开。必填项已用 * 标注