《单页web应用 javaScript从前端到后端》 1.2 spa.html小例子demo

简介:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
< html >
     < head >
         < meta  charset = "UTF-8" >
         < title ></ title >
         < style >
             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: #ffffff;
             }
             .spa-slider{
                 position: absolute;
                 bottom: 0;
                 right: 2px;
                 width: 300px;
                 height: 16px;
                 border-radius: 8px 0 0 0;
                 background-color: #f00;
             }
         </ style >
         < script  src = "scripts/jquery.js" ></ script >
         < script >
             var spa = (function($){
                 var configMap = { 
                     extended_height:434,
                     extended_title:'clcik to retract',
                     retracted_height:16,
                     retracted_title:'click to extend',
                     template_html:'< div  class = "spa-slider" ><\/div>'
                 },
                 $chatSlider,
                 toggelSlider,onClickSlider,initModule;
                 toggelSlider = 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){
                     toggelSlider();
                     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));
             
             $(function(){
                     spa.initModule(jQuery('#spa'));
             })
         </ script >
 
     </ head >
     < body >
         < div  id = "spa" >
         </ div >
     </ body >
</ html >


本文转自  小旭依然  51CTO博客,原文链接:http://blog.51cto.com/xuyran/1890478
相关文章
|
10天前
|
前端开发
用html+javascript打造公文一键排版系统3:获取参数设置、公文标题排版
用html+javascript打造公文一键排版系统3:获取参数设置、公文标题排版
|
10天前
|
算法 JavaScript 前端开发
第一个算法项目 | JS实现并查集迷宫算法Demo学习
本文是关于使用JavaScript实现并查集迷宫算法的中国象棋demo的学习记录,包括项目运行方法、知识点梳理、代码赏析以及相关CSS样式表文件的介绍。
第一个算法项目 | JS实现并查集迷宫算法Demo学习
|
10天前
|
JavaScript 前端开发 小程序
一小时入门Vue.js前端开发
本文是作者关于Vue.js前端开发的快速入门教程,包括结果展示、参考链接、注意事项以及常见问题的解决方法。文章提供了Vue.js的基础使用介绍,如何安装和使用cnpm,以及如何解决命令行中遇到的一些常见问题。
一小时入门Vue.js前端开发
|
3天前
|
开发框架 前端开发 JavaScript
React、Vue.js 和 Angular主流前端框架和选择指南
在当今的前端开发领域,选择合适的框架对于项目的成功至关重要。本文将介绍几个主流的前端框架——React、Vue.js 和 Angular,探讨它们各自的特点、开发场景、优缺点,并提供选择框架的建议。
19 6
|
2天前
|
前端开发 JavaScript 微服务
拥抱微前端架构:构建未来Web应用的新思路
随着互联网技术的发展,Web应用日益复杂,传统单体架构已难以满足需求。微前端架构将大型应用拆分为独立模块,便于管理和迭代。其核心优势包括技术栈无关性、独立部署、团队协作及易于扩展。实施时需定义边界、选用框架(如Single-spa)、管理状态通信,并解决样式隔离和安全性等问题。尽管存在挑战,微前端架构凭借灵活性和高效性,有望成为未来Web开发的主流趋势。
|
10天前
|
JavaScript 前端开发 索引
JavaScript HTML DOM 节点列表
JavaScript HTML DOM 节点列表
13 5
|
10天前
|
JavaScript 前端开发 索引
JavaScript HTML DOM 集合(Collection)
JavaScript HTML DOM 集合(Collection)
9 4
|
10天前
|
JavaScript 前端开发
JavaScript HTML DOM 元素 (节点)
JavaScript HTML DOM 元素 (节点)
18 2
|
1天前
|
JavaScript 前端开发 API
【前端基础篇】JavaScript之jQuery介绍
【前端基础篇】JavaScript之jQuery介绍
9 0
|
1天前
|
JavaScript 前端开发 Java
【前端基础篇】JavaScript之BOM介绍
【前端基础篇】JavaScript之BOM介绍
8 0