web单页应用（一）

构建第一个单页应用

1.html页面结构

<!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

 

posted @ 2017-06-25 11:02  登峰造楼  阅读(207)  评论(0)  编辑  收藏  举报