Javascript Eğitim Dersleri #013

9 Nisan 2008, Çarşamba

Tabbed Menü Sistemi

Amacımız, client-side’a çalışacak, dinamik TABBED Menü sistemi yapmak. Elimizde menü ve sayfalar var. Yapmamız gereken, menü ile sayfa arasında bir bağ kurmak.

myPages adında bir obje üretiyoruz. Metodları ve özellikleri :

  • menu : Array
  • contents : Array
  • addPageItem : function( pageID , htmlContent )
  • addMenuItem : function( pageID , menuTitle )
  • publish : function( pageID )

menu array’ine, obje olarak; { 'page_id' : pageID , 'html_content' : htmlContent } yerleştiriyoruz. Aynı şekilde, contents array’ine de obje olarak; { 'page_id' : pageID , 'title' : menuTitle } yerleştiriyoruz. menu ve contents arasında ortak olan şey : pageID

myPages.addMenuItem( 'SAYFA_NO' , 'MENÜ_ADI' );
myPages.addPageItem( 'SAYFA_NO' , 'HTML_İÇERİK' );
şeklinde gerekli array’lerin içlerini dolduruyoruz.

Çalışan örneği görmek için tıklayın.

  1. var myPages = {
  2.  menu : []
  3.  ,
  4.  contents : []
  5.  ,
  6.  addPageItem : function ( pageID , htmlContent )
  7.  {
  8.   this.contents.push( { 'page_id' : pageID , 'html_content' : htmlContent } );
  9.  }
  10.  ,
  11.  addMenuItem : function ( pageID , menuTitle )
  12.  {
  13.   this.menu.push( { 'page_id' : pageID , 'title' : menuTitle } );
  14.  }
  15.  ,
  16.  publish : function ( pageID )
  17.  {
  18.   var strMenuOut = '<ul id="menu">';
  19.   for( var index in this.menu )
  20.   {
  21.    var strMenuPageID = this.menu[ index ][ 'page_id' ];
  22.    var strMenuTitle = this.menu[ index ][ 'title' ];
  23.    var li_css = ' class="current"';
  24.  
  25.    if( pageID != strMenuPageID )
  26.    {
  27.     li_css = '';
  28.     strMenuTitle = '<a href="javascript:void(0);" onclick="myPages.publish( \''
  29.      + strMenuPageID + '\' );return false;">'
  30.      + strMenuTitle + '<\/a>';
  31.    }
  32.  
  33.    strMenuOut+= '<li' + li_css + '>' + strMenuTitle + '<\/li>';
  34.   }
  35.   strMenuOut+= '<\/ul>';
  36.   
  37.   var strContentOut = '';
  38.   for( var index in this.contents )
  39.   {
  40.    var strPageID = this.contents[ index ][ 'page_id' ];
  41.    var strHTMLContent = this.contents[ index ][ 'html_content' ];
  42.    if( strPageID == pageID )
  43.    {
  44.     strContentOut = '<div class="text">' + strHTMLContent + '<\/div>';
  45.    }
  46.   }
  47.   document.getElementById( 'canvas' ).innerHTML = strMenuOut + strContentOut;
  48.  }
  49. };
  50.  
  51. window.onload = function ()
  52. {
  53.  myPages.addMenuItem( 'SAYFA1' , 'Ana Sayfa' );
  54.  myPages.addMenuItem( 'SAYFA2' , 'Hakkımızda' );
  55.  myPages.addMenuItem( 'SAYFA3' , 'İletişim' );
  56.  
  57.  myPages.addPageItem( 'SAYFA1' , '<h1>Merhaba!<\/h1><p>Ana Sayfa yazısı...<\/p>' );
  58.  myPages.addPageItem( 'SAYFA2' , '<h1>Biz Kimiz?<\/h1><p>Hakkımızda yazısı...<\/p>' );
  59.  myPages.addPageItem( 'SAYFA3' , '<h1>Adreslerimiz<\/h1><p>Telefon : 123 456<\/p>' );
  60.  
  61.  myPages.publish( 'SAYFA1' );
  62. }
  1. <body>
  2.  <div id="canvas">
  3.  </div>
  4. </body>