jQuery和html5全屏响应式文章水平横向布局

这是一款jQuery和html5全屏响应式文章水平横向布局网页模板。在这个模板插件中使用了一些非常有用的jQuery插件。

• History.js by Benjamin Lupton
• jScrollPane by Kelvin Luck
• jquery-sparkle by Benjamin Lupton
• jquery.easing
• jquery.smartresize by Louis Remi

插件中的文章是达尔文（Charles Darwin）的《物种起源》，你要想看全文，请点击Project Gutenberg。

HTML

html结构使用一个包裹div包住左侧固定的导航栏和右侧的文章div。包裹div如下：

<div id="hs-container" class="hs-container">
    <!-- ... -->
</div>
                

左侧固定菜单的结构如下:

<aside class="hs-menu" id="hs-menu">
    <div class="hs-headline">
        <h1>
            <small>The</small> 
            Origin <small>of</small> 
            Species
        </h1>
        <small>6<sup>th</sup> Edition</small>
        <span class="author">by Charles Darwin</span>
    </div>   
    <nav>
        <a href="#introduction">
            <span>Introduction</span>
        </a>
        <a href="#chapter1">
            <span>Chapter I.</span>
            <span>Variation under Domestication</span>
        </a>
        <a href="#chapter2">
            <span>Chapter II.</span>
            <span>Variation Under Nature </span>
        </a>
        <!-- ... -->
    </nav> 
</aside>
<a href="#hs-menu" class="hs-totop-link">Go to the top</a>
                

右侧内容区域的结构如下:

<div class="hs-content-scroller">
    <div class="hs-content-wrapper">  
        <article class="hs-content" id="introduction">
            <div class="hs-inner">
                <h2>Introduction</h2>
                <p>...</p>
            </div>
        </article>
        
        <article class="hs-content" id="chapter1">
            <div class="hs-inner">
                <h2>Chapter I.</h2>
                <h3>Variation Under Domestication</h3>
                <h4>Causes of Variability</h4>
                <p>...</p>
            </div>
        </article>     
        <!-- ... -->  
    </div>  
</div>
                

class为hs-content-scroller的div实际上是一个遮罩，它的宽度和高度与屏幕的宽度高度相同。第二个class为hs-content-wrapper的div的宽度是所有文章宽度的总和，这种结构将使文章可以水平滚动。

JAVASCRIPT

首先要初始化一些变量参数：

var $container          = $( '#hs-container' ),
    // the scroll container that wraps the articles
    $scroller           = $container.find( 'div.hs-content-scroller' ),
    $menu               = $container.find( 'aside' ),
    // menu links
    $links              = $menu.find( 'nav > a' ),
    $articles           = $container.find( 'div.hs-content-wrapper > article' ),
    // button to scroll to the top of the page
    // only shown when screen size < 715
    $toTop              = $container.find( 'a.hs-totop-link' ),
    // the browser nhistory object
    History             = window.History,
    // animation options
    animation           = { speed : 800, easing : 'easeInOutExpo' },
    // jScrollPane options
    scrollOptions       = { verticalGutter : 0, hideFocus : true },
                

然后执行初始化函数：

init = function() {         
    // initialize the jScrollPane on both the menu and articles
    _initCustomScroll();
    // initialize some events
    _initEvents();
    // sets some css properties 
    _layout();
    // jumps to the respective chapter
    // according to the url
    _goto();
},
            

接下来要做的是创建和初始化jScrollPane，用它来创建自定义滚动条。特别指出的是，当屏幕的像素小于715px时，将不会执行该操作：

_initCustomScroll   = function() {  
    // Only add custom scrolling to articles if screen size > 715.
    // If not, the articles will be expanded (vertical layout)
    if( $(window).width() > 715 ) {    
        $articles.jScrollPane( scrollOptions );
    }
    // add custom scrolling to menu
    $menu.children( 'nav' ).jScrollPane( scrollOptions );
},
            

当浏览器窗口大小改变时，需要重新初始化jScrollPane来适应当前窗口，或者当窗口小于715px时将其销毁。

我们使用History.js来控制用户浏览文章的历史。

$(window).on({
    // when resizing the window we need to reinitialize or destroy the jScrollPanes
    // depending on the screen size
    'smartresize' : function( event ) { 
        _layout();
        $('article.hs-content').each( function() {
            var $article    = $(this),
                aJSP        = $article.data( 'jsp' );
            if( $(window).width() > 715 ) {
                
                ( aJSP === undefined ) ? $article.jScrollPane( scrollOptions ) : aJSP.reinitialise();
                _initArticleEvents();
            }   
            else {
                // destroy article's custom scroll if screen size <= 715px
                if( aJSP !== undefined )
                    aJSP.destroy();
                $container.off( 'click', 'article.hs-content' );
            }
        });
        var nJSP = $menu.children( 'nav' ).data( 'jsp' );
        nJSP.reinitialise();
        // jumps to the current chapter
        _goto();
    },
    // triggered when the history state changes - jumps to the respective chapter
    'statechange' : function( event ) {
        _goto();
    }
});

css代码和其他js代码请参考下载文件。