Introduction au réglage fin de la compatibilité du code source du framework layui

Layui fournit une multitude de modules intégrés, qui peuvent tous être chargés à la demande grâce à une approche modulaire. Ce tutoriel vous fournit une introduction pour affiner la compatibilité du code source du framework Layui. résolvez les problèmes que vous rencontrez lors de l'utilisation du framework Layui.

table.js

1. Description : [Tous les navigateurs] L'icône de chargement est statique et souhaite être animée.

Solution : recherchez chaque "layui-icon-loading" et ajoutez "layui-anim layui-anim-rotate layui-anim-loop"

2. Description : [Firefox et IE10+] Si la cellule est du texte brut, alors le nombre de mots omis à la fin doit être supérieur à 3 caractères avant que la fenêtre contextuelle layer.tips ne soit déclenchée.

Solution : Comme "scrollWidth" est utilisé en interne, ses performances dans ces deux programmes sont différentes de celles de Google.

Calculez maintenant les pixels en calculant la longueur du texte interne

// 源码 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 Description : [Tous les navigateurs] Positionnement de select, si select est dans le projet. A l'extrême droite, dans le coin inférieur droit, cliquer fera apparaître une barre de défilement sur la page non défilante

Solution :

// 修改部分定位写法
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

Description : J'utilise la version layui2.4.5, la fonction d'arborescence interne a été satisfaite, mais à cause du problème d'icône, je la cache simplement ici

Solution :

// 第一处修改
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;) */ //节点图标

Pour plus de connaissances sur le framework layui, veuillez faire attention au tutoriel du framework layui.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!