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 < 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框架源碼兼容性微調的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！