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

转载于:https://www.cnblogs.com/Nelsen8/p/7076329.html

web单页应用（一）相关推荐

可扩展的web单页应用程序架构
可扩展的web单页应用程序架构本文转载自:众成翻译译者:杨小福链接:http://www.zcfy.cc/article/1319 原文:http://blog.mgechev.com/2016 ...
移动Web单页应用开发实践——页面结构化
1. 前言在开发面向现代智能手机的移动Web应用的时候,无法避免一个事实,就是需要开发单页应用(Single Page WebApp).对于不同的系统需求,单页应用的粒度会不同,可能是整个系统都使用 ...
简述单页应用的优缺点
web单页应用是什么? Web单页应用就是指只有一个Web页面作为入口的应用,在浏览器中运行期间不会重新加载页面.也就是说浏览器一开始会加载它必需的thml.css和Js,之后所有的交互操作都在一个页 ...
如何在单页应用程序Angular 7中使用FastReport Core Web报表
2019独角兽企业重金招聘Python工程师标准>>> 下载FastReport.Net最新版本单页应用程序的概念正在寻找越来越多的支持者.最着名的单页框架之一是Angular,它 ...
《单页Web应用：JavaScript从前端到后端》——1.4 小结
本节书摘来自异步社区<单页Web应用:JavaScript从前端到后端>一书中的第1章,第1.4节,作者:[美]Michael S. Mikowski , Josh C. Powell著, ...
淘宝客静态单页_单页应用程序的Spring Boot静态Web资源处理
淘宝客静态单页诸如gulp和grunt之类的Javascript构建工具确实让我大吃一惊,我看着这些工具的构建脚本之一,发现很难理解它,并且无法想象从头开始编写其中一个构建脚本. 这就是yeoman ...
单页应用程序的Spring Boot静态Web资源处理
诸如gulp和grunt之类的Javascript构建工具确实让我大吃一惊,我看着这些工具的构建脚本之一,发现很难理解它,无法想象从头开始编写其中一个构建脚本. 这就是yeoman出现的地方,它是一种 ...
单页web应用是什么？它又会给传统网站带来哪些好处?
原文链接:http://blog.csdn.net/zuoninger/article/details/38842823 点击阅读原文 -------------------------------- ...
SPA 单页Web应用
定义单页 Web 应用 (single-page application 简称为 SPA) 是一种特殊的 Web 应用.它将所有的活动局限于一个Web页面中,仅在该Web页面初始化时加载相应的HTM ...

web单页应用（一）

web单页应用（一）相关推荐

最新文章

热门文章