注意：
GOOGLE提供的jquery.min.js调用不到了怎么办？ ajax.googleapis站下的/ajax/libs/jquery/1.7.2/jquery.min.js调用不到了怎么办？
1.用百度的
http://libs.baidu.com/jquery/1.7.2/jquery.min.js
2.自己下载到本地
源码：
<!doctype html>
<html>
<head>
<title>SPA Chapter 1 section 1.2.5</title>
<style type="text/css">
body {
width : 100%;
height : 100%;
overflow :hidden;
background-color : #777;
}
#spa {
position : 8px;
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=
"http://libs.baidu.com/jquery/1.7.2/jquery.min.js">
</script>
<script>
/*jslint browser : true, continue : true,
devel : true, indent : 2, maxerr : 50,
newcap : true, nomen : true, plusplus : true,
regexp : true, sloppy : true, vars : true,
white :true,
*/
/*global jQuery*/
// Module /spa/
//
var spa = (function( $ ) {
// Module scope variables
var
// Set constants
configMap = {
extended_height : 434,
extended_title : 'Click to retract',
retracted_height : 16,
retracted_title : 'Click to extend',
template_html : '<div class="spa-slider"></div>'
},
// Declare all other module scope variables
$chatSlider,
toggleSlider, onClickSlider, initModules;
// DOM method /toggleSlider/
// alternates slider height
//
toggleSlider = function () {
var
slider_height = $chatSlider.height();
// extend slider if fully retracted
if (slider_height === configMap.retracted_height ) {
$chatSlider
.animate({ height : configMap.extended_height })
.attr( 'title', configMap.retracted_title );
return true;
}
// retracted slider if fully extended
else if ( slider_height === configMap.extended_height ) {
$chatSlider
.animate({ height : configMap.retracted_height })
.attr( 'title', configMap.retracted_title);
return true;
}
// do not take action if slider is in transition
return false;
}
// Event handler /onClickslider/
// receives click event and calls toggleSlider
//
onClickSlider = function () {
toggleSlider();
return false;
};
// Public method /initModules
// sets initial state and provides feature
//
initModule = function ( $container ) {
//render HTML
$container.html( configMap.templates_html );
$chatSlider = $container.find( '.spa-slider' );
// initialize slider height and title
// bind the user click evnet to the event handler
$chatSlider
.attr( 'title', configMap.retracted_title)
.click( onClickSlider);
return true;
};
return { initModule : initModule };
}( jQuery ));
// Start SPA once DOM is redy
jQuery(document).ready(
function () { spa.initModule( jQuery('#spa') ); }
);
</script>
</head>
<body>
<div id="spa">
<div class="spa-slider"></div>
</div>
</body>
</html>