《单页web应用 javaScript从前端到后端》3.1 开发shell小例子demo

2021-12-31 20:44:25

目前看到这里，还不懂什么是单页应用，这不就是一个普通的点击滑开收缩的动画而已……作者写的那么复杂666

请转载此文的朋友务必附带原文链接，谢谢。

原文链接：http://xuyran.blog.51cto.com/11641754/1891022

spa.html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link  rel="stylesheet" href="css/spa.css" type="text/css"/>
        <link  rel="stylesheet" href="css/spa.shell.css" type="text/css"/>
        <style>
             
        </style>
        <script src="scripts/jquery.js"></script>
        <script src="scripts/jquery.uriAnchor.js"></script>
        <script src="scripts/spa.js"></script>
        <script src="scripts/spa.shell.js"></script>
        <script>
            $(function(){
                    spa.initModule(jQuery('#spa'));
            })
        </script>
 
    </head>
    <body>
        <div id="spa">
        </div>
    </body>
</html>


spa.js

1
2
3
4
5
6
var spa = (function(){
    var initModule = function($container){
        spa.shell.initModule(($container)); //执行spa.shell里面的initModule函数
    };
    return {initModule:initModule}; //执行initModule函数
}())

spa.shell.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
spa.shell = (function(){
    var configMap = {
        main_html:String()
            + '<div class="spa-shell-head">'
                + '<div class="spa-shell-head-logo"></div>'
                + '<div class="spa-shell-head-acct"></div>'
                + '<div class="spa-shell-head-search"></div>'
            + '</div>'
            + '<div class="spa-shell-main spa-x-closed">'
                + '<div class="spa-shell-main-nav"></div>'
                + '<div class="spa-shell-main-content"></div>'
            + '</div>'
            + '<div class="spa-shell-foot"></div>'
            + '<div class="spa-shell-chat"></div>'
            + '<div class="spa-shell-modal"></div>',
        chat_extend_time:1000,
        chat_retract_time:300,
        chat_extend_height:450,
        chat_retract_height:15,
        chat_extend_title:'click to retract',
        chat_retracted_title:'click to extend'
    },
    stateMap = {
        $container:null,
        is_chat_retracted:true
    },
    jqueryMap = {},
    setJqueryMap,initModule;
    setJqueryMap = function($container){
        var $container = stateMap.$container;
        jqueryMap = { //给jqueryMap对象赋值
            $container:$container,
            $chat:$container.find('.spa-shell-chat')
        };
    }
//  initModule = function($container){  //公开特权方法
//      stateMap.$container = $container;
//      $container.html(configMap.main_html);
//      setJqueryMap();
//  }
    toggleChat = function(do_extend,callback){
        var px_chat_ht = jqueryMap.$chat.height(),
            is_open = px_chat_ht === configMap.chat_extend_height,
            is_closed = px_chat_ht === configMap.chat_retract_height,
            is_sliding = !is_open && !is_closed;
        if(is_sliding){
            return false;
        }
        if(do_extend){
            jqueryMap.$chat.animate({
                height:configMap.chat_extend_height,
            },configMap.chat_extend_time,function(){
                jqueryMap.$chat.attr('title',configMap.chat_extend_title);
                stateMap.is_chat_retracted  = false;
                if(callback){
                    callback(jqueryMap.$chat);
                }
            });
            return true;
        }
        jqueryMap.$chat.animate({
            height:configMap.chat_retract_height
        },configMap.chat_retract_time,function(){
            jqueryMap.$chat.attr('title',configMap.chat_retracted_title);
            stateMap.is_chat_retracted  = true;
            if(callback){
                callback(jqueryMap.$chat);
            }
        });
        return true;
    }
    onClickChat = function(){
        toggleChat(stateMap.is_chat_retracted);
        return false;
    }
    initModule = function($container){
        stateMap.$container  = $container; //给stateMap.$container对象赋值
        $container.html(configMap.main_html);
        setJqueryMap();
//      setTimeout(function(){
//          toggleChat(true);
//      },3000)
//      setTimeout(function(){
//          toggleChat(false);
//      },8000)
        stateMap.is_chat_retracted  = true;
        jqueryMap.$chat.attr('title',configMap.chat_retracted_title)
        .click(onClickChat);
    }
    return {initModule:initModule};
}())

