首页 > 代码库 > web单页应用(一)
web单页应用(一)
构建第一个单页应用
1.html页面结构
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/css/css.css"> <script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"></script> <script type="text/javascript" src=http://www.mamicode.com/‘js/js.js‘></script>>
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))
4、页面中调用模块方法
<script type="text/javascript"> $(function(){ spa.initModule(jQuery(‘#spa‘)) }) </script>
web单页应用(一)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。