《layui宇宙版教程》：工具集util

最新推荐文章于 2023-11-02 09:00:43 发布

立志做一个佳娃~

最新推荐文章于 2023-11-02 09:00:43 发布

阅读量1.2k

点赞数

分类专栏： Layui宇宙版教程文章标签： layui 前端

本文链接：https://blog.csdn.net/ghyghost/article/details/108116249

版权

Layui宇宙版教程专栏收录该内容

40 篇文章 16 订阅

订阅专栏

《Layui宇宙版教程》提供2000人的QQ群进行交流学习，QQ群号：1046961650，或通过手机QQ扫描二维码进入：

1.31 工具集util

将一些工具性元素放入util模块中，以供选择性使用。其内部由多个小工具组件组成，他们也许不是必须的，但很多时候却能为页面提供良好的辅助作用。

模块加载名称：util。

1.31.1 固定块

固定块通常会出现在固定位置，由两个可选的bar和一个默认必选的TopBar组成。

语法：util.fixbar(options)，其中参数options是一个对象，可支持的key如图1-xx所示。

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var util = layui.util;

//执行

util.fixbar({

bar1: true,

click: function(type) {

console.log(type);

if (type === 'bar1') {

alert('点击了bar1')

}

});

</script>

</body>

</html>

运行效果如图1-xx所示。

1.31.1.1 属性bar1和bar2值为true

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var util = layui.util;

//执行

util.fixbar({

bar1: true,

bar2: true,

click: function(type) {

console.log(type);

if (type === 'bar1') {

alert('点击了bar1')

}

if (type === 'bar2') {

alert('点击了bar2')

}

});

</script>

</body>

</html>

运行效果如图1-xx所示。

1.31.1.2 属性bar1和bar2值为图标字符

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var util = layui.util;

//执行

util.fixbar({

bar1: "",

bar2: "",

click: function(type) {

console.log(type);

if (type === 'bar1') {

alert('点击了bar1')

}

if (type === 'bar2') {

alert('点击了bar2')

}

});

</script>

</body>

</html>

运行效果如图1-xx所示。

1.31.1.3 属性bgcolor

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var util = layui.util;

//执行

util.fixbar({

bar1: true,

bar2: true,

bgcolor: "#123ABC",

click: function(type) {

console.log(type);

if (type === 'bar1') {

alert('点击了bar1')

}

if (type === 'bar2') {

alert('点击了bar2')

}

});

</script>

</body>

</html>

运行效果如图1-xx所示。

1.31.1.4 属性showHeight

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var util = layui.util;

//执行

util.fixbar({

bar1: true,

bar2: true,

showHeight: 100,

click: function(type) {

console.log(type);

if (type === 'bar1') {

alert('点击了bar1')

}

if (type === 'bar2') {

alert('点击了bar2')

}

});

</script>

</body>

</html>

1.31.1.5 属性css

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var util = layui.util;

//执行

util.fixbar({

bar1: true,

bar2: true,

css: {

right: 200,

bottom: 100

click: function(type) {

console.log(type);

if (type === 'bar1') {

alert('点击了bar1')

}

if (type === 'bar2') {

alert('点击了bar2')

}

});

</script>

</body>

</html>

运行效果如图1-xx所示。

1.31.2 倒计时

倒计时组件并不负责UI元素的呈现，而仅仅只是返回倒计时的数据，这意味着可以将它应用在任何倒计时相关的业务中。

语法：util.countdown(endTime, serverTime, callback)，参数作用如图1-xx所示。

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var util = layui.util;

//示例

var endTime = new Date(2099, 1, 1).getTime(); //假设为结束日期

var serverTime = new Date().getTime(); //假设为当前服务器时间，这里采用的是本地时间，实际使用一般是取服务端的

util.countdown(endTime, serverTime, function(date, serverTime, timer) {

var str = date[0] + '天' + date[1] + '时' + date[2] + '分' + date[3] + '秒';

layui.$('#test').html('距离2099年1月1日还有：' + str);

});

</script>

</body>

</html>

运行效果如图1-xx所示。

立志做一个佳娃~

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
《layui宇宙版教程》：工具集util

《Layui宇宙版教程》提供2000人的QQ群进行交流学习，QQ群号：1046961650，或通过手机QQ扫描二维码进入：1.31 工具集util将一些工具性元素放入util模块中，以供选择性使用。其内部由多个小工具组件组成，他们也许不是必须的，但很多时候却能为页面提供良好的辅助作用。模块加载名称：util。1.31.1 固定块固定块通常会出现在固定位置，由两个可选的bar和一个默认必选的TopBar组成。语法：util.fixbar(options)，其中参数option.
复制链接

扫一扫