layui/examples/base.html

129 lines
3.4 KiB
HTML
Raw Normal View History

2021-05-18 02:42:31 +08:00
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
2022-05-18 22:35:13 +08:00
<meta name="viewport" content="width=device-width, initial-scale=1">
2021-05-31 08:57:00 +08:00
<title>基础方法测试用例 - layui</title>
2022-05-18 22:35:13 +08:00
<link href="../src/css/layui.css" rel="stylesheet">
2021-05-18 02:42:31 +08:00
</head>
<body>
<div class="layui-container" style="padding: 30px 0;">
<div class="" style="padding: 30px 0;">
<blockquote class="layui-elem-quote" style="color: #666;">
2022-05-18 22:35:13 +08:00
点击按钮开始测试,测试结果打开浏览器控制台查看
2021-05-18 02:42:31 +08:00
</blockquote>
2022-05-18 22:35:13 +08:00
<div class="layui-btn-container">
<button class="layui-btn" lay-on="sort">layui.sort</button>
<button class="layui-btn" lay-on="type">layui.type</button>
<button class="layui-btn" lay-on="isArray">layui.isArray</button>
<button class="layui-btn" lay-on="extend">lay.extend</button>
</div>
2021-05-18 02:42:31 +08:00
</div>
</div>
<script src="../src/layui.js"></script>
<script>
2022-05-18 22:35:13 +08:00
layui.use(['lay', 'util'], function(){
var lay = layui.lay
,util = layui.util;
2022-05-18 22:35:13 +08:00
//事件
var style = 'color: orange; font-size: 16px;';
util.event('lay-on', {
sort: function(){
//sort
console.log('%c> layui.sort: ', style);
console.log(
'数字-整数型',
layui.sort([{a: 3},{a: 0},{a: 0},{a: -1},{a: -5},{a: 6},{a: 9},{a: -333333}], 'a')
);
console.log(
'数字-浮点型',
layui.sort([{a: 3.5},{a: 0.5},{a: 0.5},{a: -1.5},{a: -5.5},{a: 6.5},{a: 9.5},{a: -333333.5}], 'a')
);
console.log(
'数字-混合型',
layui.sort([{a: 1},{a: 20.5},{a: 20.3},{a: 3},{a: 52},{a: 4.3}], 'a')
);
console.log(
'中文',
layui.sort([{a: '男'},{a: '女'},{a: '男'},{a: '女'},{a: '男'}], 'a')
);
console.log(
'英文',
layui.sort([{a: 'E'},{a: 'B'},{a: 'D'},{a: 'C'},{a: 'A'}], 'a')
);
console.log(
'混合'
,layui.sort([
{a: 3}
,{a: '男'}
,{a: 0}
,{a: 66}
,{a: 99}
,{a: 'C'}
,{a: '女'}
,{a: 3.5}
,{a: 0}
,{a: -1}
,{a: 'B'}
,{a: 5.5}
,{a: '男'}
,{a: 'A'}
,{a: -5}
,{a: '男'}
,{a: 6}
,{a: 9}
], 'a')
);
console.log(
'数组成员全为数字',
2022-05-18 22:35:13 +08:00
layui.sort([1, 20.5, 19.5, 52, 4.5])
);
console.log(
'数组成员为混合型',
2022-05-18 22:35:13 +08:00
layui.sort([1, {a: 32}, 20.5, {a: 6}, 52, 5.5], 'a') //按成员对象的 key 为 a 进行比较
);
}
,type: function(){
console.log('%c> layui.type: ', style);
console.log(
'new RegExp()', layui.type(new RegExp()),
'\nnew Date()', layui.type(new Date()),
2022-05-18 22:35:13 +08:00
'\n[]', layui.type([])
);
}
,isArray: function(){
console.log('%c> layui.isArray: ', style);
console.log(
'[1,6]', layui.isArray([1,6]),
'\nlay("div")', layui.isArray(lay('div')),
2022-05-18 22:35:13 +08:00
'\ndocument.querySelectorAll("div")', layui.isArray(document.querySelectorAll('div')),
'\n{"key": "value"}', layui.isArray({key: 'value'})
);
}
,extend: function(){
console.log('%c> lay.extend: ', style);
console.log(
lay.extend(
{},
{a: 123, c: {ccc: 'ccc'}, arr: [1,3]},
{a: 111, b: 1, c: {bbb: 'bbb'}},
2022-05-18 22:35:13 +08:00
{a: 222222, arr: [5]}
)
);
console.log(
lay.extend([], [1,3,5])
);
}
})
2021-05-18 02:42:31 +08:00
});
</script>
</body>
</html>