layui는 모듈식 접근 방식을 통해 요청 시 로드할 수 있는 다양한 내장 모듈을 제공합니다. 이 튜토리얼에서는layui 프레임워크의 소스 코드 호환성을 미세 조정하는 방법을 소개합니다. layui 프레임워크를 사용할 때 발생하는 문제를 해결할 수 있습니다.
table.js
1 설명: [모든 브라우저] 로딩 아이콘이 정적입니다. 만들고 싶습니다. 생기.
해결책: 각 "layui-icon-loading"을 찾아 "layui-animlayui-anim-rotatelayui-anim-loop"
2를 추가합니다. 설명: [Firefox 및 IE10+] 셀이 일반 텍스트인 경우 끝에 생략된 단어 수가 3자 이상이어야 layer.tips 팝업 창이 실행됩니다.
해결 방법: "scrollWidth"가 내부적으로 사용되기 때문에 이 두 모델의 성능은 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 설명: [모든 브라우저] 위치 지정을 선택합니다. 프로젝트의 선택 항목은 맨 오른쪽, 오른쪽 하단에 있습니다. 클릭하면 스크롤되지 않는 페이지에 스크롤 막대가 나타납니다
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: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>') */ //节点图标More 더 많은layui 프레임워크 지식을 보려면 layuiframeworktutorial을 따르세요.
위 내용은 Layui 프레임워크의 소스 코드 호환성 미세 조정 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!