《单页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
相关文章
|
25天前
|
监控 JavaScript 算法
如何使用内存监控工具来定位和解决Node.js应用中的性能问题?
总之,利用内存监控工具结合代码分析和业务理解,能够逐步定位和解决 Node.js 应用中的性能问题,提高应用的运行效率和稳定性。需要耐心和细致地进行排查和优化,不断提升应用的性能表现。
175 77
|
27天前
|
存储 缓存 JavaScript
如何优化Node.js应用的内存使用以提高性能?
通过以上多种方法的综合运用,可以有效地优化 Node.js 应用的内存使用,提高性能,提升用户体验。同时,不断关注内存管理的最新技术和最佳实践,持续改进应用的性能表现。
116 62
|
23天前
|
存储 缓存 监控
如何使用内存监控工具来优化 Node.js 应用的性能
需要注意的是,不同的内存监控工具可能具有不同的功能和特点,在使用时需要根据具体工具的要求和操作指南进行正确使用和分析。
66 31
|
26天前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
springboot解决js前端跨域问题,javascript跨域问题解决
|
19天前
|
移动开发 缓存 前端开发
深入理解前端路由:原理、实现与应用
本书《深入理解前端路由:原理、实现与应用》全面解析了前端路由的核心概念、工作原理及其实现方法,结合实际案例探讨了其在现代Web应用中的广泛应用,适合前端开发者和相关技术人员阅读。
|
24天前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
32 6
|
24天前
|
JavaScript 前端开发 API
深入理解Node.js事件循环及其在后端开发中的应用
本文旨在揭示Node.js的核心特性之一——事件循环,并探讨其对后端开发实践的深远影响。通过剖析事件循环的工作原理和关键组件,我们不仅能够更好地理解Node.js的非阻塞I/O模型,还能学会如何优化我们的后端应用以提高性能和响应能力。文章将结合实例分析事件循环在处理大量并发请求时的优势,以及如何避免常见的编程陷阱,从而为读者提供从理论到实践的全面指导。
|
23天前
|
JavaScript
如何使用内存快照分析工具来分析Node.js应用的内存问题?
需要注意的是,不同的内存快照分析工具可能具有不同的功能和操作方式,在使用时需要根据具体工具的说明和特点进行灵活运用。
39 3
|
25天前
|
自然语言处理 前端开发 JavaScript
深入理解前端中的 “this” 指针:从基础概念到复杂应用
本文全面解析前端开发中“this”指针的运用,从基本概念入手,逐步探讨其在不同场景下的表现与应用技巧,帮助开发者深入理解并灵活掌握“this”的使用。
|
25天前
|
存储 前端开发 JavaScript
前端中对象的深度应用与最佳实践
前端对象应用涉及在网页开发中使用JavaScript等技术创建和操作对象,以实现动态交互效果。通过定义属性和方法,对象可以封装数据和功能,提升代码的组织性和复用性,是现代Web开发的核心技术之一。
下一篇
DataWorks