增加单页应用的layui-admin

single/res/views/component/layer/theme.html

@@ -0,0 +1,122 @@
+
+<title>layer 组件风格定制</title>
+
+<div class="layui-card layadmin-header">
+  <div class="layui-breadcrumb" lay-filter="breadcrumb">
+    <a lay-href="">主页</a>
+    <a><cite>组件</cite></a>
+    <a href="http://www.baidu.com/" target="_blank">layer</a>
+    <a><cite>风格定制</cite></a>
+  </div>
+</div>
+
+<style>
+/* 这段样式只是用于演示 */
+#LAY-component-layer-theme .layui-card-body{padding-top: 15px;}
+</style>
+
+<div class="layui-fluid" id="LAY-component-layer-theme">
+  <div class="layui-row layui-col-space15">
+    <div class="layui-col-md12">
+      <div class="layui-card">
+        <div class="layui-card-header">Windows 10 风格</div>
+        <div class="layui-card-body"> 
+          <div class="layui-btn-container">
+            <button type="button" class="layui-btn layui-btn-primary" lay-on="test-skin-win10">
+              Windows 10 风格信息框 <span class="layui-badge-dot"></span>
+            </button>
+            <button type="button" class="layui-btn layui-btn-primary" lay-on="test-skin-win10-page">
+              Win10 风格页面层 <span class="layui-badge-dot"></span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="layui-col-md12">
+      <div class="layui-card">
+        <div class="layui-card-header">风格定制</div>
+        <div class="layui-card-body"> 
+          <div class="layui-btn-container layadmin-layer-demo">
+            <button data-type="test1" class="layui-btn layui-btn-primary">layuiAdmin 风格</button>
+            <button data-type="test2" class="layui-btn layui-btn-primary">右侧呼出</button>
+          </div> 
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+layui.use(['admin'], function(){
+  var $ = layui.$;
+  var admin = layui.admin;
+  var element = layui.element;
+  var util = layui.util;
+  var router = layui.router();
+
+  element.render();
+  
+  var active = {
+    test1: function(){
+      admin.popup({
+        title: 'layuiAdmin'
+        ,shade: 0
+        ,anim: -1
+        ,area: ['280px', '150px']
+        ,id: 'layadmin-layer-skin-test'
+        ,skin: 'layui-anim layui-anim-upbit'
+        ,content: '内容'
+      })
+    }
+    ,test2: function(){
+      admin.popupRight({
+        id: 'LAY_adminPopupLayerTest'
+        ,success: function(){
+          $('#'+ this.id).html('<div style="padding: 20px;">放入内容</div>');
+          //admin.view(this.id).render('system/xxx')
+        }
+      });
+    }
+  };
+  
+  $('#LAY-component-layer-theme .layadmin-layer-demo .layui-btn').on('click', function(){
+    var type = $(this).data('type');
+    active[type] && active[type].call(this);
+  });
+
+  // util 事件
+  util.on('lay-on', {
+    'test-skin-win10': function(){
+      layer.alert('Windows 10 风格主题', {
+        skin: 'layui-layer-win10', // 2.8+
+        shade: 0.01,
+        btn: ['确定', '取消']
+      })
+    },
+    'test-skin-win10-page': function(){
+      // 此处以一个简单的 Win10 风格记事本为例
+      layer.open({
+        type: 1, // 页面层类型
+        skin: 'layui-layer-win10', // 2.8+
+        shade: 0.01,
+        area: ['50%', '60%'],
+        maxmin: true,
+        title: '*无标题 - 记事本',
+        content: [
+          '<div style="padding: 0 8px; height: 20px; line-height: 20px; border-bottom: 1px solid #F0F0F0; box-sizing: border-box; font-size: 12px;">',
+            // 自定义菜单，此处仅作样式演示，具体功能可自主实现
+            [
+              '<a href="javascript:;">文件(F)</a>',
+              '<a href="javascript:;" >编辑(E)</a> ',
+              '<a href="javascript:;" >格式(O)</a> ',
+              '<a href="javascript:;" >查看(V)</a> ',
+              '<a href="javascript:;" >帮助(H)</a> ',
+            ].join('   '),
+          '</div>',
+          '<textarea style="position: absolute; top: 20px; width: 100%; height: calc(100% - 20px); padding: 6px; border: none; resize: none; overflow-y: scroll; box-sizing: border-box;"></textarea>'
+        ].join('')
+      });
+    }
+  });
+});
+</script>