theluyuan/layui-js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1.0.3

Browse Source
This commit is contained in:
sentsin
2016-11-10 02:31:39 +08:00
parent e7f1a4ad42
commit 31a0586501
43 changed files with 847 additions and 379 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
test/all.html Normal file
View File

@@ -0,0 +1,76 @@
<!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="../build/css/layui.css">
<style>
body{padding: 10px;}
</style>
</head>
<body>
<div id="demo1"></div>
<button class="layui-btn demo" data-type="test">测试弹出式Form</button>
<script src="../build/lay/dest/layui.all.js"></script>
<script>
;!function(){
var $ = layui.jquery
,layer = layui.layer
,form = layui.form()
,laypage = layui.laypage;
layer.ready(function(){
layer.msg('hello');
});
laypage({
cont: 'demo1'
,pages: 100 //总页数
,groups: 5 //连续显示分页数
});
//触发事件
var active = {
test: 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">'
,'<select name="activate">'
,'<option value="0">未激活</option>'
,'<option value="1">已激活</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));
});
}
});
}
};
$('.demo').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
}();
</script>
</body>
</html>

29
test/element.html
View File

@@ -35,18 +35,41 @@ body{padding: 10px;}
<ul class="layui-nav">
<li class="layui-nav-item"><a href="">最新活动</a></li>
<li class="layui-nav-item layui-this"><a href="">产品</a></li>
<li class="layui-nav-item"><a href="">解决方案</a></li>
<li class="layui-nav-item"><a href="">大数据</a></li>
<li class="layui-nav-item">
<a href="javascript:;">解决方案</a>
<dl class="layui-nav-child">
<dd><a href="">移动模块</a></dd>
<dd><a href="">后台模版</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
</ul>
<br><br>
<ul class="layui-nav layui-nav-tree">
<li class="layui-nav-item"><a href="">最新活动</a></li>
<li class="layui-nav-item layui-this"><a href="">产品</a></li>
<li class="layui-nav-item"><a href="">解决方案</a></li>
<li class="layui-nav-item layui-nav-itemed layui-this">
<a class="" href="javascript:;">产品</a>
<dl class="layui-nav-child">
<dd><a href="">移动模块</a></dd>
<dd><a href="">后台模版</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">大数据</a></li>
<li class="layui-nav-item"><a href="">云市场</a></li>
<li class="layui-nav-item">
<a href="javascript:;">解决方案</a>
<dl class="layui-nav-child">
<dd><a href="">移动模块</a></dd>
<dd><a href="">后台模版</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">社区</a></li>
</ul>

8
test/flow.html
View File

@@ -9,7 +9,7 @@
<style>
body{padding: 15px;}
.flow-default{height: 400px; overflow: auto; font-size: 0;}
.flow-default{ font-size: 0;}
.flow-default li{display: inline-block; margin-right: 10px; font-size: 14px; width: 48%; margin-bottom: 10px; height: 200px; line-height: 200px; text-align: center; background-color: #eee;}
img{width: 500px; height: 300px;}
.flow-default img{width: 100%; height: 100%;}
@@ -46,16 +46,16 @@ layui.use('flow', function(){
flow.load({
elem: '.flow-default' //流加载容器
,scrollElem: '.flow-default' //滚动条所在元素，默认document
//,scrollElem: '.flow-default' //滚动条所在元素，默认document
//,isAuto: false
//,isShowEnd: false
//,isLazyimg: true
,isLazyimg: true
,done: function(page, next){ //加载下一页
console.log(page)
setTimeout(function(){
var lis = [];
for(var i = 0; i < 6; i++){
lis.push('<li><img src="http://s6.mogucdn.com/p2/160914/iz_5lc1cdg3j2hibl9ai99lg7c28k1fh_305x330.jpg?v='+ (page+i) +'"></li>')
lis.push('<li><img lay-src="http://s6.mogucdn.com/p2/160914/iz_5lc1cdg3j2hibl9ai99lg7c28k1fh_305x330.jpg?v='+ (page+i) +'"></li>')
}
next(lis.join(''), page > 5 ? 0 : 11);
}, 500);

15
test/form.html
View File

@@ -61,6 +61,21 @@ body{padding: 10px;}
</select>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">select分组</label>
<div class="layui-input-block">
<select name="quiz">
<option value="">请选择问题</option>
<optgroup label="城市记忆">
<option value="你工作的第一个城市">你工作的第一个城市</option>
</optgroup>
<optgroup label="学生时代">
<option value="你的工号">你的工号</option>
<option value="你最喜欢的老师">你最喜欢的老师</option>
</optgroup>
</select>
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">选择框</label>

2
test/laydate.html
View File

@@ -1,3 +1,5 @@
<!DOCTYPE html>
<html>
<head>

8
test/layedit.html
View File

@@ -21,6 +21,7 @@ body{padding: 10px;}
</textarea>
</div>
<button class="layui-btn">提交</button>
<a class="layui-btn" id="getChoose">获取选中内容</a>
</form>
</div>
@@ -30,7 +31,7 @@ body{padding: 10px;}
layui.use('layedit', function(){
var layedit = layui.layedit;
layedit.build('demo', {
var index = layedit.build('demo', {
//hideTool: ['image']
uploadImage: {
url: '/upload/test/'
@@ -39,6 +40,11 @@ layui.use('layedit', function(){
//,tool: []
//,height: 100
});
getChoose.onclick = function(){
alert(layedit.getSelection(index));
};
});
</script>
</body>

47
test/layer.html Normal file
View File

@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>layer弹层 - layui</title>
<link rel="stylesheet" href="../src/css/layui.css">
<style>
body{padding: 50px 100px;}
</style>
</head>
<body>
<button class="layui-btn demo" data-type="test">测试一</button>
<button class="layui-btn demo" data-type="test2">测试二</button>
<script src="../src/layui.js"></script>
<script>
layui.use('layer', function(){
var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句
//触发事件
var active = {
test: function(){
layer.alert('你好么，体验者');
}
,test2: function(){
layer.open({
type: 2
,content: 'http://fly.layui.com/'
,area: ['375px', '500px']
,maxmin: true
})
}
};
$('.demo').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
});
</script>
</body>
</html>

59
test/table.html Normal file
View File

@@ -0,0 +1,59 @@
<!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="../src/css/layui.css">
<style>
body{padding: 10px;}
</style>
</head>
<body>
<table class="layui-table">
<thead>
<tr>
<th>名称</th>
<th>组合</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: center;">原始</td>
<td>class="layui-btn layui-btn-primary"</td>
</tr>
<tr>
<td style="text-align: center;">默认</td>
<td>class="layui-btn"</td>
</tr>
<tr>
<td style="text-align: center;">百搭</td>
<td>class="layui-btn layui-btn-normal"</td>
</tr>
<tr>
<td style="text-align: center;">暖色</td>
<td>class="layui-btn layui-btn-warm"</td>
</tr>
<tr>
<td style="text-align: center;">警告</td>
<td>class="layui-btn layui-btn-danger"</td>
</tr>
<tr>
<td style="text-align: center;">禁用</td>
<td>class="layui-btn layui-btn-disabled"</td>
</tr>
</tbody>
</table>
<script src="../src/layui.js"></script>
<script>
</script>
</body>
</html>