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('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. 説明: [すべてのブラウザ] 選択の位置 (選択がプロジェクトは右端の右下隅にあるので、クリックすると非スクロール ページにスクロール バーが表示されます。
解決策:
// 修改部分定位写法 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 = $(['<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フレームワークの詳細については、知識がある場合は、layui フレームワーク チュートリアル に注意してください。
以上がLauiui フレームワークのソース コード互換性の微調整の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。