对于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框架源码兼容性微调介绍的详细内容，更多内容请关注技术你好其它相关文章！