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