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

html>

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;

}

var spa = (function($){

var configMap = {

extended_height:434,

extended_title:'clcik to retract',

retracted_height:16,

retracted_title:'click to extend',

template_html:'

'

},

$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'));

})