Lauiui フレームワークのソース コード互換性の微調整の概要

layui は豊富な組み込みモジュールを提供しており、そのすべてはモジュラー アプローチを通じてオンデマンドでロードできます。このチュートリアルでは、layui フレームワークのソース コードの互換性を微調整するための入門を提供します。 layui フレームワークの使用時に発生する問題、互換性の問題を解決します。

table.js

1. 説明: [すべてのブラウザ] 読み込みアイコンが静的であるため、アニメーション化したいと考えています。

解決策: 各「layui-icon-loading」を見つけて、「layui-animlayui-anim-rotatelayui-anim-loop」を追加します。

2. 説明: [ Firefox および IE10]セルがプレーン テキストの場合、layer.tips ポップアップ ウィンドウがトリガーされる前に、末尾の省略された単語の数が 3 文字を超える必要があります。

解決策: 「scrollWidth」は内部で使用されるため、これら 2 つのプログラムのパフォーマンスは Google のパフォーマンスとは異なります。

ここで、内部テキストの長さを計算してピクセルを計算します

// 源码 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(&#39;scrollWidth&#39;)
  var realScrollWidth = hasChildren 
    ? 0
    : (computedFontWidth() + parseFloat(elemCell.css(&#39;padding-left&#39;)) + parseFloat(elemCell.css(&#39;padding-right&#39;)))
  // 这里比较大小值，为了对于原来非纯文本还是采用 layui 原本的方式
  return Math.max(originScrollWidth, realScrollWidth)
}

if(hide){
  othis.find(&#39;.layui-table-grid-down&#39;).remove();
// } else if(elemCell.prop(&#39;scrollWidth&#39;) > elemCell.outerWidth()){ // 注释掉原本的代码
} else if(computedScrollWidth() > elemCell.outerWidth()){
  if(elemCell.find(&#39;.&#39;+ ELEM_GRID_DOWN)[0]) return;
  othis.append(&#39;<div class="&#39;+ ELEM_GRID_DOWN +&#39;"><i class="layui-icon layui-icon-down"></i></div>&#39;);
}

form.js

1. 説明: [すべてのブラウザ] 選択の位置 (選択がプロジェクトは右端の右下隅にあるので、クリックすると非スクロール ページにスクロール バーが表示されます。

解決策:

// 修改部分定位写法
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.prototype.tree = function() {
   // 大概在 line 48
   var li = $([&#39;<li &#39;+ (hasChild ? " is-branch " : " is-leaf ") + (item.spread ? &#39;data-spread="&#39;+ item.spread +&#39;"&#39; : &#39;&#39;) +&#39;>&#39;
}

// 第二处修改

// 大概在 72 - 76 注释掉

/*+ (&#39;<i class="layui-icon layui-tree-&#39;+ (hasChild ? "branch" : "leaf") +&#39;">&#39;+ (
         hasChild ? ( item.spread ? icon.branch[1] : icon.branch[0]) : icon.leaf) +&#39;</i>&#39;) */ //节点图标

layuiフレームワークの詳細については、知識がある場合は、layui フレームワーク チュートリアル に注意してください。

以上がLauiui フレームワークのソース コード互換性の微調整の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。