Example Analysis of Source Code compatibility tuning of layui Framework

This article mainly shows you the "layui framework source code compatibility fine-tuning example analysis", the content is easy to understand, well-organized, hope to help you solve your doubts, the following let the editor lead you to study and learn the "layui framework source code compatibility fine-tuning example analysis" this article.

Layui provides a wealth of built-in modules that can be loaded on demand in a modular manner.

Table.js

1. Description: [all browsers] load icons are static and want to be animated.

Solution: find each "layui-icon-loading" and add "layui-anim layui-anim-rotate layui-anim-loop"

2. Description: if the cell of [Firefox and IE10+] is plain text, then the number of words omitted later needs to be more than 3 characters before the layer.tips pop-up window will be triggered.

Solution: because of the internal use of "scrollWidth", it behaves differently from Google in these two models.

Now calculate the pixels by calculating the internal text length

/ / Source code table.js 1600 starts around 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') / / compare the values here, in order to use layui's original method return Math.max (originScrollWidth, realScrollWidth)} if (hide) {othis.find (' .layui-table-grid-down'). Remove () / /} else if (elemCell.prop ('scrollWidth') > elemCell.outerWidth ()) {/ / comment out the original code} else if (computedScrollWidth () > elemCell.outerWidth ()) {if (elemCell.find ('. + ELEM_GRID_DOWN) [0]) return; othis.append ('');}

Form.js

1. Description: [all browsers] the positioning of select. If the select is on the far right and the lower right corner in the project, clicking will make the non-scrolling page appear a scroll bar.

Resolve:

/ / modify partial positioning writing var showDown = function () {/ / reset the style 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 / / get the latest selectedIndex / / determine whether it is at the rightmost critical point if (dlWidth + reElem.offset (). Left > winWidth) {dl.css ({left: 'auto', right: 0})} reElem.addClass (CLASS+'ed'); dds.removeClass (HIDE); nearElem = null; / / initially selected style dds.eq (index) .addClass (THIS). Siblings (). RemoveClass (THIS) / / identify if (top + dlHeight > $win.height () & & top > = dlHeight) {reElem.addClass (CLASS + 'up');} else {/ / define / / the distance required for animation and the interval of pop-up windows, which is based on the style of layui. The theory should calculate 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: I am using the layui2.4.5 version, the internal tree function has been satisfied, but because of the icon problem, I might as well hide it here

Resolve:

/ / the first modification Tree.prototype.tree = function () {/ / probably in line 48 var li = $(['} / / the second modification / / probably comment out / * + (''+ (hasChild? (item.spread?) in 72-76. Icon.branch [1]: icon.branch [0]): icon.leaf) +') * / / the node icon above is all the contents of the article "sample Analysis of layui Framework Source compatibility tuning". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!