spa.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
/*
 * spa.css
 * Root namespace styles
*/
 
/** Begin reset */
  * {
    margin  : 0;
    padding : 0;
    -webkit-box-sizing : border-box;
    -moz-box-sizing    : border-box;
    box-sizing         : border-box;
  }
  h1,h2,h3,h4,h5,h6,p { margin-bottom : 10px; }
  ol,ul,dl { list-style-position : inside;}
/** End reset */
 
/** Begin standard selectors */
  body {
    font : 13px 'Trebuchet MS', Verdana, Helvetica, Arial, sans-serif;
    color            : #444;
    background-color : #888;
  }
  a { text-decoration : none; }
    a:link, a:visited { color : inherit; }
    a:hover { text-decoration: underline; }
 
  strong {
    font-weight : 800;
    color       : #000;
  }
/** End standard selectors */
 
/** Begin spa namespace selectors */
  #spa {
    position : absolute;
    top      : 8px;
    left     : 8px;
    bottom   : 8px;
    right    : 8px;
 
    min-height : 500px;
    min-width  : 500px;
    overflow   : hidden;
 
    background-color : #fff;
    border-radius    : 0 8px 0 8px;
  }
/** End spa namespace selectors */
 
/** Begin utility selectors */
  .spa-x-select {}
  .spa-x-clearfloat {
    height     : 0      !important;
    float      : none   !important;
    visibility : hidden !important;
    clear      : both   !important;
  }
/** End utility selectors */

.spa.shell.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
.spa-shell-head,.spa-shell-head-logo,.spa-shell-head-acct,.spa-shell-head-search,
.spa-shell-main,.spa-shell-main-nav,.spa-shell-main-content,.spa-shell-foot,
.spa-shell-chat,.spa-shell-modal{
    position: absolute;
}
.spa-shell-head {
  top    : 0;
  left   : 0;
  right  : 0;
  height : 40px;
}
.spa-shell-head-logo {
  top        : 4px;
  left       : 4px;
  height     : 32px;
  width      : 128px;
  background : orange;
}
 
.spa-shell-head-acct {
  top        : 4px;
  right      : 0;
  width      : 64px;
  height     : 32px;
  background : green;
}
.spa-shell-head-search{
    top:4px;
    right:64px;
    width:248px;
    height: 32px;
    background: blue;
}
.spa-shell-main{
    top:40px;
    left:0;
    bottom: 40px;
    right: 0;
}
.spa-shell-main-content,
.spa-shell-main-nav{
    top: 0;
    bottom: 0;
}
.spa-shell-main-nav{
    width: 250px;
    background: #eee;
}
.spa-x-closed .spa-shell-main-nav{
    width: 0;
}
.spa-shell-main-content{
    left: 250px;
    right: 0;
    background: #ddd;
}
.spa-x-closed .spa-shell-main-content{
    left: 0;
}
.spa-shell-foot{
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
}
.spa-shell-chat{
    bottom: 0;
    right: 0;
    width: 300px;
    height: 15px;
    background: red;
    z-index: 1;
}
.spa-shell-modal{
    margin-top: -200px;
    margin-left: -200px;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 400px;
    background: #FFFFFF;
    border-radius: 3px;
    z-index: 2;
}

浏览器界面如下：

《单页web应用 javaScript从前端到后端》3.1 开发shell小例子demo

本文转自  小旭依然  51CTO博客，原文链接:http://blog.51cto.com/xuyran/1891022

上一篇：服务器安装node.js和npm


下一篇：vue echarts 随窗口变化