web单页应用

Posted 2020-09-24

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了web单页应用相关的知识，希望对你有一定的参考价值。

构建第一个单页应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/css.css">
    <script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"></script>
    <script type="text/javascript" src=‘js/js.js‘></script>
</head>
<body>
    <div id=‘spa‘></div>
</body>
</html>

2.css内容

body{
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #777
}
#spa{
    position: absolute;
    top:8px;
    left: 8px;
    bottom: 8px;
    right: 8px;
    border-radius: 8px 8px 0 8px;
    background: #fff;
}
.spa_slider{
    position: absolute;
    bottom: 0;
    right: 2px;
    width: 300px;
    height: 16px;
    cursor: pointer;
    border-radius: 8px 0 0 0;
    background-color:#f00;
}

3.js脚本内容

/* Jslint settings */
//module spa
var spa = (function($){
        //模块作用域参数配置
        var configMap = {
            extended_height:200,
            extended_title:"click to retract",
            retracted_height:16,
            retracted_title:‘click to extend‘,
            template_html:"<div class=‘spa_slider‘></div>"
        },$chatSlider,toggleSlider,onClickSlider,initModule;
        //点击切换方法
        toggleSlider = function(){
            var slider_height = $chatSlider.height();
            if( slider_height === configMap.retracted_height ){
                $chatSlider
                .animate({ height : configMap.extended_height },100,"swing")
                .attr( "title",configMap.extended_title );
                return true;
            }else if( slider_height === configMap.extended_height ){
                $chatSlider
                .animate({ height : configMap.retracted_height })
                .attr( "title",configMap.retracted_title  );
                return true;
            }
            return false;
        };
        //点击按钮事件,调用切换方法
        onClickSlider = function(evevt){
            toggleSlider();
            return false;
        };
        //模块接口事件
        initModule = function($container){
            $container.html( configMap.template_html );
            $chatSlider = $container.find(‘.spa_slider‘);
            $chatSlider
            .attr(‘title‘,configMap.retracted_title )
            .click( onClickSlider );
            return true;
        }
        //返回模块的对外接口
        return { initModule : initModule}
}(jQuery))

View Code

4、页面中调用模块方法

<script type="text/javascript">
        $(function(){
            spa.initModule(jQuery(‘#spa‘))
        })
</script>

View Code

以上是关于web单页应用的主要内容，如果未能解决你的问题，请参考以下文章

web单页应用是什么？它的好处与坏处有哪些（如何解决这些缺点）

单页应用及多页应用

hbuilder+vue单页应用打包成APP后退按钮返回上一页的问题

好程序员web前端分享如何构建单页Web应用

单页应用程序路由

单页Web应用：