libs/js/jquery-mobile-1.0.1pre/js/jquery.mobile.page.sections.js

   1 /*
   2 * This plugin handles theming and layout of headers, footers, and content areas
   3 */
   4
   5 (function( $, undefined ) {
   6
   7 $.mobile.page.prototype.options.backBtnText  = "Back";
   8 $.mobile.page.prototype.options.addBackBtn   = false;
   9 $.mobile.page.prototype.options.backBtnTheme = null;
  10 $.mobile.page.prototype.options.headerTheme  = "a";
  11 $.mobile.page.prototype.options.footerTheme  = "a";
  12 $.mobile.page.prototype.options.contentTheme = null;
  13
  14 $( ":jqmData(role='page'), :jqmData(role='dialog')" ).live( "pagecreate", function( e ) {
  15
  16         var $page = $( this ),
  17                 o = $page.data( "page" ).options,
  18                 pageRole = $page.jqmData( "role" ),
  19                 pageTheme = o.theme;
  20
  21         $( ":jqmData(role='header'), :jqmData(role='footer'), :jqmData(role='content')", this ).each(function() {
  22                 var $this = $( this ),
  23                         role = $this.jqmData( "role" ),
  24                         theme = $this.jqmData( "theme" ),
  25                         contentTheme = theme || o.contentTheme || ( pageRole === "dialog" && pageTheme ),
  26                         $headeranchors,
  27                         leftbtn,
  28                         rightbtn,
  29                         backBtn;
  30
  31                 $this.addClass( "ui-" + role );
  32
  33                 //apply theming and markup modifications to page,header,content,footer
  34                 if ( role === "header" || role === "footer" ) {
  35
  36                         var thisTheme = theme || ( role === "header" ? o.headerTheme : o.footerTheme ) || pageTheme;
  37
  38                         $this
  39                                 //add theme class
  40                                 .addClass( "ui-bar-" + thisTheme )
  41                                 // Add ARIA role
  42                                 .attr( "role", role === "header" ? "banner" : "contentinfo" );
  43
  44                         // Right,left buttons
  45                         $headeranchors  = $this.children( "a" );
  46                         leftbtn = $headeranchors.hasClass( "ui-btn-left" );
  47                         rightbtn = $headeranchors.hasClass( "ui-btn-right" );
  48
  49                         leftbtn = leftbtn || $headeranchors.eq( 0 ).not( ".ui-btn-right" ).addClass( "ui-btn-left" ).length;
  50
  51                         rightbtn = rightbtn || $headeranchors.eq( 1 ).addClass( "ui-btn-right" ).length;
  52
  53                         // Auto-add back btn on pages beyond first view
  54                         if ( o.addBackBtn &&
  55                                 role === "header" &&
  56                                 $( ".ui-page" ).length > 1 &&
  57                                 $this.jqmData( "url" ) !== $.mobile.path.stripHash( location.hash ) &&
  58                                 !leftbtn ) {
  59
  60                                 backBtn = $( "<a href='#' class='ui-btn-left' data-"+ $.mobile.ns +"rel='back' data-"+ $.mobile.ns +"icon='arrow-l'>"+ o.backBtnText +"</a>" )
  61                                         // If theme is provided, override default inheritance
  62                                         .attr( "data-"+ $.mobile.ns +"theme", o.backBtnTheme || thisTheme )
  63                                         .prependTo( $this );
  64                         }
  65
  66                         // Page title
  67                         $this.children( "h1, h2, h3, h4, h5, h6" )
  68                                 .addClass( "ui-title" )
  69                                 // Regardless of h element number in src, it becomes h1 for the enhanced page
  70                                 .attr({
  71                                         "tabindex": "0",
  72                                         "role": "heading",
  73                                         "aria-level": "1"
  74                                 });
  75
  76                 } else if ( role === "content" ) {
  77                         if ( contentTheme ) {
  78                             $this.addClass( "ui-body-" + ( contentTheme ) );
  79                         }
  80
  81                         // Add ARIA role
  82                         $this.attr( "role", "main" );
  83                 }
  84         });
  85 });
  86
  87 })( jQuery );