功能描述: 在页面的左边实现一个可以伸缩的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>