mirror of https://github.com/layui/layui
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
211 lines
5.4 KiB
211 lines
5.4 KiB
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<meta charset="utf-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> |
|
<title>完整库使用 - layui</title> |
|
<link rel="stylesheet" href="../dist/css/layui.css"> |
|
<style> |
|
body{padding: 10px;} |
|
</style> |
|
</head> |
|
<body> |
|
|
|
<textarea style=" |
|
position: fixed; |
|
top: 0; |
|
bottom: 0; |
|
right:0; |
|
width: 100px; |
|
background-color:#666; |
|
z-index:100; |
|
resize: none;"> |
|
|
|
</textarea> |
|
|
|
|
|
<div id="demo1"></div> |
|
|
|
<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> |
|
|
|
<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"> |
|
<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> |
|
</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> |
|
|
|
|
|
<script src="../dist/layui.js"></script> |
|
<script> |
|
console.log(layui.$); |
|
|
|
//(function(){ |
|
layui.use(function(){ |
|
var $ = layui.jquery |
|
,layer = layui.layer |
|
,form = layui.form |
|
,laypage = layui.laypage |
|
,element = layui.element |
|
,transfer = layui.transfer |
|
,util = layui.util |
|
,laydate = layui.laydate; |
|
|
|
layer.msg('hello layui'); |
|
//layer.closeAll(); |
|
|
|
//自动测试 |
|
(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); |
|
|
|
laypage.render({ |
|
elem: 'demo1' |
|
,count: 100 //总页数 |
|
}); |
|
|
|
console.log(lay('#footer').html()); |
|
|
|
laydate.render({ |
|
elem: '#date1' |
|
}) |
|
|
|
//测试加载非内置模块 |
|
/* |
|
layui.config({ |
|
base: 'extends/' |
|
}).extend({ |
|
mod1: 'mod1' |
|
,mod2: 'mod2' |
|
}).use('mod1'); |
|
*/ |
|
|
|
|
|
//定义标题及数据源 |
|
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 //定义高度 |
|
}); |
|
|
|
//触发事件 |
|
util.event('test-active', { |
|
'test-form': function(){ |
|
layer.open({ |
|
type: 1 |
|
,resize: false |
|
,content: ['<ul class="layui-form" style="margin: 10px;">' |
|
,'<li class="layui-form-item">' |
|
,'<label class="layui-form-label">输入框</label>' |
|
,'<div class="layui-input-block">' |
|
,'<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>' |
|
,'<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)); |
|
}); |
|
} |
|
}); |
|
} |
|
,'test-use': function(othis){ |
|
layui.use(['laytpl','laypage','laydate','jquery','layer','util','element','upload','slider','colorpicker','form','tree','transfer','table','carousel','rate','flow','code'], function(){ |
|
layer.tips('请观察 Network 是否有重复加载 js 文件。如果没有任何新的请求，则代表正常。', othis, { |
|
time: 10*1000 |
|
}); |
|
}); |
|
} |
|
}); |
|
|
|
}); |
|
//})(); |
|
</script> |
|
|
|
|
|
|
|
<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> |
|
|
|
</body> |
|
</html>
|
|
|