如何微調(diào)layui框架源碼的兼容性

下面講講關(guān)于如何微調(diào)layui框架源碼的兼容性，文字的奧妙在于貼近主題相關(guān)。所以，閑話就不談了，我們直接看下文吧，相信看完如何微調(diào)layui框架源碼的兼容性這篇文章你一定會有所受益。

table.js

1、描述：【所有瀏覽器】 加載圖標(biāo)是靜止的，想要做成動(dòng)畫。

解決：尋找到每一個(gè)"layui-icon-loading"，添加上"layui-anim layui-anim-rotate layui-anim-loop"即可

2、描述：【火狐和IE10+】單元格內(nèi)如果是純文本，那么后面的省略的字?jǐn)?shù)需要達(dá)到 3 個(gè)字符以上才會觸發(fā) layer.tips 彈窗。

解決：因?yàn)閮?nèi)部使用到了”scrollWidth“，它在這兩款表現(xiàn)不同于谷歌。

現(xiàn)在通過計(jì)算內(nèi)部的文字長度來推算像素

// 源碼 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) {
    // 基礎(chǔ)像素，我的是 14px，不知道可以看 html 或者 body 內(nèi)的字體大小設(shè)置。
    // 火狐和IE中字體的長度就是雙字節(jié)文字按基礎(chǔ)像素計(jì)算，單字節(jié)文字接觸像素/2。
    // 谷歌比較另類，雙字節(jié)文字按基礎(chǔ)像素計(jì)算，單字節(jié)是基礎(chǔ)像素/2與 16/2 的差值，
    // 不知道是不是我想復(fù)雜了，所以用 +1，微調(diào)下瀏覽器的差異
    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 的定位，項(xiàng)目中 select 如果在最右邊，右下角，點(diǎn)擊會讓無滾動(dòng)的頁面出現(xiàn)滾動(dòng)條

解決：

// 修改部分定位寫法
var showDown = function(){
  // 將樣式復(fù)位
  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

   // 判斷是否在最右邊的臨界點(diǎn)
  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 {
    // 定位重寫定義
  
    // 動(dòng)畫需要的距離和彈窗的間隔，這是根據(jù) layui 的樣式來的，理論應(yīng)該計(jì)算
    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 版本，內(nèi)部的 tree功能已經(jīng)滿足了，但是因?yàn)閳D標(biāo)問題，這里我干脆隱藏

解決：

// 第一處修改
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>') */ //節(jié)點(diǎn)圖標(biāo)

對于以上如何微調(diào)layui框架源碼的兼容性相關(guān)內(nèi)容，大家還有什么不明白的地方嗎？或者想要了解更多相關(guān)，可以繼續(xù)關(guān)注我們的行業(yè)資訊板塊。