2017-08-21 08:51:13 +08:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
2021-04-05 23:41:30 +08:00
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
|
|
|
|
<title>完整库使用 - layui</title>
|
2017-08-21 08:51:13 +08:00
|
|
|
|
2021-04-05 23:41:30 +08:00
|
|
|
<link rel="stylesheet" href="../src/css/layui.css">
|
2017-08-21 08:51:13 +08:00
|
|
|
|
2021-04-05 23:41:30 +08:00
|
|
|
<style>
|
|
|
|
|
body{padding: 10px;}
|
|
|
|
|
</style>
|
|
|
|
|
|
2017-08-21 08:51:13 +08:00
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
|
2021-04-02 06:05:38 +08:00
|
|
|
<textarea style="
|
|
|
|
|
position: fixed;
|
|
|
|
|
top: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
right:0;
|
|
|
|
|
width: 100px;
|
|
|
|
|
background-color:#666;
|
|
|
|
|
z-index:100;
|
|
|
|
|
resize: none;">
|
|
|
|
|
|
|
|
|
|
</textarea>
|
|
|
|
|
|
2021-04-05 23:41:30 +08:00
|
|
|
|
2017-08-21 08:51:13 +08:00
|
|
|
<div id="demo1"></div>
|
2021-04-22 10:22:45 +08:00
|
|
|
|
|
|
|
|
<div class="layui-btn-container">
|
|
|
|
|
<button class="layui-btn demo" test-active="test-form">测试弹出式 Form</button>
|
|
|
|
|
<button class="layui-btn demo" test-active="test-use">测试是否重复加载内置组件</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="layui-inline">
|
|
|
|
|
<input class="layui-input" id="date1" placeholder="日期">
|
|
|
|
|
</div>
|
2017-08-21 08:51:13 +08:00
|
|
|
|
2020-11-26 22:12:46 +08:00
|
|
|
<div class="layui-tab" lay-filter="tabDemo">
|
|
|
|
|
<ul class="layui-tab-title">
|
|
|
|
|
<li class="layui-this" lay-id="1">标题1</li>
|
|
|
|
|
<li lay-id="2">标题2</li>
|
|
|
|
|
<li lay-id="3">标题3</li>
|
|
|
|
|
<li lay-id="4">标题4</li>
|
|
|
|
|
<li lay-id="5">标题5</li>
|
|
|
|
|
</ul>
|
|
|
|
|
<div class="layui-tab-content">
|
|
|
|
|
<div class="layui-tab-item layui-show">
|
2021-04-05 23:41:30 +08:00
|
|
|
<div class="layui-form">
|
|
|
|
|
<select name="city" lay-verify="">
|
|
|
|
|
<option value="">请选择一个城市</option>
|
|
|
|
|
<option value="010">北京</option>
|
|
|
|
|
<option value="021">上海</option>
|
|
|
|
|
<option value="0571">杭州</option>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
2020-11-26 22:12:46 +08:00
|
|
|
</div>
|
|
|
|
|
<div class="layui-tab-item">
|
|
|
|
|
<div id="test2" class="demo-transfer"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="layui-tab-item">3</div>
|
|
|
|
|
<div class="layui-tab-item">4</div>
|
|
|
|
|
<div class="layui-tab-item">5</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2017-08-21 08:51:13 +08:00
|
|
|
|
2021-03-31 14:07:23 +08:00
|
|
|
<script src="../dist/layui.js"></script>
|
2017-08-21 08:51:13 +08:00
|
|
|
<script>
|
2021-04-07 11:20:16 +08:00
|
|
|
console.log(layui.$);
|
2021-04-06 16:01:23 +08:00
|
|
|
|
|
|
|
|
//(function(){
|
2021-04-05 23:41:30 +08:00
|
|
|
layui.use(function(){
|
2017-08-21 08:51:13 +08:00
|
|
|
var $ = layui.jquery
|
|
|
|
|
,layer = layui.layer
|
|
|
|
|
,form = layui.form
|
2020-11-26 22:12:46 +08:00
|
|
|
,laypage = layui.laypage
|
|
|
|
|
,element = layui.element
|
2021-03-31 14:07:23 +08:00
|
|
|
,transfer = layui.transfer
|
2021-04-22 10:22:45 +08:00
|
|
|
,util = layui.util
|
|
|
|
|
,laydate = layui.laydate;
|
2017-08-21 08:51:13 +08:00
|
|
|
|
2021-05-08 06:31:19 +08:00
|
|
|
layer.msg('hello layui');
|
|
|
|
|
//layer.closeAll();
|
2021-04-22 10:22:45 +08:00
|
|
|
|
|
|
|
|
//自动测试
|
|
|
|
|
(function(run){
|
|
|
|
|
if(!run) return;
|
|
|
|
|
|
|
|
|
|
var timer = setInterval(function(){
|
|
|
|
|
location.reload();
|
|
|
|
|
}, 1000);
|
|
|
|
|
|
|
|
|
|
$.ajax({
|
|
|
|
|
url: './all.html'
|
|
|
|
|
,beforeSend: function(){
|
|
|
|
|
layer.load();
|
|
|
|
|
}
|
|
|
|
|
,success: function(){
|
|
|
|
|
layer.closeAll('loading', function(){
|
|
|
|
|
setTimeout(function(){
|
|
|
|
|
if($('.layui-layer-loading').length){
|
|
|
|
|
console.error('layer close 异常');
|
|
|
|
|
clearInterval(timer);
|
|
|
|
|
}
|
|
|
|
|
}, 200);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
})(0);
|
2017-08-21 08:51:13 +08:00
|
|
|
|
|
|
|
|
laypage.render({
|
|
|
|
|
elem: 'demo1'
|
|
|
|
|
,count: 100 //总页数
|
|
|
|
|
});
|
2021-04-06 16:01:23 +08:00
|
|
|
|
|
|
|
|
console.log(lay('#footer').html());
|
2017-08-21 08:51:13 +08:00
|
|
|
|
2021-04-22 10:22:45 +08:00
|
|
|
laydate.render({
|
|
|
|
|
elem: '#date1'
|
|
|
|
|
})
|
|
|
|
|
|
2019-05-31 14:36:29 +08:00
|
|
|
//测试加载非内置模块
|
2021-04-06 16:01:23 +08:00
|
|
|
/*
|
2019-05-31 14:36:29 +08:00
|
|
|
layui.config({
|
|
|
|
|
base: 'extends/'
|
|
|
|
|
}).extend({
|
|
|
|
|
mod1: 'mod1'
|
|
|
|
|
,mod2: 'mod2'
|
|
|
|
|
}).use('mod1');
|
2021-04-06 16:01:23 +08:00
|
|
|
*/
|
2019-05-31 14:36:29 +08:00
|
|
|
|
2020-11-26 22:12:46 +08:00
|
|
|
|
|
|
|
|
//定义标题及数据源
|
|
|
|
|
transfer.render({
|
|
|
|
|
elem: '#test2'
|
|
|
|
|
,title: ['候选文人', '获奖文人'] //自定义标题
|
|
|
|
|
,data: [
|
|
|
|
|
{"value": "1", "title": "李白"}
|
|
|
|
|
,{"value": "2", "title": "杜甫"}
|
|
|
|
|
,{"value": "3", "title": "苏轼"}
|
|
|
|
|
,{"value": "4", "title": "李清照"}
|
|
|
|
|
,{"value": "5", "title": "鲁迅", "disabled": true}
|
|
|
|
|
,{"value": "6", "title": "巴金"}
|
|
|
|
|
,{"value": "7", "title": "冰心"}
|
|
|
|
|
,{"value": "8", "title": "矛盾"}
|
|
|
|
|
,{"value": "9", "title": "贤心"}
|
|
|
|
|
]
|
|
|
|
|
//,width: 150 //定义宽度
|
|
|
|
|
,height: 210 //定义高度
|
2021-03-31 14:07:23 +08:00
|
|
|
});
|
2020-11-26 22:12:46 +08:00
|
|
|
|
2017-08-21 08:51:13 +08:00
|
|
|
//触发事件
|
2021-03-31 14:07:23 +08:00
|
|
|
util.event('test-active', {
|
|
|
|
|
'test-form': function(){
|
2017-08-21 08:51:13 +08:00
|
|
|
layer.open({
|
|
|
|
|
type: 1
|
|
|
|
|
,resize: false
|
|
|
|
|
,content: ['<ul class="layui-form" style="margin: 10px;">'
|
|
|
|
|
,'<li class="layui-form-item">'
|
2021-03-31 14:07:23 +08:00
|
|
|
,'<label class="layui-form-label">输入框</label>'
|
2017-08-21 08:51:13 +08:00
|
|
|
,'<div class="layui-input-block">'
|
2021-03-31 14:07:23 +08:00
|
|
|
,'<input class="layui-input" name="field1">'
|
|
|
|
|
,'</div>'
|
|
|
|
|
,'</li>'
|
|
|
|
|
,'<li class="layui-form-item">'
|
|
|
|
|
,'<label class="layui-form-label">选择框</label>'
|
|
|
|
|
,'<div class="layui-input-block">'
|
|
|
|
|
,'<select name="field2">'
|
|
|
|
|
,'<option value="A">A</option>'
|
|
|
|
|
,'<option value="B">B</option>'
|
2017-08-21 08:51:13 +08:00
|
|
|
,'<select>'
|
|
|
|
|
,'</div>'
|
|
|
|
|
,'</li>'
|
|
|
|
|
,'<li class="layui-form-item" style="text-align:center;">'
|
|
|
|
|
,'<button type="submit" lay-submit lay-filter="*" class="layui-btn">提交</button>'
|
|
|
|
|
,'</li>'
|
|
|
|
|
,'</ul>'].join('')
|
|
|
|
|
,success: function(layero){
|
|
|
|
|
layero.find('.layui-layer-content').css('overflow', 'visible');
|
|
|
|
|
|
|
|
|
|
form.render().on('submit(*)', function(data){
|
|
|
|
|
layer.msg(JSON.stringify(data.field));
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
2021-03-31 14:07:23 +08:00
|
|
|
,'test-use': function(othis){
|
|
|
|
|
layui.use(['laytpl','laypage','laydate','jquery','layer','util','element','upload','slider','colorpicker','form','tree','transfer','table','carousel','rate','flow','layedit','code'], function(){
|
|
|
|
|
layer.tips('请观察 Network 是否有重复加载 js 文件。如果没有任何新的请求，则代表正常。', othis, {
|
|
|
|
|
time: 10*1000
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
}
|
2017-08-21 08:51:13 +08:00
|
|
|
});
|
2021-04-06 16:01:23 +08:00
|
|
|
|
2021-04-05 23:41:30 +08:00
|
|
|
});
|
2021-04-06 16:01:23 +08:00
|
|
|
//})();
|
2017-08-21 08:51:13 +08:00
|
|
|
</script>
|
2021-04-06 16:01:23 +08:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<span class="layui-breadcrumb" lay-separator="-">
|
|
|
|
|
<a href="">首页</a>
|
|
|
|
|
<a href="">国际新闻</a>
|
|
|
|
|
<a href="">亚太地区</a>
|
|
|
|
|
<a><cite>正文</cite></a>
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
|
|
<div id="footer">© footer</div>
|
|
|
|
|
|
2017-08-21 08:51:13 +08:00
|
|
|
</body>
|
|
|
|
|
</html>
|
