clear
This commit is contained in:
sentsin
@@ -1,76 +0,0 @@
|
||||
<!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>
|
||||
108
test/button.html
108
test/button.html
@@ -1,108 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>按钮 - layui</title>
|
||||
<meta name="renderer" content="webkit">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<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">
|
||||
|
||||
<link rel="stylesheet" href="../src/css/layui.css">
|
||||
|
||||
<style>
|
||||
body{padding: 10px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
<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>
|
||||
|
||||
<span>按钮组：</span>
|
||||
|
||||
<div class="layui-btn-group">
|
||||
<button class="layui-btn">增加</button>
|
||||
<button class="layui-btn ">编辑</button>
|
||||
<button class="layui-btn">删除</button>
|
||||
</div>
|
||||
|
||||
<div class="layui-btn-group">
|
||||
<button class="layui-btn layui-btn-small"><i class="layui-icon"></i></button>
|
||||
<button class="layui-btn layui-btn-small"><i class="layui-icon"></i></button>
|
||||
<button class="layui-btn layui-btn-small"><i class="layui-icon"></i></button>
|
||||
<button class="layui-btn layui-btn-small"><i class="layui-icon"></i></button>
|
||||
</div>
|
||||
|
||||
<div class="layui-btn-group">
|
||||
<button class="layui-btn layui-btn-primary layui-btn-small"><i class="layui-icon"></i></button>
|
||||
<button class="layui-btn layui-btn-primary layui-btn-small"><i class="layui-icon"></i></button>
|
||||
<button class="layui-btn layui-btn-primary layui-btn-small"><i class="layui-icon"></i></button>
|
||||
<button class="layui-btn layui-btn-primary layui-btn-small"><i class="layui-icon"></i></button>
|
||||
</div>
|
||||
|
||||
<br><br><br>
|
||||
|
||||
|
||||
<script src="../src/layui.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,28 +0,0 @@
|
||||
<!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>
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
129
test/code.html
129
test/code.html
@@ -1,129 +0,0 @@
|
||||
<!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>
|
||||
@@ -1,258 +0,0 @@
|
||||
<!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>
|
||||
|
||||
|
||||
<div class="layui-collapse" lay-filter="test" lay-accordion>
|
||||
<div class="layui-colla-item">
|
||||
<h2 class="layui-colla-title">杜甫</h2>
|
||||
<div class="layui-colla-content layui-show">
|
||||
<p>杜甫的思想核心是儒家的仁政思想，他有“致君尧舜上，再使风俗淳”的宏伟抱负。杜甫虽然在世时名声并不显赫，但后来声名远播，对中国文学和日本文学都产生了深远的影响。杜甫共有约1500首诗歌被保留了下来，大多集于《杜工部集》。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-colla-item">
|
||||
<h2 class="layui-colla-title">李清照</h2>
|
||||
<div class="layui-colla-content">
|
||||
<p>李清照出生于书香门第，早期生活优裕，其父李格非藏书甚富，她小时候就在良好的家庭环境中打下文学基础。出嫁后与夫赵明诚共同致力于书画金石的搜集整理。金兵入据中原时，流寓南方，境遇孤苦。所作词，前期多写其悠闲生活，后期多悲叹身世，情调感伤。形式上善用白描手法，自辟途径，语言清丽。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-colla-item">
|
||||
<h2 class="layui-colla-title">鲁迅</h2>
|
||||
<div class="layui-colla-content">
|
||||
<p>鲁迅一生在文学创作、文学批评、思想研究、文学史研究、翻译、美术理论引进、基础科学介绍和古籍校勘与研究等多个领域具有重大贡献。他对于五四运动以后的中国社会思想文化发展具有重大影响，蜚声世界文坛，尤其在韩国、日本思想文化领域有极其重要的地位和影响，被誉为“二十世纪东亚文化地图上占最大领土的作家”。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="layui-progress" lay-showPercent="true">
|
||||
<div class="layui-progress-bar" lay-percent="0%"></div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="layui-progress">
|
||||
<div class="layui-progress-bar layui-bg-red" lay-percent="20%"></div>
|
||||
</div>
|
||||
<br>
|
||||
<div class="layui-progress">
|
||||
<div class="layui-progress-bar layui-bg-orange" lay-percent="30%"></div>
|
||||
</div>
|
||||
<br>
|
||||
<div class="layui-progress">
|
||||
<div class="layui-progress-bar layui-bg-green" lay-percent="40%"></div>
|
||||
</div>
|
||||
<br>
|
||||
<div class="layui-progress">
|
||||
<div class="layui-progress-bar layui-bg-blue" lay-percent="50%"></div>
|
||||
</div>
|
||||
<br>
|
||||
<div class="layui-progress">
|
||||
<div class="layui-progress-bar layui-bg-cyan" lay-percent="60%"></div>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<div class="layui-progress layui-progress-big" lay-filter="demo" lay-showPercent="true">
|
||||
<div class="layui-progress-bar" lay-percent="100%"></div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<blockquote class="layui-elem-quote">Layui正是你苦苦寻找的前端UI框架</blockquote>
|
||||
<blockquote class="layui-elem-quote layui-quote-nm">Layui正是你苦苦寻找的前端UI框架Layui正是你苦苦寻找的前端UI框架Layui正是你苦苦寻找的前端UI框架Layui正是你苦苦寻找的前端UI框架Layui正是你苦苦寻找的前端UI框架</blockquote>
|
||||
|
||||
<fieldset class="layui-elem-field">
|
||||
<legend>字段集区块 - 默认风格</legend>
|
||||
<div class="layui-field-box">
|
||||
内容区域
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
横线上文
|
||||
<hr>
|
||||
横线下文
|
||||
|
||||
<br><br>
|
||||
|
||||
<ul class="layui-nav">
|
||||
<li class="layui-nav-item"><a href="">最新活动</a></li>
|
||||
<li class="layui-nav-item layui-this">
|
||||
<a href="javascript:;">产品</a>
|
||||
<dl class="layui-nav-child">
|
||||
<dd><a href="">选项1</a></dd>
|
||||
<dd><a href="">选项2</a></dd>
|
||||
<dd><a href="">选项3</a></dd>
|
||||
</dl>
|
||||
</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 class="layui-this"><a href="">后台模版</a></dd>
|
||||
<dd><a href="">电商平台</a></dd>
|
||||
</dl>
|
||||
</li>
|
||||
<li class="layui-nav-item"><a href="">社区</a></li>
|
||||
</ul>
|
||||
|
||||
<br><br>
|
||||
|
||||
<ul class="layui-nav layui-nav-tree" lay-filter="test">
|
||||
<li class="layui-nav-item layui-nav-itemed">
|
||||
<a class="" href="javascript:;">产品</a>
|
||||
<dl class="layui-nav-child">
|
||||
<dd><a href="javascript:;">移动模块</a></dd>
|
||||
<dd><a href="javascript:;">后台模版</a></dd>
|
||||
<dd><a href="javascript:;">电商平台</a></dd>
|
||||
<dd><a href="">跳转菜单</a></dd>
|
||||
</dl>
|
||||
</li>
|
||||
<li class="layui-nav-item">
|
||||
<a href="javascript:;">解决方案</a>
|
||||
<dl class="layui-nav-child">
|
||||
<dd><a href="javascript:;">移动模块</a></dd>
|
||||
<dd><a href="javascript:;">后台模版</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>
|
||||
</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" lay-filter="tabDemo" lay-allowClose="true">
|
||||
<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">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>
|
||||
|
||||
<button class="layui-btn" onclick="layui.element().tabChange('tabDemo', 3)">手工切换到“标题3”</button>
|
||||
<button class="layui-btn" onclick="layui.element().tabAdd('tabDemo', {title:'新标题', content:'新内容', id: +new Date})">添加Tab</button>
|
||||
<button class="layui-btn" onclick="layui.element().tabDelete('tabDemo', 4)">删除“标题4”</button>
|
||||
|
||||
<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">标题一</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">
|
||||
<div class="layui-form">
|
||||
<select>
|
||||
<option>1</option>
|
||||
<option>2</option>
|
||||
<option>3</option>
|
||||
<option>4</option>
|
||||
<option>5</option>
|
||||
<option>6</option>
|
||||
</select>
|
||||
</div>
|
||||
</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" lay-allowClose="true">
|
||||
<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', 'form'], function(){
|
||||
var element = layui.element();
|
||||
|
||||
element.on('tab(test)', function(data){
|
||||
console.log(this, data);
|
||||
});
|
||||
|
||||
element.on('nav(test)', function(elem){
|
||||
console.log(elem)
|
||||
});
|
||||
|
||||
element.on('collapse(test)', function(data){
|
||||
console.log(data);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,30 +0,0 @@
|
||||
<!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>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
|
||||
<script src="../src/layui.js"></script>
|
||||
<script>
|
||||
layui.config({
|
||||
base: './js/'
|
||||
}).extend({
|
||||
index: 'index'
|
||||
,test: 'child/test'
|
||||
}).use('test');
|
||||
|
||||
layui.use('index')
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,70 +0,0 @@
|
||||
<!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{ 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"></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
|
||||
//,end: '没了'
|
||||
,isLazyimg: true
|
||||
,done: function(page, next){ //加载下一页
|
||||
console.log(page)
|
||||
setTimeout(function(){
|
||||
var lis = [];
|
||||
for(var i = 0; i < 6; i++){
|
||||
lis.push('<li><img lay-src="http://s6.mogucdn.com/p2/160914/iz_5lc1cdg3j2hibl9ai99lg7c28k1fh_305x330.jpg?v='+ (page+i) +'"></li>')
|
||||
}
|
||||
next(lis.join(''), page < 3);
|
||||
}, 500);
|
||||
}
|
||||
});
|
||||
|
||||
//按屏加载图片
|
||||
flow.lazyimg({
|
||||
elem: '.demo img'
|
||||
,scrollElem: '.demo'
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
255
test/form.html
255
test/form.html
@@ -1,255 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>表单模块 - layui</title>
|
||||
<meta name="renderer" content="webkit">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<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">
|
||||
|
||||
<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="required|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="phone" 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="email" 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="你的工号" disabled>你的工号</option>
|
||||
<option value="你最喜欢的老师">你最喜欢的老师</option>
|
||||
</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="你的工号" disabled>你的工号</option>
|
||||
<option value="你最喜欢的老师">你最喜欢的老师</option>
|
||||
</optgroup>
|
||||
</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-inline">
|
||||
<select name="interest" lay-filter="aihao" lay-search>
|
||||
<option value=""></option>
|
||||
<option value="0">写作</option>
|
||||
<option value="1">阅读</option>
|
||||
<option value="2">游戏</option>
|
||||
<option value="3">音乐</option>
|
||||
<option value="4">旅行</option>
|
||||
<option value="5">读书</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item" pane>
|
||||
<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="游戏" disabled>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item" pane>
|
||||
<label class="layui-form-label">原始复选框</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="checkbox" name="like1[write]" lay-skin="primary" title="写作">
|
||||
<input type="checkbox" name="like1[read]" lay-skin="primary" title="阅读">
|
||||
<input type="checkbox" name="like1[game]" lay-skin="primary" title="游戏" disabled>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item" pane>
|
||||
<label class="layui-form-label">开关关</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="checkbox" name="close" lay-skin="switch" title="开关" disabled>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item" pane>
|
||||
<label class="layui-form-label">开关开</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="checkbox" checked name="open" lay-skin="switch" lay-filter="switchTest" lay-text="ON|OFF">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item" pane>
|
||||
<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="中" disabled>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item" pane>
|
||||
<label class="layui-form-label">单选框</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="radio" name="sex.id" value="男" title="男">
|
||||
<input type="radio" name="sex.id" value="女" title="女" checked>
|
||||
<input type="radio" name="sex.id" 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>
|
||||
|
||||
|
||||
<script src="../src/layui.js"></script>
|
||||
<!-- <script src="../build/lay/dest/layui.all.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" disabled>
|
||||
<input type="checkbox" name="love[a]">
|
||||
<input type="checkbox" name="love[b]">
|
||||
<input value="1">
|
||||
<select name="quiz">
|
||||
<option value="">请选择问题</option>
|
||||
<option disabled value="你工作的第一个城市">你工作的第一个城市</option>
|
||||
<option value="你的工号">你的工号</option>
|
||||
<option value="你最喜欢的老师">你最喜欢的老师</option>
|
||||
</select>
|
||||
<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>
|
||||
@@ -1,8 +0,0 @@
|
||||
|
||||
|
||||
layui.define(function(exports){
|
||||
|
||||
exports('test', {
|
||||
title: '子目录模块加载'
|
||||
})
|
||||
});
|
||||
@@ -1,8 +0,0 @@
|
||||
|
||||
|
||||
layui.define(function(exports){
|
||||
|
||||
exports('index', {
|
||||
title: '模块入口'
|
||||
});
|
||||
});
|
||||
@@ -1,99 +0,0 @@
|
||||
{
|
||||
"code": 0
|
||||
,"msg": ""
|
||||
,"data": {
|
||||
"mine": {
|
||||
"username": "纸飞机"
|
||||
,"id": "100000"
|
||||
,"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": "Z_子晴"
|
||||
,"id": "108101"
|
||||
,"avatar": "http://tva3.sinaimg.cn/crop.0.0.512.512.180/8693225ajw8f2rt20ptykj20e80e8weu.jpg"
|
||||
,"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": "让天下没有难写的代码"
|
||||
,"status": "offline"
|
||||
},{
|
||||
"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": [{
|
||||
"username": "林心如"
|
||||
,"id": "76543"
|
||||
,"avatar": "http://tp3.sinaimg.cn/1223762662/180/5741707953/0"
|
||||
,"sign": "我爱贤心"
|
||||
},{
|
||||
"username": "佟丽娅"
|
||||
,"id": "4803920"
|
||||
,"avatar": "http://tp4.sinaimg.cn/1345566427/180/5730976522/0"
|
||||
,"sign": "我也爱贤心吖吖啊"
|
||||
}]
|
||||
}]
|
||||
,"group": [{
|
||||
"groupname": "前端群"
|
||||
,"id": "101"
|
||||
,"avatar": "http://tp2.sinaimg.cn/2211874245/180/40050524279/0"
|
||||
},{
|
||||
"groupname": "Fly社区官方群"
|
||||
,"id": "102"
|
||||
,"avatar": "http://tp2.sinaimg.cn/5488749285/50/5719808192/1"
|
||||
}]
|
||||
}
|
||||
}
|
||||
@@ -1,74 +0,0 @@
|
||||
{
|
||||
"code": 0
|
||||
,"msg": ""
|
||||
,"data": {
|
||||
"owner": {
|
||||
"username": "贤心"
|
||||
,"id": "100001"
|
||||
,"avatar": "http://tp1.sinaimg.cn/1571889140/180/40030060651/1"
|
||||
,"sign": "这些都是测试数据，实际使用请严格按照该格式返回"
|
||||
}
|
||||
,"members": 12
|
||||
,"list": [{
|
||||
"username": "贤心"
|
||||
,"id": "100001"
|
||||
,"avatar": "http://tp1.sinaimg.cn/1571889140/180/40030060651/1"
|
||||
,"sign": "这些都是测试数据，实际使用请严格按照该格式返回"
|
||||
},{
|
||||
"username": "Z_子晴"
|
||||
,"id": "108101"
|
||||
,"avatar": "http://tva3.sinaimg.cn/crop.0.0.512.512.180/8693225ajw8f2rt20ptykj20e80e8weu.jpg"
|
||||
,"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": "代码在囧途，也要写到底"
|
||||
},{
|
||||
"username": "罗玉凤"
|
||||
,"id": "121286"
|
||||
,"avatar": "http://tp1.sinaimg.cn/1241679004/180/5743814375/0"
|
||||
,"sign": "在自己实力不济的时候，不要去相信什么媒体和记者。他们不是善良的人，有时候候他们的采访对当事人而言就是陷阱"
|
||||
},{
|
||||
"username": "长泽梓Azusa"
|
||||
,"id": "100001222"
|
||||
,"avatar": "http://tva1.sinaimg.cn/crop.0.0.180.180.180/86b15b6cjw1e8qgp5bmzyj2050050aa8.jpg"
|
||||
,"sign": "我是日本女艺人长泽あずさ"
|
||||
},{
|
||||
"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": ""
|
||||
},{
|
||||
"username": "林心如"
|
||||
,"id": "76543"
|
||||
,"avatar": "http://tp3.sinaimg.cn/1223762662/180/5741707953/0"
|
||||
,"sign": "我爱贤心"
|
||||
},{
|
||||
"username": "佟丽娅"
|
||||
,"id": "4803920"
|
||||
,"avatar": "http://tp4.sinaimg.cn/1345566427/180/5730976522/0"
|
||||
,"sign": "我也爱贤心吖吖啊"
|
||||
}]
|
||||
}
|
||||
}
|
||||
@@ -1,36 +0,0 @@
|
||||
|
||||
|
||||
<!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" onclick="layui.laydate({elem: this})" class="layui-input">
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<script src="../src/layui.js"></script>
|
||||
<script>
|
||||
layui.use('laydate', function(){
|
||||
var laydate = layui.laydate
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,51 +0,0 @@
|
||||
<!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;">
|
||||
<form class="layui-form">
|
||||
<div class="layui-form-item">
|
||||
<textarea name="demo" 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>
|
||||
<button class="layui-btn">提交</button>
|
||||
<a class="layui-btn" id="getChoose">获取选中内容</a>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="../src/layui.js"></script>
|
||||
<script>
|
||||
layui.use('layedit', function(){
|
||||
var layedit = layui.layedit;
|
||||
|
||||
var index = layedit.build('demo', {
|
||||
//hideTool: ['image']
|
||||
uploadImage: {
|
||||
url: '/upload/test/'
|
||||
,type: 'post'
|
||||
}
|
||||
//,tool: []
|
||||
//,height: 100
|
||||
});
|
||||
|
||||
getChoose.onclick = function(){
|
||||
alert(layedit.getSelection(index));
|
||||
};
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
111
test/layer.html
111
test/layer.html
@@ -1,111 +0,0 @@
|
||||
|
||||
|
||||
<!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>
|
||||
<button class="layui-btn demo" data-type="test3">捕获页</button>
|
||||
|
||||
<div id="bbs_update_form" style="display: none;padding: 20px;">
|
||||
<form class="layui-form layui-form-pane" id="update_bbs_info_form">
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">论坛封面</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="bbs_bg" autocomplete="off" placeholder="请输入图片地址（1045px*180px）" class="layui-input" value="http://q.jinsom.cn/wp-content/uploads/2016/12/bbs_bg.jpg">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">论坛头像</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="bbs_avatar" autocomplete="off" placeholder="请输入图片地址（150px*150px）" class="layui-input" value="http://q.jinsom.cn/wp-content/uploads/2016/12/timg.jpg">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">论坛介绍</label>
|
||||
<div class="layui-input-block">
|
||||
<textarea placeholder="50字内" class="layui-textarea" name="bbs_desc" >LightSNS是一款wordpress轻社交主题，这里是关于你这个论坛的描述，随便扯吧。
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">论坛公告</label>
|
||||
<div class="layui-input-block">
|
||||
<textarea placeholder="100字内" class="layui-textarea" name="bbs_notice">公告</textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">付费功能</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="checkbox" name="bbs_fufei" lay-skin="switch" title="开启付费可看功能" checked lay-skin="switch">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">验证码</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="checkbox" name="bbs_captcha" lay-skin="switch" title="开启验证码功能" >
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item" style="text-align: right;">
|
||||
<div class="layui-btn" id="bbs_update_button">更新</div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<script type='text/javascript' src='http://q.jinsom.cn/wp-content/themes/jinsomQ/js/jquery.min.js?ver=0.3'></script>
|
||||
<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
|
||||
})
|
||||
}
|
||||
,test3: function(){
|
||||
layer.open({
|
||||
title:'更新论坛信息',
|
||||
type: 1,
|
||||
skin: 'layui-layer-rim',
|
||||
area: ['500px', '580px'],
|
||||
content: $('#bbs_update_form')
|
||||
});
|
||||
}
|
||||
};
|
||||
$('.demo').on('click', function(){
|
||||
var type = $(this).data('type');
|
||||
active[type] ? active[type].call(this) : '';
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,33 +0,0 @@
|
||||
|
||||
|
||||
<!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="../build/css/layui.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="layui-layout layui-layout-admin">
|
||||
<div class="layui-header">
|
||||
<!-- 头部区域（可配合layui已有的水平导航） -->
|
||||
</div>
|
||||
<div class="layui-side layui-bg-black">
|
||||
<div class="layui-side-scroll">
|
||||
<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-body">
|
||||
<!-- 内容主体区域 -->
|
||||
</div>
|
||||
<div class="layui-footer">
|
||||
<!-- 底部固定区域 -->
|
||||
</div>
|
||||
</div>
|
||||
<script src="../layui/layui.js"></script>
|
||||
<script>
|
||||
//JavaScript代码区域
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,89 +0,0 @@
|
||||
<!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>
|
||||
@@ -1,33 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>滑块 - layui</title>
|
||||
<meta name="renderer" content="webkit">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<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">
|
||||
|
||||
<link rel="stylesheet" href="../src/css/layui.css">
|
||||
|
||||
<style>
|
||||
body{padding: 10px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="../src/layui.js"></script>
|
||||
<!-- <script src="../build/lay/dest/layui.all.js"></script> -->
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
153
test/table.html
153
test/table.html
@@ -1,153 +0,0 @@
|
||||
<!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">
|
||||
<colgroup>
|
||||
<col width="150">
|
||||
<col width="200">
|
||||
<col>
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>昵称</th>
|
||||
<th>加入时间</th>
|
||||
<th>签名</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>贤心</td>
|
||||
<td>2016-11-29</td>
|
||||
<td>人生就像是一场修行</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>贤心</td>
|
||||
<td>2016-11-29</td>
|
||||
<td>人生就像是一场修行</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>贤心</td>
|
||||
<td>2016-11-29</td>
|
||||
<td>人生就像是一场修行</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<table class="layui-table" lay-skin="line">
|
||||
<colgroup>
|
||||
<col width="150">
|
||||
<col width="200">
|
||||
<col>
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>昵称</th>
|
||||
<th>加入时间</th>
|
||||
<th>签名</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>贤心</td>
|
||||
<td>2016-11-29</td>
|
||||
<td>人生就像是一场修行</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>贤心</td>
|
||||
<td>2016-11-29</td>
|
||||
<td>人生就像是一场修行</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>贤心</td>
|
||||
<td>2016-11-29</td>
|
||||
<td>人生就像是一场修行</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<table class="layui-table" lay-skin="row">
|
||||
<colgroup>
|
||||
<col width="150">
|
||||
<col width="200">
|
||||
<col>
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>昵称</th>
|
||||
<th>加入时间</th>
|
||||
<th>签名</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>贤心</td>
|
||||
<td>2016-11-29</td>
|
||||
<td>人生就像是一场修行</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>贤心</td>
|
||||
<td>2016-11-29</td>
|
||||
<td>人生就像是一场修行</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>贤心</td>
|
||||
<td>2016-11-29</td>
|
||||
<td>人生就像是一场修行</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
<table class="layui-table" lay-even lay-skin="nob">
|
||||
<colgroup>
|
||||
<col width="150">
|
||||
<col width="200">
|
||||
<col>
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>昵称</th>
|
||||
<th>加入时间</th>
|
||||
<th>签名</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>贤心</td>
|
||||
<td>2016-11-29</td>
|
||||
<td>人生就像是一场修行</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>贤心</td>
|
||||
<td>2016-11-29</td>
|
||||
<td>人生就像是一场修行</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>贤心</td>
|
||||
<td>2016-11-29</td>
|
||||
<td>人生就像是一场修行</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
<script src="../src/layui.js"></script>
|
||||
<script>
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
147
test/tree.html
147
test/tree.html
@@ -1,147 +0,0 @@
|
||||
<!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>
|
||||
@@ -1,49 +0,0 @@
|
||||
<!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>
|
||||
@@ -1,36 +0,0 @@
|
||||
<!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>
|
||||
@@ -1,104 +0,0 @@
|
||||
|
||||
<!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