目标
demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>入门&全局CSS之概览&栅格系统</title>
<!-- 新 layui 核心 CSS 文件 -->
<link rel="stylesheet" href="layuiadmin/layui/css/layui.css">
<script src="layuiadmin/layui/layui.js"></script>
<!-- jQuery文件。务必在layui.min.js 之前引入 -->
<style>
h3 {
margin-top: 16px;
text-align: center;
}
</style>
</head>
<body style="padding: 20px;">
<h3 class="layui-bg-blue">弹出层</h3>
这个是layui的亮点，主打内置模块，非常重要。。。<br>
参考学习网址：https://www.layui.com/demo/layer.html
<h3 class="layui-bg-blue">日期和时间选择</h3>
<h6 class="layui-bg-orange">快速使用</h6>
<div class="layui-inline">
<input type="text" class="layui-input" id="test1" placeholder="请选择时间">
</div>
<script>
layui.use('laydate', function() {
var laydate = layui.laydate;
//执行一个laydate实例
laydate.render({
elem: '#test1' //指定元素
})
})
</script>
<hr class="layui-bg-orange">
<h3 class="layui-bg-blue">分页</h3>
<fieldset class="layui-elem-field">
<legend>关于分页插件相关阐述</legend>
<div class="layui-field-box">
关于分页插件，可以有很多设置<br>
参考学习网址：https://www.layui.com/demo/laypage.html
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>显示完整功能</legend>
</fieldset>
<div id="demo7"></div>
<script>
layui.use(['laypage', 'layer'], function() {
var laypage = layui.laypage,
layer = layui.layer;
//完整功能
laypage.render({
elem: 'demo7',
count: 100,
layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'],
jump: function(obj) {
console.log(obj);
}
});
})
</script>
</body>
</html>
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
