完全なナビゲーションシステム

上/右/下/左矢印キーを使用するか、ナビゲーション用の要素または大きな画像自体を クリックすることによって、これらの要素をスクロールします。

• Seagram Building New York City, United States
• Barcelona Pavilion Barcelona, Spain
• New National Gallery Berlin, Germany

スタンドアロン・デモ

このデモは、利用できるな無限の可能性を紹介します。 縦スクロールの下に、"ページ"を無制限に持つことができ、各々のページは、 サイズが無制限のスクロールを含むことができます。 スクロール項目に、単なる画像だけではなく、あらゆるものを含むことができます。 あなたも、この種のシステムに基づいて、ウェブサイト全体を構築することができます。

HTML コード

1つの縦スクロールと、縦スクロールの内部にネストした3つの横スクロールがあります。 この、HTML構造は次の通りです:

 
  
[thumbnail #1]
  
[thumbnail #2]
  
[thumbnail #3]

 


 
  
  

 
    
    

 
      
      

 
      
      

 
				
				

			 
				  
				  
 [The Content] 
				  
 [The Content] 
				  
 [The Content] 
 
				
 
      
 
    
 
    
    

 
    
    

      ...
 
    
 
  
 

CSS コード

ここでのCSSは、最小限の設定と縦の設定 で学んだ原則を使用します。 ここに、最も重要な要素があります:

/* main vertical scroll */
#main {
  position:relative;
  overflow:hidden;
  height: 450px;
}
 
/* root element for pages */
#pages {
  position:absolute;
  height:20000em;
}
 
/* root element for horizontal scrollables */
.scrollable {
  position:relative;
  overflow:hidden;
  width: 510px;
  height: 450px;
}
 
/* root element for scrollable items */
.scrollable .items {
  width:20000em;
  position:absolute;
  clear:both;
}

JavaScript コード

ここに、文書化したJavaScriptの設定があります。 興味深いのは、横スクロールに設定している keyboard: 'static' です。 これは、フォーカスを持っていなくとも、上/下矢印キーは、常にスクロールを制御することを意味しています。 左/右矢印キーが、スクロールのアクティブなビューへフォーカスを与えるために、 onSeek コールバックを使用しています。

      // main vertical scroll
      $("#main").scrollable({
 
        // basic settings
        vertical: true,
 
        // up/down keys will always control this scrollable
        keyboard: 'static',
 
        // assign left/right keys to the actively viewed scrollable
        onSeek: function(event, i) {
          horizontal.eq(i).data("scrollable").focus();
        }
 
        // main navigator (thumbnail images)
      }).navigator("#main_navi");
 
      // horizontal scrollables. each one is circular and has its own navigator instance
      var horizontal = $(".scrollable").scrollable({ circular: true }).navigator(".navi");
 

      // when page loads setup keyboard focus on the first horzontal scrollable
      horizontal.eq(0).data("scrollable").focus();
  

$(document).ready 内にコールを括ると、文書はスクリプトの実行が可能になり次第スクリプトを実行します。 ユーザーズマニュアルから、その詳細をお読みください。