web单页应用（一）
2021-07-14 11:06
阅读：380
YPE html>
标签：function container ted 应用 overflow charset 事件 title setting
构建第一个单页应用
1.html页面结构
Document
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:"" },$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))
4、页面中调用模块方法
web单页应用（一）
标签：function container ted 应用 overflow charset 事件 title setting
原文地址：http://www.cnblogs.com/Nelsen8/p/7076329.html
下一篇：jquery遍历总结（转）
评论
亲，登录后才可以留言！