<!doctype html>
<html>
<head>
<title>第一个SPA</title>
<style type="text/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-color:#fff;
}
.spa-slider {
position:absolute;
bottom:0;
right:2px;
width:300px;
height:16px;
cursor:pointer;
border-radius:8px 0 0 0;
background-color:#f00;
}
</style>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
var spa = (function ( $ ) {
var configMap = {
extended_height : 434,
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})
.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 ) {
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));
jQuery(document).ready(
function () {spa.initModule(jQuery('#spa'));}
);
</script>
</head>
<body>
<div id="spa">
</div>
</body>
</html>
