zoukankan      html  css  js  c++  java
  • 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{
         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;
         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
  • 相关阅读:
    [强网杯青少年专项赛] 惨惨战队WriteUp
    [BUUOJ记录] [HCTF 2018]WarmUp
    [WUST-CTF]Web WriteUp
    PHP check 的一些绕过技术
    [易霖博YCTF]Web WriteUp
    Java backup
    Common Knowledge
    一篇帖子教会你如何获取网盘数据
    python爬虫如何爬知乎的话题?
    浏览器的复制到剪切板功能,兼容所有浏览器,悬浮层不能复制问题解决
  • 原文地址:https://www.cnblogs.com/Nelsen8/p/7076329.html
Copyright © 2011-2022 走看看