《单页web应用 javaScript从前端到后端》 1.2 spa.html小例子demo
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了《单页web应用 javaScript从前端到后端》 1.2 spa.html小例子demo相关的知识，希望对你有一定的参考价值。
<!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>
以上是关于《单页web应用 javaScript从前端到后端》 1.2 spa.html小例子demo的主要内容，如果未能解决你的问题，请参考以下文章