对于layui框架源码兼容性微调介绍


本文摘自PHP中文网,作者尚,侵删。

layui提供了丰富的内置模块,他们皆可通过模块化的方式按需加载,本教程为大家提供了一些对于layui框架源码兼容性微调的介绍,希望可以解决大家使用layui框架时遇到的兼容性问题。

table.js

1、描述:【所有浏览器】 加载图标是静止的,想要做成动画。

解决:寻找到每一个"layui-icon-loading",添加上"layui-anim layui-anim-rotate layui-anim-loop"即可

2、描述:【火狐和IE10+】单元格内如果是纯文本,那么后面的省略的字数需要达到 3 个字符以上才会触发 layer.tips 弹窗。

解决:因为内部使用到了”scrollWidth“,它在这两款表现不同于谷歌。

现在通过计算内部的文字长度来推算像素

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

// 源码 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、描述:【所有浏览器】select 的定位,项目中 select 如果在最右边,右下角,点击会让无滚动的页面出现滚动条

解决:

阅读剩余部分

相关阅读 >>

layui如何实现数据分页功能

layui表格分页不生效怎么办

通过layui给数据表格添加序号

layui事件监听使用

layui怎么实现删除数据

layui怎么绑定普通事件监听

layui前端遇到的难点集合(附代码)

layui导出表格全部数据

layui后台框架的搭建详解

layui表格怎么把表头固定

更多相关阅读请进入《layui》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...