web单页应用（1）--第一个SPA 

<!doctype html>
<html>
    <head>
        <title>第一个SPA</title>
        <style type="text/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-color:#fff;
            }
            .spa-slider {
                position:absolute;
                bottom:0;
                right:2px;
                width:300px;
                height:16px;
                cursor:pointer;
                border-radius:8px 0 0 0;
                background-color:#f00;
            }
        </style>
        <script type="text/javascript" src="jquery-1.8.0.min.js"></script>
        <script type="text/javascript">
            var spa = (function ( $ ) {
                var configMap = {
                        extended_height :  434,
                        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})
                                .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 ( event ) {
                        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));
            
            jQuery(document).ready(
                function () {spa.initModule(jQuery('#spa'));}
            );
        </script>
    </head>
    <body>
        <div id="spa">
        </div>
    </body>
</html>

posted @ 2016-07-06 10:05  王甘林  阅读(204)  评论(0)    收藏  举报