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

百变鹏仔 1个月前 (11-16) #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);// mvar computedFontWidth = function() {  var fontSize = parseFloat(elemCell.css('font-size'))  var text = elemCell.text()  var width = 0, i = 0, len = text.length  while ( i  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') &gt; elemCell.outerWidth()){ // 注释掉原本的代码} else if(computedScrollWidth() &gt; elemCell.outerWidth()){  if(elemCell.find('.'+ ELEM_GRID_DOWN)[0]) return;  othis.append('<div><i></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 &gt; 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 &gt; $win.height() &amp;&amp; top &gt;= 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 &gt; 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) +'') */ //节点图标

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

文章推荐

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

layui的分页怎么用

layui怎么设置checkbox勾选

layui怎么对弹出层显示数据

layui表格怎么清空

layui有什么主要功能