功能描述: 在页面的左边实现一个可以伸缩的div。
Code:
<script type = "text/javascript">
/* 通过hkcmd这个命名空间,hkcmd就可以使用自定义的公共方法。
* 定义了一个hkcmd的变量,hkcmd指代的是一个函数。
* JavaScript是一种宽松型的语言,不用搞明白数据类型,就可以使用。
*/
var hkcmd = ( function($){
/* 声明了一个对象 configMap */
var configMap = {
extended_width : 400px;
extended_title : "Click to retract!";
retracted_width: 40px;
retracted_title: "Click to extend!"
template_html : '<div class = "hkcmd-slider"></div>'
},
$chatSlider,
onclickSlider, initModule, toggleSlider;
/* 实现div伸缩的函数 */
toggleSlider = function(){
var slider_width = $chatSlider.width();
if( slider_width === configMap.retracted_width ){
$chatSlider
.animate( { width: configMap.extended_width } )
.attr('title', configMap.extended_title );
return true;
}
else if( slider_width === configMap.extended_width ){
$chatSlider
.animate( { width: configMap.retracted_width } )
.attr('title', configMap.retracted_title);
return true;
}
// 其它情况下,不伸缩div。
return false;
};
onclickSlider = function( event ){
toggleSlider();
return false;
};
initModule = function($container){
$container.html( configMap.template_html);
$chatSlider = $container.find( '.hkcmd-slider' );
$chatSlider
.attr('title', configMap.retracted_title)
.click( onclickSlider );
return true;
};
// 返回一个公共方法 initMoudle();
return { initMoudle: initMoudle };
}(jQuery));
// 启动hkcmd,入口
jQuer(document).ready(
function(){ hkcmd.initMoudle( jQuery('#hkcmd') ); }
);
</script>