1.0.0
This commit is contained in:
sentsin
56
test/bayuanbao/index.html
Normal file
56
test/bayuanbao/index.html
Normal file
@@ -0,0 +1,56 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>八圆包下线 － 尝试永无止境</title>
|
||||
<meta name="keywords" content="">
|
||||
<meta name="description" content="">
|
||||
<meta property="qc:admins" content="016766472643166375">
|
||||
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
|
||||
<style>
|
||||
/* 初始 */
|
||||
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,input,button,textarea,p,blockquote,th,td,form{margin:0; padding:0;}
|
||||
html{overflow-x:hidden; overflow-y:auto; background-color:#000; }
|
||||
body{line-height:24px; font:14px '\5FAE\8F6F\96C5\9ED1',Tahoma,Arial,Helvetica,sans-serif; overflow-x:hidden;}
|
||||
|
||||
@-webkit-keyframes bye{
|
||||
0%{
|
||||
box-shadow:0 0 0px rgba(255,255,255,0);
|
||||
opacity: 0.3;
|
||||
}
|
||||
50%{
|
||||
box-shadow:0 0 100px rgba(255,255,255, 1);
|
||||
opacity: 1;
|
||||
}
|
||||
100%{
|
||||
box-shadow:0 0 0px rgba(255,255,255,0);
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
@keyframes bye{
|
||||
0%{
|
||||
box-shadow:0 0 0px rgba(255,255,255, 0);
|
||||
opacity: 0.3;
|
||||
}
|
||||
50%{
|
||||
box-shadow:0 0 100px rgba(255,255,255, 1);
|
||||
opacity: 1;
|
||||
}
|
||||
100%{
|
||||
box-shadow:0 0 0px 0px rgba(255,255,255, 0);
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
.box{ position: absolute; left: 50%; top: 50%; transform: translate3d(-50%, -50%, 0); -webkit-transform: translate3d(-50%, -50%, 0); width:200px; height:130px; padding:70px 0 0; line-height:26px; text-align:center; border-radius:100%; background-color:#FF8C00; color:#fff;}
|
||||
.bye{animation:bye 3s infinite ; -webkit-animation:bye 3s infinite ;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="box bye">
|
||||
<p>从未闪耀，也就不曾黯然</p>
|
||||
<p style="">八圆包<br>2013.10.14 - 2015.12.22</p>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
129
test/code.html
Normal file
129
test/code.html
Normal file
@@ -0,0 +1,129 @@
|
||||
<!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: 50px 100px;}
|
||||
pre{margin-bottom: 20px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<pre class="layui-code" lay-title="JavaScript" lay-height="500px">
|
||||
//路由
|
||||
LAY.fn.router = function(hash){
|
||||
var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
|
||||
var item, param = {
|
||||
dir: []
|
||||
};
|
||||
for(var i = 0; i < hashs.length; i++){
|
||||
item = hashs[i].split('=');
|
||||
/^\w+=/.test(hashs[i]) ? function(){
|
||||
if(item[0] !== 'dir'){
|
||||
param[item[0]] = item[1];
|
||||
}
|
||||
}() : param.dir.push(hashs[i]);
|
||||
item = null;
|
||||
}
|
||||
return param;
|
||||
};
|
||||
</pre>
|
||||
|
||||
<pre class="layui-code" lay-skin="notepad">
|
||||
//路由
|
||||
LAY.fn.router = function(hash){
|
||||
var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
|
||||
var item, param = {
|
||||
dir: []
|
||||
};
|
||||
for(var i = 0; i < hashs.length; i++){
|
||||
item = hashs[i].split('=');
|
||||
/^\w+=/.test(hashs[i]) ? function(){
|
||||
if(item[0] !== 'dir'){
|
||||
param[item[0]] = item[1];
|
||||
}
|
||||
}() : param.dir.push(hashs[i]);
|
||||
item = null;
|
||||
}
|
||||
return param;
|
||||
};
|
||||
</pre>
|
||||
|
||||
<pre class="layui-code">
|
||||
var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
|
||||
var item, param = {
|
||||
dir: []
|
||||
};
|
||||
<pre class="layui-code">
|
||||
//代码中的代码
|
||||
var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
|
||||
var item, param = {
|
||||
dir: []
|
||||
};
|
||||
</pre>
|
||||
</pre>
|
||||
|
||||
<pre class="layui-code" lay-skin="notepad">
|
||||
//路由
|
||||
LAY.fn.router = function(hash){
|
||||
var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
|
||||
var item, param = {
|
||||
dir: []
|
||||
};
|
||||
for(var i = 0; i < hashs.length; i++){
|
||||
item = hashs[i].split('=');
|
||||
/^\w+=/.test(hashs[i]) ? function(){
|
||||
if(item[0] !== 'dir'){
|
||||
param[item[0]] = item[1];
|
||||
}
|
||||
}() : param.dir.push(hashs[i]);
|
||||
item = null;
|
||||
}
|
||||
return param;
|
||||
};
|
||||
<pre class="layui-code" lay-skin="notepad">
|
||||
//代码中的代码
|
||||
var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
|
||||
var item, param = {
|
||||
dir: []
|
||||
};
|
||||
<pre class="layui-code" lay-skin="notepad">
|
||||
//代码中的代码
|
||||
var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
|
||||
var item, param = {
|
||||
dir: []
|
||||
};
|
||||
<pre class="layui-code" lay-skin="notepad">
|
||||
//代码中的代码
|
||||
var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
|
||||
var item, param = {
|
||||
dir: []
|
||||
};
|
||||
</pre>
|
||||
</pre>
|
||||
</pre>
|
||||
</pre>
|
||||
|
||||
|
||||
<pre class="layui-code" lay-encode="true">
|
||||
<div>
|
||||
123
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
|
||||
<script src="../src/layui.js"></script>
|
||||
<script>
|
||||
|
||||
layui.use('code', function(){
|
||||
layui.code();
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
135
test/element.html
Normal file
135
test/element.html
Normal file
@@ -0,0 +1,135 @@
|
||||
<!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>
|
||||
|
||||
|
||||
<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>
|
||||
</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"><a href="">大数据</a></li>
|
||||
<li class="layui-nav-item"><a href="">云市场</a></li>
|
||||
<li class="layui-nav-item"><a href="">社区</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
<br><br>
|
||||
|
||||
<span class="layui-breadcrumb">
|
||||
<a href="">首页</a>
|
||||
<a href="">国际新闻</a>
|
||||
<a href="">亚太地区</a>
|
||||
<a><cite>正文</cite></a>
|
||||
</span>
|
||||
|
||||
<br><br>
|
||||
|
||||
<span class="layui-breadcrumb" lay-separator="|">
|
||||
<a href="">娱乐</a>
|
||||
<a href="">八卦</a>
|
||||
<a href="">体育</a>
|
||||
<a href="">搞笑</a>
|
||||
<a href="">视频</a>
|
||||
<a href="">游戏</a>
|
||||
<a href="">综艺</a>
|
||||
</span>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="layui-tab">
|
||||
<ul class="layui-tab-title">
|
||||
<li class="layui-this">标题1</li>
|
||||
<li>标题2</li>
|
||||
<li>标题3</li>
|
||||
<li>标题4</li>
|
||||
<li>标题5</li>
|
||||
</ul>
|
||||
<div class="layui-tab-content">
|
||||
<div class="layui-tab-item layui-show">1</div>
|
||||
<div class="layui-tab-item">2</div>
|
||||
<div class="layui-tab-item">3</div>
|
||||
<div class="layui-tab-item">4</div>
|
||||
<div class="layui-tab-item">5</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-tab layui-tab-brief">
|
||||
<ul class="layui-tab-title">
|
||||
<li class="layui-this">标题1</li>
|
||||
<li>标题2</li>
|
||||
<li>标题3</li>
|
||||
<li>标题4</li>
|
||||
<li>标题5</li>
|
||||
<li>标题6</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="layui-inline">
|
||||
<div class="layui-tab layui-tab-card">
|
||||
<ul class="layui-tab-title">
|
||||
<li class="layui-this">标题1</li>
|
||||
<li>标题2</li>
|
||||
<li>标题3</li>
|
||||
<li>标题4</li>
|
||||
<li>标题5</li>
|
||||
<li>标题6</li>
|
||||
</ul>
|
||||
<div class="layui-tab-content">
|
||||
<div class="layui-tab-item layui-show">1</div>
|
||||
<div class="layui-tab-item">2</div>
|
||||
<div class="layui-tab-item">3</div>
|
||||
<div class="layui-tab-item">4</div>
|
||||
<div class="layui-tab-item">5</div>
|
||||
<div class="layui-tab-item">6</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-tab" lay-filter="test">
|
||||
<ul class="layui-tab-title">
|
||||
<li class="layui-this">标题1</li>
|
||||
<li>标题2</li>
|
||||
<li>标题3</li>
|
||||
<li>标题4</li>
|
||||
<li>标题5</li>
|
||||
<li>标题6</li>
|
||||
<li>标题7</li>
|
||||
<li>标题8</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script src="../src/layui.js"></script>
|
||||
<script>
|
||||
|
||||
layui.use('element', function(){
|
||||
var element = layui.element();
|
||||
|
||||
element.on('tab(test)', function(data){
|
||||
console.log(this, data);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
75
test/flow.html
Normal file
75
test/flow.html
Normal file
@@ -0,0 +1,75 @@
|
||||
<!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: 15px;}
|
||||
.flow-default{height: 400px; overflow: auto; 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%;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<ul class="flow-default">
|
||||
<li>1</li>
|
||||
<li>2</li>
|
||||
<li>3</li>
|
||||
<li>4</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<div class="demo" style="height: 200px; overflow: auto;">
|
||||
<img lay-src="http://s16.mogucdn.com/p2/160919/upload_493j665e50b0i0g8j61iie6f5aa5c_715x530.jpg">
|
||||
<img lay-src="http://s7.mogucdn.com/p2/160920/in_1icf55k51643icf2i1i06g897hjdj_715x530.jpg">
|
||||
<img lay-src="http://s10.mogucdn.com/p2/160918/oj_4hge1j47hl5ie0fljd6d07ha3kj2l_715x530.jpg">
|
||||
<img lay-src="http://s7.mogucdn.com/p2/160914/iz_2lcjk0lbl8la70448hj0jg0l8gde5_305x330.jpg">
|
||||
<img lay-src="http://s6.mogucdn.com/p2/160914/iz_5lc1cdg3j2hibl9ai99lg7c28k1fh_305x330.jpg">
|
||||
<img lay-src="http://s8.mogucdn.com/p1/160721/iz_ifqtszjqgazdsmtfhezdambqgyyde_305x330.jpg">
|
||||
<img lay-src="http://s18.mogucdn.com/p2/160919/upload_4dh1hfflhi031ll1akh49i5aeldjl_183x213.png">
|
||||
<img lay-src="http://s8.mogucdn.com/p2/160907/1dq_16e3b4d04ck34g1fb61d5llj47526_175x170.png">
|
||||
<img lay-src="http://s8.mogucdn.com/p2/160907/1dq_132fe83d4gi1jb6gehc8ibcl6944e_175x170.png">
|
||||
</div>
|
||||
|
||||
|
||||
<script src="../src/layui.js"></script>
|
||||
<script>
|
||||
layui.use('flow', function(){
|
||||
var flow = layui.flow;
|
||||
|
||||
flow.load({
|
||||
elem: '.flow-default' //流加载容器
|
||||
,scrollElem: '.flow-default' //滚动条所在元素，默认document
|
||||
//,isAuto: false
|
||||
//,isShowEnd: false
|
||||
//,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>')
|
||||
}
|
||||
next(lis.join(''), page > 5 ? 0 : 11);
|
||||
}, 500);
|
||||
}
|
||||
});
|
||||
|
||||
//按屏加载图片
|
||||
flow.lazyimg({
|
||||
elem: '.demo img'
|
||||
,scrollElem: '.demo'
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
251
test/form.html
Normal file
251
test/form.html
Normal file
@@ -0,0 +1,251 @@
|
||||
<!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>
|
||||
|
||||
<form class="layui-form layui-form-pane1" action="">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">输入框</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="title" lay-verify="title" required placeholder="请输入标题" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">手机</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="tel" name="phone" lay-verify="" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">邮箱</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="tel" name="email" lay-verify="" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">密码</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="password" name="password" lay-verify="pass" placeholder="请输入密码" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-form-mid layui-word-aux">请务必填写用户名</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">范围</label>
|
||||
<div class="layui-input-inline" style="width: 100px;">
|
||||
<input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-form-mid">-</div>
|
||||
<div class="layui-input-inline" style="width: 100px;">
|
||||
<input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">行内表单</label>
|
||||
<div class="layui-input-block">
|
||||
<select name="quiz">
|
||||
<option value="">请选择问题</option>
|
||||
<option value="你工作的第一个城市">你工作的第一个城市</option>
|
||||
<option value="你的工号">你的工号</option>
|
||||
<option value="你最喜欢的老师">你最喜欢的老师</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">选择框</label>
|
||||
<div class="layui-input-block">
|
||||
<select name="interest" lay-filter="aihao">
|
||||
<option value=""></option>
|
||||
<option value="0">写作</option>
|
||||
<option value="1" selected>阅读</option>
|
||||
<option value="2">游戏</option>
|
||||
<option value="3">音乐</option>
|
||||
<option value="4">旅行</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">复选框</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="checkbox" name="like[write]" title="写作">
|
||||
<input type="checkbox" name="like[read]" title="阅读">
|
||||
<input type="checkbox" name="like[game]" title="游戏">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">开关关</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="checkbox" name="close" lay-skin="switch" title="开关">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">开关开</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="checkbox" checked name="open" lay-skin="switch" lay-filter="switchTest" title="开关">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">单选框</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="radio" name="sex" value="男" title="男">
|
||||
<input type="radio" name="sex" value="女" title="女" checked>
|
||||
<input type="radio" name="sex" value="中型" title="中">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item layui-form-text">
|
||||
<label class="layui-form-label">请填写描述</label>
|
||||
<div class="layui-input-block">
|
||||
<textarea placeholder="请输入内容" class="layui-textarea"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-block">
|
||||
<button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
|
||||
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<br><br><br><br><br><br><br><br><br><br>
|
||||
|
||||
<span>按钮色系：</span>
|
||||
|
||||
<a href="" class="layui-btn layui-btn-primary">原始按钮</a>
|
||||
<a href="" class="layui-btn">默认按钮</a>
|
||||
<button class="layui-btn layui-btn-normal">百搭按钮</button>
|
||||
<button class="layui-btn layui-btn-warm">暖色按钮</button>
|
||||
<button class="layui-btn layui-btn-danger">警告按钮</button>
|
||||
<button class="layui-btn layui-btn-disabled">禁用按钮</button>
|
||||
|
||||
<br><br>
|
||||
|
||||
<span>按钮图标：</span>
|
||||
|
||||
<button class="layui-btn"><i class="layui-icon"></i> 添加</button>
|
||||
<button class="layui-btn"><i class="layui-icon">ဂ</i></button>
|
||||
<button class="layui-btn"><i class="layui-icon"></i></button>
|
||||
<button class="layui-btn"><i class="layui-icon"></i></button>
|
||||
<button class="layui-btn"><i class="layui-icon"></i></button>
|
||||
<button class="layui-btn"><i class="layui-icon"></i></button>
|
||||
<button class="layui-btn"><i class="layui-icon"></i></button>
|
||||
|
||||
|
||||
<br><br>
|
||||
|
||||
<span>按钮尺寸：</span>
|
||||
|
||||
|
||||
<button class="layui-btn layui-btn-big">大型按钮</button>
|
||||
<button class="layui-btn">默认按钮</button>
|
||||
<button class="layui-btn layui-btn-small">小型按钮</button>
|
||||
<button class="layui-btn layui-btn-mini">迷你按钮</button>
|
||||
<button class="layui-btn layui-btn-primary layui-btn-big">大型按钮</button>
|
||||
<button class="layui-btn layui-btn-primary">默认按钮</button>
|
||||
<button class="layui-btn layui-btn-primary layui-btn-small">小型按钮</button>
|
||||
<button class="layui-btn layui-btn-primary layui-btn-mini">迷你按钮</button>
|
||||
|
||||
<br><br>
|
||||
|
||||
<span>按钮圆角：</span>
|
||||
|
||||
<button class="layui-btn layui-btn-primary layui-btn-radius">原始按钮</button>
|
||||
<button class="layui-btn layui-btn-radius">默认按钮</button>
|
||||
<button class="layui-btn layui-btn-normal layui-btn-radius">百搭按钮</button>
|
||||
<button class="layui-btn layui-btn-warm layui-btn-radius">暖色按钮</button>
|
||||
<button class="layui-btn layui-btn-danger layui-btn-radius">警告按钮</button>
|
||||
<button class="layui-btn layui-btn-disabled layui-btn-radius">禁用按钮</button>
|
||||
|
||||
<br><br>
|
||||
|
||||
<span>按钮组合：</span>
|
||||
|
||||
<button class="layui-btn layui-btn-big layui-btn-primary layui-btn-radius">大型加圆角</button>
|
||||
<button class="layui-btn layui-btn-small layui-btn-normal"><i class="layui-icon"></i> 删除</button>
|
||||
<button class="layui-btn layui-btn-mini layui-btn-disabled"><i class="layui-icon"></i> 禁分享</button>
|
||||
|
||||
<br><br><br><br><br>
|
||||
|
||||
|
||||
<script src="../src/layui.js"></script>
|
||||
<script>
|
||||
|
||||
layui.use('form', function(){
|
||||
var form = layui.form();
|
||||
|
||||
//自定义验证规则
|
||||
form.verify({
|
||||
title: function(value){
|
||||
if(value.length < 5){
|
||||
return '标题也太短了吧';
|
||||
}
|
||||
}
|
||||
,pass: [/(.+){6,12}$/, '密码必须6到12位']
|
||||
});
|
||||
|
||||
|
||||
//事件监听
|
||||
form.on('select', function(data){
|
||||
console.log(data);
|
||||
});
|
||||
|
||||
form.on('select(aihao)', function(data){
|
||||
console.log(data);
|
||||
});
|
||||
|
||||
form.on('checkbox', function(data){
|
||||
console.log(data.elem.checked);
|
||||
});
|
||||
|
||||
form.on('switch', function(data){
|
||||
console.log(data);
|
||||
});
|
||||
|
||||
form.on('radio', function(data){
|
||||
console.log(data);
|
||||
});
|
||||
|
||||
//监听提交
|
||||
form.on('submit(*)', function(data){
|
||||
console.log(data)
|
||||
return false;
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<form id="test">
|
||||
<input type="radio" value="girl">
|
||||
<input type="checkbox" name="love[a]">
|
||||
<input type="checkbox" name="love[b]">
|
||||
<input value="1">
|
||||
<button>go</button>
|
||||
</form>
|
||||
<script>
|
||||
layui.use('jquery', function(){
|
||||
var $ = layui.jquery;
|
||||
var submit = function(){
|
||||
return false;
|
||||
};
|
||||
$('#test').on('submit', function(){
|
||||
return false
|
||||
});
|
||||
$('#test').on('submit', function(){
|
||||
return true
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
209
test/im-demo.html
Normal file
209
test/im-demo.html
Normal file
@@ -0,0 +1,209 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<title>layim - layui</title>
|
||||
|
||||
<link rel="stylesheet" href="../src/css/layui.css">
|
||||
<style>
|
||||
html, body{background-color: #333;}
|
||||
body{height: 3000px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
|
||||
<script src="http://local.res.layui.com/lay/lib/layer/src/layer.js?v=2.4"></script>
|
||||
|
||||
|
||||
|
||||
<script src="../build/layui.js"></script>
|
||||
<script>
|
||||
|
||||
layui.use('layim', function(layim){
|
||||
|
||||
//建立WebSocket通讯
|
||||
/*
|
||||
var socket = layui.socket('/im/', {
|
||||
'force new connection': false
|
||||
});
|
||||
|
||||
socket.emit('system', {});
|
||||
*/
|
||||
|
||||
var autoReplay = [
|
||||
'您好，我现在有事不在，一会再和您联系。',
|
||||
'你没发错吧？face[微笑] ',
|
||||
'洗澡中，请勿打扰，偷窥请购票，个体四十，团体八折，订票电话：一般人我不告诉他！face[哈哈] ',
|
||||
'你好，我是主人的美女秘书，有什么事就跟我说吧，等他回来我会转告他的。face[心] face[心] face[心] ',
|
||||
'face[威武] face[威武] face[威武] face[威武] ',
|
||||
'<（@￣︶￣@）>',
|
||||
'你要和我说话？你真的要和我说话？你确定自己想说吗？你一定非说不可吗？那你说吧，这是自动回复。',
|
||||
'face[黑线] 你慢慢说，别急……',
|
||||
'(*^__^*) face[嘻嘻] ，是贤心吗？'
|
||||
];
|
||||
|
||||
//基础配置
|
||||
layim.config({
|
||||
|
||||
//初始化接口
|
||||
init: {
|
||||
url: './json/layim/getList.json'
|
||||
,data: {}
|
||||
}
|
||||
|
||||
//,minRight: '90px'
|
||||
|
||||
/*
|
||||
,mine: {
|
||||
"username": "LayIM体验者" //我的昵称
|
||||
,"id": "100000123" //我的ID
|
||||
,"status": "online" //在线状态 online：在线、hide：隐身
|
||||
,"remark": "在深邃的编码世界，做一枚轻盈的纸飞机" //我的签名
|
||||
,"avatar": "a.jpg" //我的头像
|
||||
}
|
||||
*/
|
||||
|
||||
//简约模式（不显示主面板）
|
||||
//,brief: true
|
||||
|
||||
//,title: 'WebIM'
|
||||
|
||||
//查看群员接口
|
||||
,members: {
|
||||
url: './json/layim/getMembers.json'
|
||||
,data: {}
|
||||
}
|
||||
|
||||
//上传图片接口
|
||||
,uploadImage: {
|
||||
url: '/upload/image' //（返回的数据格式见下文）
|
||||
,type: '' //默认post
|
||||
}
|
||||
|
||||
//上传文件接口
|
||||
,uploadFile: {
|
||||
url: '/upload/file' //（返回的数据格式见下文）
|
||||
,type: '' //默认post
|
||||
}
|
||||
|
||||
//,right: '100px'
|
||||
//,skin: ['http://cdn.firstlinkapp.com/upload/2016_4/1461747766565_14690.jpg'] //皮肤
|
||||
//,isfriend: false //是否开启好友
|
||||
//,isgroup: false //是否开启群组
|
||||
//,min: true //是否始终最小化主面板（默认false）
|
||||
,chatLog: '/chat/log/' //聊天记录地址
|
||||
,find: '/find/'
|
||||
//,copyright: true //是否授权
|
||||
});
|
||||
|
||||
/*
|
||||
layim.chat({
|
||||
name: '在线客服-小苍'
|
||||
,type: 'kefu'
|
||||
,avatar: 'http://tva3.sinaimg.cn/crop.0.0.180.180.180/7f5f6861jw1e8qgp5bmzyj2050050aa8.jpg'
|
||||
,id: -1
|
||||
});
|
||||
layim.chat({
|
||||
name: '在线客服-心心'
|
||||
,type: 'kefu'
|
||||
,avatar: 'http://tva1.sinaimg.cn/crop.219.144.555.555.180/0068iARejw8esk724mra6j30rs0rstap.jpg'
|
||||
,id: -2
|
||||
});
|
||||
layim.setChatMin();*/
|
||||
|
||||
//监听发送消息
|
||||
layim.on('sendMessage', function(data){
|
||||
var To = data.to;
|
||||
console.log(data);
|
||||
|
||||
|
||||
|
||||
//演示自动回复
|
||||
setTimeout(function(){
|
||||
var obj = {};
|
||||
if(To.type === 'group'){
|
||||
obj = {
|
||||
username: '模拟群员'+(Math.random()*100|0)
|
||||
,avatar: layui.cache.dir + 'images/face/'+ (Math.random()*72|0) + '.gif'
|
||||
,id: To.id
|
||||
,type: To.type
|
||||
,content: autoReplay[Math.random()*9|0]
|
||||
}
|
||||
} else {
|
||||
obj = {
|
||||
username: To.name
|
||||
,avatar: To.avatar
|
||||
,id: To.id
|
||||
,type: To.type
|
||||
,content: autoReplay[Math.random()*9|0]
|
||||
}
|
||||
}
|
||||
layim.getMessage(obj);
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
//监听在线状态的切换事件
|
||||
layim.on('online', function(data){
|
||||
console.log(data);
|
||||
});
|
||||
|
||||
|
||||
|
||||
//layim建立就绪
|
||||
layim.on('ready', function(res){
|
||||
|
||||
console.log(res.mine);
|
||||
|
||||
//添加好友（如果检测到该socket）
|
||||
layim.addList({
|
||||
type: 'group'
|
||||
,avatar: "http://tva3.sinaimg.cn/crop.64.106.361.361.50/7181dbb3jw8evfbtem8edj20ci0dpq3a.jpg"
|
||||
,groupname: 'Angular开发'
|
||||
,id: "12333333"
|
||||
,members: 0
|
||||
});
|
||||
layim.addList({
|
||||
type: 'friend'
|
||||
,avatar: "http://tp2.sinaimg.cn/2386568184/180/40050524279/0"
|
||||
,username: '冲田杏梨'
|
||||
,groupid: 2
|
||||
,id: "1233333312121212"
|
||||
,remark: "本人冲田杏梨将结束AV女优的工作"
|
||||
});
|
||||
|
||||
//接受消息（如果检测到该socket）
|
||||
layim.getMessage({
|
||||
username: "贤心"
|
||||
,avatar: "http://tp1.sinaimg.cn/1571889140/180/40030060651/1"
|
||||
,id: "100001"
|
||||
,type: "friend"
|
||||
,content: "嗨，你好！欢迎体验LayIM。演示标记："+ new Date().getTime()
|
||||
});
|
||||
layim.getMessage({
|
||||
username: "Hi"
|
||||
,avatar: "http://qzapp.qlogo.cn/qzapp/100280987/56ADC83E78CEC046F8DF2C5D0DD63CDE/100"
|
||||
,id: "10000111"
|
||||
,type: "friend"
|
||||
,content: "临时："+ new Date().getTime()
|
||||
});
|
||||
});
|
||||
|
||||
//监听查看群员
|
||||
layim.on('members', function(data){
|
||||
console.log(data);
|
||||
});
|
||||
|
||||
//监听聊天窗口的切换
|
||||
layim.on('chatChange', function(data){
|
||||
console.log(data);
|
||||
});
|
||||
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
90
test/json/layim/getList.json
Normal file
90
test/json/layim/getList.json
Normal file
@@ -0,0 +1,90 @@
|
||||
{
|
||||
"code": 0
|
||||
,"msg": ""
|
||||
,"data": {
|
||||
"mine": {
|
||||
"username": "纸飞机"
|
||||
,"id": "1003"
|
||||
,"status": "online"
|
||||
,"sign": "在深邃的编码世界，做一枚轻盈的纸飞机"
|
||||
,"avatar": "http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg"
|
||||
}
|
||||
,"friend": [{
|
||||
"groupname": "前端码屌"
|
||||
,"id": 1
|
||||
,"online": 2
|
||||
,"list": [{
|
||||
"username": "贤心"
|
||||
,"id": "100001"
|
||||
,"avatar": "http://tp1.sinaimg.cn/1571889140/180/40030060651/1"
|
||||
,"sign": "这些都是测试数据，实际使用请严格按照该格式返回"
|
||||
},{
|
||||
"username": "老彭VIP"
|
||||
,"id": "1000"
|
||||
,"avatar": "http://wx.qlogo.cn/mmopen/sktw7MUgN2rQ8jWoEI59VURq3iczG6KWBdWxSUyZiblzPJCAl1eUz0WQDYQ0VMyKD0Bnc6Qtpb5DsvmMicYRXWkPg/0"
|
||||
,"sign": "微电商达人"
|
||||
},{
|
||||
"username": "Lemon_CC"
|
||||
,"id": "102101"
|
||||
,"avatar": "http://tp2.sinaimg.cn/1833062053/180/5643591594/0"
|
||||
,"sign": ""
|
||||
},{
|
||||
"username": "马小云"
|
||||
,"id": "168168"
|
||||
,"avatar": "http://tp4.sinaimg.cn/2145291155/180/5601307179/1"
|
||||
,"sign": "让天下没有难写的代码"
|
||||
},{
|
||||
"username": "徐小峥"
|
||||
,"id": "666666"
|
||||
,"avatar": "http://tp2.sinaimg.cn/1783286485/180/5677568891/1"
|
||||
,"sign": "代码在囧途，也要写到底"
|
||||
}]
|
||||
},{
|
||||
"groupname": "网红"
|
||||
,"id": 2
|
||||
,"online": 3
|
||||
,"list": [{
|
||||
"username": "罗玉凤"
|
||||
,"id": "121286"
|
||||
,"avatar": "http://tp1.sinaimg.cn/1241679004/180/5743814375/0"
|
||||
,"sign": "在自己实力不济的时候，不要去相信什么媒体和记者。他们不是善良的人，有时候候他们的采访对当事人而言就是陷阱"
|
||||
},{
|
||||
"username": "长泽梓Azusa"
|
||||
,"id": "100001222"
|
||||
,"sign": "我是日本女艺人长泽あずさ"
|
||||
,"avatar": "http://tva1.sinaimg.cn/crop.0.0.180.180.180/86b15b6cjw1e8qgp5bmzyj2050050aa8.jpg"
|
||||
},{
|
||||
"username": "大鱼_MsYuyu"
|
||||
,"id": "12123454"
|
||||
,"avatar": "http://tp1.sinaimg.cn/5286730964/50/5745125631/0"
|
||||
,"sign": "我瘋了！這也太準了吧 超級笑點低"
|
||||
},{
|
||||
"username": "谢楠"
|
||||
,"id": "10034001"
|
||||
,"avatar": "http://tp4.sinaimg.cn/1665074831/180/5617130952/0"
|
||||
,"sign": ""
|
||||
},{
|
||||
"username": "柏雪近在它香"
|
||||
,"id": "3435343"
|
||||
,"avatar": "http://tp2.sinaimg.cn/2518326245/180/5636099025/0"
|
||||
,"sign": ""
|
||||
}]
|
||||
},{
|
||||
"groupname": "我心中的女神"
|
||||
,"id": 3
|
||||
,"online": 1
|
||||
,"list": null
|
||||
}]
|
||||
,"group": [{
|
||||
"groupname": "前端群"
|
||||
,"id": "101"
|
||||
,"avatar": "http://tp2.sinaimg.cn/2211874245/180/40050524279/0"
|
||||
,"members": 67
|
||||
},{
|
||||
"groupname": "Fly社区官方群"
|
||||
,"id": "102"
|
||||
,"avatar": "http://tp2.sinaimg.cn/5488749285/50/5719808192/1"
|
||||
,"members": 161
|
||||
}]
|
||||
}
|
||||
}
|
||||
68
test/json/layim/getMembers.json
Normal file
68
test/json/layim/getMembers.json
Normal file
@@ -0,0 +1,68 @@
|
||||
{
|
||||
"code": 0
|
||||
,"msg": ""
|
||||
,"data": {
|
||||
"owner": {
|
||||
"username": "贤心"
|
||||
,"id": "100001"
|
||||
,"avatar": "http://tp1.sinaimg.cn/1571889140/180/40030060651/1"
|
||||
,"remark": "这些都是测试数据，实际使用请严格按照该格式返回"
|
||||
}
|
||||
,"list": [{
|
||||
"username": "Z_子晴"
|
||||
,"id": "108101"
|
||||
,"avatar": "http://tva3.sinaimg.cn/crop.0.0.512.512.180/8693225ajw8f2rt20ptykj20e80e8weu.jpg"
|
||||
,"remark": "微电商达人"
|
||||
},{
|
||||
"username": "Lemon_CC"
|
||||
,"id": "102101"
|
||||
,"avatar": "http://tp2.sinaimg.cn/1833062053/180/5643591594/0"
|
||||
,"remark": ""
|
||||
},{
|
||||
"username": "马小云"
|
||||
,"id": "168168"
|
||||
,"avatar": "http://tp4.sinaimg.cn/2145291155/180/5601307179/1"
|
||||
,"remark": "让天下没有难写的代码"
|
||||
},{
|
||||
"username": "徐小峥"
|
||||
,"id": "666666"
|
||||
,"avatar": "http://tp2.sinaimg.cn/1783286485/180/5677568891/1"
|
||||
,"remark": "代码在囧途，也要写到底"
|
||||
},{
|
||||
"username": "罗玉凤"
|
||||
,"id": "121286"
|
||||
,"avatar": "http://tp1.sinaimg.cn/1241679004/180/5743814375/0"
|
||||
,"remark": "在自己实力不济的时候，不要去相信什么媒体和记者。他们不是善良的人，有时候候他们的采访对当事人而言就是陷阱"
|
||||
},{
|
||||
"username": "长泽梓Azusa"
|
||||
,"id": "100001222"
|
||||
,"remark": "我是日本女艺人长泽あずさ"
|
||||
,"avatar": "http://tva1.sinaimg.cn/crop.0.0.180.180.180/86b15b6cjw1e8qgp5bmzyj2050050aa8.jpg"
|
||||
},{
|
||||
"username": "大鱼_MsYuyu"
|
||||
,"id": "12123454"
|
||||
,"avatar": "http://tp1.sinaimg.cn/5286730964/50/5745125631/0"
|
||||
,"remark": "我瘋了！這也太準了吧 超級笑點低"
|
||||
},{
|
||||
"username": "谢楠"
|
||||
,"id": "10034001"
|
||||
,"avatar": "http://tp4.sinaimg.cn/1665074831/180/5617130952/0"
|
||||
,"remark": ""
|
||||
},{
|
||||
"username": "柏雪近在它香"
|
||||
,"id": "3435343"
|
||||
,"avatar": "http://tp2.sinaimg.cn/2518326245/180/5636099025/0"
|
||||
,"remark": ""
|
||||
},{
|
||||
"username": "林心如"
|
||||
,"id": "76543"
|
||||
,"avatar": "http://tp3.sinaimg.cn/1223762662/180/5741707953/0"
|
||||
,"remark": "我爱贤心"
|
||||
},{
|
||||
"username": "佟丽娅"
|
||||
,"id": "4803920"
|
||||
,"avatar": "http://tp4.sinaimg.cn/1345566427/180/5730976522/0"
|
||||
,"remark": "我也爱贤心吖吖啊"
|
||||
}]
|
||||
}
|
||||
}
|
||||
36
test/laydate.html
Normal file
36
test/laydate.html
Normal file
@@ -0,0 +1,36 @@
|
||||
<!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: 50px 100px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<ul class="layui-form">
|
||||
<li class="layui-form-item">
|
||||
<label class="layui-form-label">日期</label>
|
||||
<div class="layui-input-inline">
|
||||
<input required type="text" id="layui-laydate-input" class="layui-input">
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<script src="../src/layui.js"></script>
|
||||
<script>
|
||||
layui.use('laydate', function(){
|
||||
var laydate = layui.laydate
|
||||
|
||||
laydate({
|
||||
elem: '#layui-laydate-input'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
37
test/layedit.html
Normal file
37
test/layedit.html
Normal file
@@ -0,0 +1,37 @@
|
||||
<!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>
|
||||
|
||||
<div style="width: 800px;">
|
||||
<textarea id="demo" class="layui-hide">
|
||||
<p><span>一个范围具有两个边界点，即一个开始点和一个结束点。每个边界点由一个节点和那个节点的偏移量指定。该节点通常是 </span><a href="http://www.w3school.com.cn/xmldom/dom_element.asp" title="XML DOM - Element 对象">Element 节点</a><span>、</span><a href="http://www.w3school.com.cn/xmldom/dom_document.asp" title="XML DOM - Document 对象">Document 节点</a><span>或 </span><a href="http://www.w3school.com.cn/xmldom/dom_text.asp" title="XML DOM - Text 对象">Text 节点</a><span>。对于 Element 节点和 Document 节点，偏移量指该节点的子节点。偏移量为 0，说明边界点位于该节点的第一个子节点之前。偏移量为 1，说明边界点位于该节点的第一个子节点之后，第二个子节点之前。但如果边界节点是 Text 节点，偏移量则指的是文本中两个字符之间的位置。</span></p>
|
||||
</textarea>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="../src/layui.js"></script>
|
||||
<script>
|
||||
layui.use('layedit', function(){
|
||||
var layedit = layui.layedit;
|
||||
|
||||
layedit.build('demo', {
|
||||
//hideTool: ['image']
|
||||
//,uploadImages: {}
|
||||
//,tool: []
|
||||
//,height: 100
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
31
test/layout.html
Normal file
31
test/layout.html
Normal file
@@ -0,0 +1,31 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<title>layout布局 - Layui</title>
|
||||
|
||||
<link rel="stylesheet" href="../src/css/layui.css">
|
||||
|
||||
<style>
|
||||
.demo1{width: 200px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="layui-layout layui-layout-admin">
|
||||
<div class="layui-header layui-bg-gray"></div>
|
||||
<div class="layui-side layui-bg-black">
|
||||
<div class="layui-side-scroll"></div>
|
||||
</div>
|
||||
<div class="layui-body">
|
||||
<div class=""></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../src/layui.js"></script>
|
||||
<script>
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
89
test/laypage.html
Normal file
89
test/laypage.html
Normal file
@@ -0,0 +1,89 @@
|
||||
<!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>
|
||||
|
||||
<div id="demo1"></div>
|
||||
<div id="demo2"></div>
|
||||
<div id="demo3"></div>
|
||||
<div id="demo4"></div>
|
||||
<div id="demo5"></div>
|
||||
<div id="demo6"></div>
|
||||
<div id="demo7"></div>
|
||||
|
||||
|
||||
<script src="../src/layui.js"></script>
|
||||
<script>
|
||||
|
||||
layui.use(['laypage', 'layer'], function(){
|
||||
var laypage = layui.laypage
|
||||
,layer = layui.layer;
|
||||
|
||||
laypage({
|
||||
cont: 'demo1'
|
||||
,pages: 100 //总页数
|
||||
,groups: 5 //连续显示分页数
|
||||
});
|
||||
|
||||
laypage({
|
||||
cont: 'demo2'
|
||||
,pages: 100
|
||||
,skin: '#1E9FFF'
|
||||
});
|
||||
|
||||
laypage({
|
||||
cont: 'demo3'
|
||||
,pages: 100
|
||||
,first: 1
|
||||
,last: 100
|
||||
,prev: '<em><</em>'
|
||||
,next: '<em>></em>'
|
||||
});
|
||||
|
||||
laypage({
|
||||
cont: 'demo4'
|
||||
,pages: 100
|
||||
,first: false
|
||||
,last: false
|
||||
});
|
||||
|
||||
laypage({
|
||||
cont: 'demo5'
|
||||
,pages: 100
|
||||
,curr: location.hash.replace('#!fenye=', '') //获取hash值为fenye的当前页
|
||||
,hash: 'fenye' //自定义hash值
|
||||
});
|
||||
|
||||
laypage({
|
||||
cont: 'demo6'
|
||||
,pages: 5
|
||||
,groups: 0
|
||||
,first: false
|
||||
,last: false
|
||||
,jump: function(obj, first){
|
||||
if(!first){
|
||||
layer.msg('第 '+ obj.curr +'页');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
laypage({
|
||||
cont: 'demo7'
|
||||
,pages: 100
|
||||
,skip: true
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
30
test/slide.html
Normal file
30
test/slide.html
Normal file
@@ -0,0 +1,30 @@
|
||||
<!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: 20px;}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>轮播图</p>
|
||||
<ul>
|
||||
<li></li>
|
||||
</ul>
|
||||
|
||||
|
||||
<script src="../src/layui.js"></script>
|
||||
<script>
|
||||
layui.use('slide', function(){
|
||||
layui.slide();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
147
test/tree.html
Normal file
147
test/tree.html
Normal file
@@ -0,0 +1,147 @@
|
||||
<!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: 50px 100px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<ul id="demo"></ul>
|
||||
|
||||
<ul id="demo1" style="margin-top: 50px;"></ul>
|
||||
|
||||
<script src="../src/layui.js"></script>
|
||||
<script>
|
||||
|
||||
layui.use('tree', function(){
|
||||
var tree = layui.tree({
|
||||
elem: '#demo' //指定元素
|
||||
//,check: 'checkbox' //勾选风格
|
||||
,skin: 'as' //设定皮肤
|
||||
//,target: '_blank' //是否新选项卡打开（比如节点返回href才有效）
|
||||
,drag: true
|
||||
,click: function(item){ //点击节点回调
|
||||
console.log(item)
|
||||
}
|
||||
,nodes: [ //节点
|
||||
{
|
||||
name: '常用文件夹'
|
||||
,id: 1
|
||||
,alias: 'changyong'
|
||||
,children: [
|
||||
{
|
||||
name: '所有未读'
|
||||
,id: 11
|
||||
//,href: 'http://www.layui.com/'
|
||||
,alias: 'weidu'
|
||||
}, {
|
||||
name: '置顶邮件'
|
||||
,id: 12
|
||||
}, {
|
||||
name: '标签邮件'
|
||||
,id: 13
|
||||
}
|
||||
]
|
||||
}, {
|
||||
name: '我的邮箱'
|
||||
,id: 2
|
||||
,spread: true
|
||||
,children: [
|
||||
{
|
||||
name: 'QQ邮箱'
|
||||
,id: 21
|
||||
,spread: true
|
||||
,children: [
|
||||
{
|
||||
name: '收件箱'
|
||||
,id: 211
|
||||
,children: [
|
||||
{
|
||||
name: '所有未读'
|
||||
,id: 2111
|
||||
}, {
|
||||
name: '置顶邮件'
|
||||
,id: 2112
|
||||
}, {
|
||||
name: '标签邮件'
|
||||
,id: 2113
|
||||
}
|
||||
]
|
||||
}, {
|
||||
name: '已发出的邮件'
|
||||
,id: 212
|
||||
}, {
|
||||
name: '垃圾邮件'
|
||||
,id: 213
|
||||
}
|
||||
]
|
||||
}, {
|
||||
name: '阿里云邮'
|
||||
,id: 22
|
||||
,children: [
|
||||
{
|
||||
name: '收件箱'
|
||||
,id: 221
|
||||
}, {
|
||||
name: '已发出的邮件'
|
||||
,id: 222
|
||||
}, {
|
||||
name: '垃圾邮件'
|
||||
,id: 223
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
//生成一个模拟树
|
||||
var createTree = function(node, start){
|
||||
node = node || function(){
|
||||
var arr = [];
|
||||
for(var i = 1; i < 10; i++){
|
||||
arr.push({
|
||||
name: i.toString().replace(/(\d)/, '$1$1$1$1$1$1$1$1$1')
|
||||
});
|
||||
}
|
||||
return arr;
|
||||
}();
|
||||
start = start || 1;
|
||||
layui.each(node, function(index, item){
|
||||
if(start < 10 && index < 9){
|
||||
var child = [
|
||||
{
|
||||
name: (1 + index + start).toString().replace(/(\d)/, '$1$1$1$1$1$1$1$1$1')
|
||||
}
|
||||
];
|
||||
node[index].children = child;
|
||||
createTree(child, index + start + 1);
|
||||
}
|
||||
});
|
||||
return node;
|
||||
};
|
||||
|
||||
layui.tree({
|
||||
elem: '#demo1' //指定元素
|
||||
,nodes: createTree()
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<pre class="layui-code">
|
||||
# layui.tree-v2 备忘
|
||||
* check参数 - checkbox、radio的支持
|
||||
* 拖拽的支持
|
||||
</pre>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
49
test/upload.html
Normal file
49
test/upload.html
Normal file
@@ -0,0 +1,49 @@
|
||||
<!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: 50px 100px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<input type="file" name="file" class="layui-upload-file">
|
||||
<br><br>
|
||||
<i>保留原格式：</i><input type="file" name="file" id="test">
|
||||
<br><br>
|
||||
<input type="file" name="file1" lay-type="file" lay-ext="zip|rar" class="layui-upload-file">
|
||||
<br><br>
|
||||
<input type="file" name="file1" lay-type="audio" class="layui-upload-file">
|
||||
<br><br>
|
||||
<input type="file" name="file2" lay-type="video" class="layui-upload-file">
|
||||
|
||||
<script src="../src/layui.js"></script>
|
||||
<script>
|
||||
layui.use('upload', function(){
|
||||
|
||||
layui.upload({
|
||||
url: ''
|
||||
,success: function(src){
|
||||
console.log(src)
|
||||
}
|
||||
});
|
||||
|
||||
layui.upload({
|
||||
url: 'http://zz:98/api/upload-test/'
|
||||
,elem: '#test'
|
||||
,unwrap: true
|
||||
,success: function(src){
|
||||
console.log(src)
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
36
test/util.html
Normal file
36
test/util.html
Normal file
@@ -0,0 +1,36 @@
|
||||
<!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:100px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
|
||||
|
||||
<script src="../src/layui.js"></script>
|
||||
<script>
|
||||
layui.use(['util', 'layer'], function(){
|
||||
var util = layui.util, layer = layui.layer;
|
||||
|
||||
//固定块
|
||||
util.fixbar({
|
||||
bar1: true
|
||||
,bar2: true
|
||||
//,css: {right: 100, bottom: 100}
|
||||
,click: function(type){
|
||||
console.log(this, type);
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
104
test/xingzuo.html
Normal file
104
test/xingzuo.html
Normal file
@@ -0,0 +1,104 @@
|
||||
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>星座配对</title>
|
||||
<meta name="description" content="">
|
||||
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="format-detection" content="telephone=no">
|
||||
<style>
|
||||
*{margin: 0; padding: 0;}
|
||||
.anim-box{ position: relative; width: 80%; height: 500px; margin: 50px auto; background-color: #000; color: #000;}
|
||||
.anim-box>*{position: absolute;}
|
||||
.anim-box span{width: 80px; height: 80px; line-height: 80px; text-align: center; border-radius: 100%; background-color: #fff; color: #000; z-index: 999;}
|
||||
.anim-box span{-webkit-transition: .8s; transition: .8s;}
|
||||
.anim-box ul{ bottom: 50px; left: 20px; font-size: 0;}
|
||||
.anim-box ul li{display: inline-block; width: 80px; height: 80px; line-height: 80px; margin: 20px 20px 0 0; text-align: center; border-radius: 100%; background-color: #c00; color: #fff; font-size: 14px;}
|
||||
|
||||
@-webkit-keyframes beam{
|
||||
0%{
|
||||
box-shadow:0 0 0px rgba(255,255,255,0);
|
||||
opacity: 0.3;
|
||||
}
|
||||
50%{
|
||||
box-shadow: 0 0 100px rgba(255,255,255, 1);
|
||||
opacity: 1;
|
||||
}
|
||||
100%{
|
||||
box-shadow:0 0 0px rgba(255,255,255,0);
|
||||
opacity: 0.3;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
@keyframes beam{
|
||||
0%{
|
||||
box-shadow:0 0 0px rgba(255,255,255, 0);
|
||||
opacity: 0.3;
|
||||
}
|
||||
50%{
|
||||
box-shadow:0 0 100px rgba(255,255,255, 1);
|
||||
opacity: 1;
|
||||
}
|
||||
100%{
|
||||
box-shadow:0 0 0px 0px rgba(255,255,255, 0);
|
||||
opacity: 0.3;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
.beam{animation: beam 1s infinite ; -webkit-animation: beam 1s infinite ; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<section class="anim-box">
|
||||
<span id="me">你</span>
|
||||
<ul class="xingzuo">
|
||||
<li>天秤座</li>
|
||||
<li>处女座</li>
|
||||
<li>水瓶座</li>
|
||||
<li>双子座</li>
|
||||
<li>双鱼座</li>
|
||||
<li>白羊座</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
|
||||
<script>
|
||||
;!function(){
|
||||
|
||||
|
||||
var find = function(index){
|
||||
var me = document.getElementById('me');
|
||||
var ul = document.querySelectorAll('.xingzuo')[0];
|
||||
var xzs = ul.querySelectorAll('li');
|
||||
|
||||
var x = xzs[index].offsetLeft + ul.offsetLeft;
|
||||
var y = xzs[index].offsetTop + ul.offsetTop;
|
||||
|
||||
me.style['-webkit-transform'] = 'translate3d('+ x +'px, '+ y +'px, 0px) scale(0.5)';
|
||||
me.style['transform'] = 'translate3d('+ x +'px, '+ y +'px, 0px) scale(0.5)';
|
||||
me.style.opacity = 0.5;
|
||||
|
||||
setTimeout(function(){
|
||||
xzs[index].className = 'beam';
|
||||
setTimeout(function(){
|
||||
me.removeAttribute('style');
|
||||
}, 500);
|
||||
}, 800);
|
||||
};
|
||||
|
||||
|
||||
|
||||
setTimeout(function(){
|
||||
find(Math.random()*5|0) //模拟匹配
|
||||
}, 1000);
|
||||
|
||||
|
||||
}();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user